ConfigsApr 12, 2026·1 min read

Mermaid — Generate Diagrams from Text Like Markdown

Mermaid is a JavaScript-based diagramming tool that renders Markdown-inspired text definitions to create diagrams and visualizations. Flowcharts, sequence diagrams, Gantt charts, class diagrams, ER diagrams, and more — all from plain text. Natively supported in GitHub Markdown.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

In GitHub Markdown (natively supported):

```mermaid
flowchart TD
    A[User visits site] --> B{Logged in?}
    B -->|Yes| C[Dashboard]
    B -->|No| D[Login page]
    D --> E[Enter credentials]
    E --> B
```

Programmatic usage:

npm i mermaid
<script type="module">
  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
  mermaid.initialize({ startOnLoad: true, theme: "dark" });
</script>

<pre class="mermaid">
sequenceDiagram
    Client->>API: POST /login
    API->>DB: SELECT user
    DB-->>API: user record
    API-->>Client: JWT token
</pre>

CLI rendering:

npm i -g @mermaid-js/mermaid-cli
mmdc -i input.mmd -o output.svg -t dark
mmdc -i input.mmd -o output.png -w 1200
Intro

Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. Created by Knut Sveidqvist. Natively supported in GitHub Markdown, GitLab, Notion, Obsidian, Docusaurus, and many other platforms. Lets developers create documentation diagrams without Figma or draw.io.

What Mermaid Does

  • Flowcharts — TD, LR, RL, BT directions
  • Sequence diagrams — actor interactions with arrows
  • Class diagrams — UML-style
  • State diagrams — state machine flows
  • ER diagrams — entity-relationship
  • Gantt charts — project timelines
  • Pie charts — data distribution
  • Git graphs — branch visualization
  • Mindmaps — hierarchical thinking
  • Timeline — chronological events
  • Quadrant charts — 2x2 matrices
  • Block diagrams — architecture views

Architecture

Pure JavaScript/TypeScript library. Parses Mermaid syntax → builds internal graph → renders to SVG via dagre (layout algorithm) and D3 (rendering). Can run in browser, Node.js, or CLI.

Self-Hosting

Client-side library, no backend.

Key Features

  • 15+ diagram types
  • GitHub Markdown native
  • Dark and light themes
  • CLI for CI/CD rendering
  • Customizable via directives
  • Live editor (mermaid.live)
  • Plugin for Docusaurus, Obsidian, Notion
  • SVG and PNG export
  • Accessible (ARIA labels)

Comparison

Tool Input Types Integration
Mermaid Text 15+ GitHub, GitLab, Notion
PlantUML Text 15+ Java-based
draw.io GUI Any Web, desktop
Excalidraw GUI Freeform Web
D2 Text 10+ CLI

常见问题 FAQ

Q: GitHub 里怎么用？ A: 直接在 Markdown 文件中写 ````mermaid` 代码块，GitHub 自动渲染。无需安装任何东西。

Q: 和 PlantUML 比？ A: Mermaid 纯 JS（浏览器原生），PlantUML 需要 Java 后端。Mermaid 语法更简洁，PlantUML 功能更完整（活动图更强）。

Q: 能定制样式吗？ A: 可以。用 %%{init: {"theme": "forest"}}%% 或 CSS class 绑定。也支持完全自定义 theme JSON。

来源与致谢 Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Jupyter Notebook — Interactive Computing Environment for Data Science

Jupyter Notebook is the original interactive computing environment where you can combine live code, equations, visualizations, and narrative text in a single document. It supports 40+ languages and is the standard tool for data exploration, teaching, and research.

AI Open Source

NumPy — The Fundamental Package for Scientific Computing

NumPy is the foundation of the Python scientific computing ecosystem. It provides high-performance multidimensional arrays, mathematical functions, linear algebra, random number generation, and Fourier transforms — powering pandas, scikit-learn, TensorFlow, and more.

AI Open Source

Streamlit — Build Data Apps in Pure Python in Minutes

Streamlit is the fastest way to build and share data applications. Write a Python script with Streamlit commands and get an interactive web app with widgets, charts, and real-time updates — no frontend experience needed.

AI Open Source
◈Home🔍Search👤Me