Tools · SPBoucher
Menu

Mermaid

by Mermaid project (Knut Sveidqvist and contributors) · Library · also known as Mermaid.js, Mermaid Live Editor, Mermaid Chart

JavaScript library that renders flowcharts, sequence, class, state, ER, Gantt and other diagrams from a Markdown-like text syntax

MIT licenseOpen sourceFreeLocalSelf-hostable
Visit official site Compare

Link verified Nov 2, 2026

Overview

Mermaid is an open-source JavaScript diagramming library created by Knut Sveidqvist that turns a concise text syntax into SVG diagrams: flowcharts, sequence, class, state and entity-relationship diagrams, Gantt charts, Git graphs, mind maps, timelines, pie and quadrant charts and more. Because diagrams are plain text, they can be versioned with code and rendered wherever the library is embedded, including GitHub and GitLab Markdown, Notion, Obsidian, Docusaurus, MkDocs and VS Code. A command-line tool (mermaid-cli) renders to SVG, PNG or PDF for documents, and the Mermaid Live Editor provides instant preview; the maintainers also run Mermaid Chart, a commercial editor and collaboration service. Layout is automatic and offers limited manual control, complex diagrams can render awkwardly, and syntax details differ between diagram types and versions.

Capabilities

  • Text-to-diagram rendering for many diagram types
  • SVG output embeddable in web pages and Markdown
  • Theming and configuration directives
  • mermaid-cli for batch rendering to SVG, PNG and PDF
  • Live Editor for interactive preview
  • Native support in GitHub, GitLab and many documentation tools

Typical workflows

  1. Keep architecture diagrams as text in a repository and render them in docs
  2. Generate a sequence diagram from a specification and export to PDF for a paper

Strengths

  • MIT license and ubiquitous rendering support
  • Diagrams versioned as plain text

Limitations

  • Little manual control over layout
  • Complex diagrams can be hard to read
  • Syntax varies across diagram types

Prerequisites

  • JavaScript runtime or a renderer that supports Mermaid

Who it is for

  • Developers documenting systems
  • Technical writers and educators

Alternatives & comparison

draw.io and Excalidraw are interactive editors where you position shapes by hand; Mermaid computes layout from text, which suits version control and generated documentation. Figma is a design tool rather than a diagram generator.

  • draw.io

    Free diagramming editor (formerly diagrams.net) for flowcharts, network, UML and architecture diagrams, available as web app, desktop app and integrations

    Open sourceFree
  • Excalidraw

    Open-source virtual whiteboard for hand-drawn-style diagrams with live collaboration, embeddable as a React component, plus a hosted Excalidraw+ service

    Open sourceOpen source
  • Figma

    Browser-based collaborative interface design platform with vector editing, components, prototyping, FigJam whiteboards, Dev Mode and a plugin and REST API

    ProprietaryFreemium
Compare Mermaid with its alternatives →

Sources & verification

Primary sources consulted for this record. Claims are tied to the fields each source supports; the automated link checker re-verifies every URL on a schedule.

  • License
    LICENSE (MIT)

    https://github.com/mermaid-js/mermaid/blob/develop/LICENSE

    Supports: license_spdx, source_model

    checked Nov 1, 2026
  • Official documentation
    Mermaid — About

    https://mermaid.js.org/intro

    Supports: capabilities, integrations

    checked Nov 1, 2026
  • Official site
    Mermaid

    https://mermaid.js.org/

    Supports: name, summary

    checked Nov 1, 2026
  • Official site
    Mermaid Live Editor

    https://mermaid.live/

    Supports: capabilities

    checked Nov 1, 2026
Confidence
High
Reviewed
Nov 1, 2026
Links
Verified · Nov 2, 2026

Spotted an error?

Broken link, outdated license, wrong category, or a tool that no longer exists? Tell us; reports are reviewed by the editor.

shadcn/ui

shadcn · Web frameworks & UI

Collection of accessible React components built on Radix primitives and Tailwind CSS that are copied into a project's source rather than installed as a dependency

MITOpen sourceFreeLocalNov 2, 2026

Tailwind CSS

Tailwind Labs · Web frameworks & UI

Utility-first CSS framework from Tailwind Labs that styles markup with composable class names and generates only the CSS a project uses

MITOpen sourceFreeLocalNov 2, 2026