Introduction

Mermaid 是一个基于 JavaScript 的开源图表生成工具，它允许您使用简单的文本语法创建各种图表，并自动渲染成可视化图形。主要特点包括：

文本定义图表：用类似 Markdown 的语法编写图表
自动布局：无需手动调整元素位置
多图表支持：支持类图、流程图、时序图、甘特图等
跨平台：可在各种支持 JavaScript 的环境中使用

pie
    title Mermaid 图表类型占比
    "流程图" : 35
    "类图" : 25
    "时序图" : 20
    "其他" : 20

How to generate diagram

这种语法之所以能生成图表，是因为：

文本解析：Mermaid 解析器（基于 ANTLR 或自定义解析器）将文本转换为抽象语法树（AST）
布局计算：自动计算节点位置和连线路径(Dagre 等图形布局库)

SVG渲染：最终输出为可缩放矢量图形

flowchart TB
 A[Mermaid代码] --> B[解析器]
 B --> C[抽象语法树\nAST]
 C --> D[布局引擎]
 D --> E[SVG生成]
 E --> F[HTML渲染]

核心图表类型

| 图表类型 | 语法示例 | 用途 | | | ——- | —————————– | —— | —– | | 流程图 | graph TD; A-->B | 展示流程步骤 | | | 类图 | classDiagram; A < | -- B | 展示类关系 | | 时序图 | sequenceDiagram; A->>B: 消息 | 展示交互时序 | | | 甘特图 | gantt; section 任务 | 项目管理 | | | 饼图 | pie; "A": 30 | 比例分布 | | | 状态图 | stateDiagram; [*] --> State | 状态转换 | |

How to use

Flowchart

graph LR
    A[开始] --> B{条件}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
    C --> 数据库
    D --> 数据库

例子

---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]

---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]

Direction

define direction of the Flowchart.

TB - Top to bottom
TD - Top-down/ same as top to bottom
BT - Bottom to top
RL - Right to left

LR - Left to right

flowchart TD
  Start --hello --> Stop

flowchart TD
  Start --hello --> Stop

flowchart LR
  Start --> Stop

flowchart LR
  Start --> Stop

Text

Use double quotes and backticks “ text ” to enclose the markdown text. Use " to enclose the unicode text.

---
config:
flowchart:
  htmlLabels: false
---
flowchart LR
  markdown["`This **is** _Markdown_`"]
  newLines["`Line1
  Line 2
  Line 3`"]
  id["This ❤ Unicode"]
  markdown --> newLines
  newLines --> id

---
config:
flowchart:
  htmlLabels: false
---
flowchart LR
  markdown["`This **is** _Markdown_`"]
  newLines["`Line1
  Line 2
  Line 3`"]
  id["This ❤ Unicode"]
  markdown --> newLines
  newLines --> id

Sequence Diagram

Class Diagram

classDiagram
  Animal <|-- Duck
  Animal <|-- Cat
  Animal : +int age
  Animal : +String name
  Animal : +eat()```
Sequence diagram
```mermaid
sequenceDiagram
  Alice->>John: 你好！
  John-->>Alice: 你好吗？
  Alice->>John: 很好！

State Diagram

ERD Diagram

Gantt

Pie Chart

Mindmaps

网页中集成

// 在网页中集成
import mermaid from 'mermaid';

mermaid.initialize({
  startOnLoad: true,
  theme: 'default',
  flowchart: { useMaxWidth: false }
});

// 手动渲染特定元素
mermaid.init(undefined, '.mermaid');

Editors

Mermaid 编辑器列表（Web/桌面端对比）

| 工具名称 | 运行平台 | 特点 | 支持功能 | 是否免费 | 链接 | | ———————– | —— | —————— | ——— | —– | ———————————————————————————- | | Mermaid Live Editor | Web | 官方在线版，实时渲染 | 基础图表 | 是 | 访问 | | Mermaid Chart | Web | 增强版在线编辑器，AI生成 | 协作、版本控制 | 免费+付费 | 访问 | | VS Code + Mermaid插件 | 桌面 | 代码编辑器集成，Markdown预览 | 全功能支持 | 是 | 插件 | | Obsidian | 桌面 | 本地笔记软件内置支持 | 实时预览+导出 | 是 | 官网 | | Typora | 桌面 | 简洁Markdown编辑器 | 导出为图片/PDF | 付费 | 官网 | | GitLab/GitHub | Web | 原生支持渲染Mermaid代码块 | 仅查看（无编辑） | 是 | - | | Mermaid CLI | 桌面 | 命令行工具，批量生成图表 | 自动化渲染 | 是 | 文档 | | JupyterLab | 桌面/Web | 数据科学笔记本集成 | 交互式图表 | 是 | 插件 |

文本驱动图表工具

在线Web图表工具

免费 Web 绘图工具对比表

关键对比维度

设计风格
- 手绘风：Excalidraw > tldraw > draw.io
- 专业风：draw.io > Miro > Excalidraw
协作功能
- 实时协作：Miro > Excalidraw ≈ draw.io
- 隐私性：Diagrams.net > Excalidraw > Miro
技术集成
- 支持Mermaid：draw.io（需手动粘贴代码）
- 开发者友好：Excalidraw（开源可自托管）
导出格式
- 通用性：均支持 PNG/SVG，draw.io 额外支持 PDF/VSDX
  推荐选择
画技术草图/原型 → Excalidraw
专业架构图/UML → draw.io
团队协作白板 → Miro（免费版）
- 注意：免费版最多 3 个可编辑面板
隐私优先需求 → Diagrams.net
访问链接
- Excalidraw
- draw.io
- tldraw
- Miro
  Reference
  
  mermaid tutorial Mermaid playground # Mermaid Cheat Sheet mermaid github source code

Mermaid Tutorial