本文转载自：968T 工具箱，原文链接：https://968t.com/articles/mermaid-guide/

Mermaid 是一个基于 JavaScript 的图表绘制工具，它允许用户使用类似于 Markdown 的轻量级语法来生成各种类型的图表和可视化内容。通过 Mermaid，你可以将图表作为代码进行管理，轻松实现版本控制和协作。

想要立即尝试编写 Mermaid 图表吗？欢迎使用我们的 在线 Mermaid 编辑器，它提供实时预览功能，助你快速上手。

1. 流程图 (Flowchart)

流程图是 Mermaid 最常用的功能之一，用于展示过程、系统或算法的步骤。

1.1 基本方向

你可以指定图表的方向：

• TB - Top to Bottom (从上到下)
• BT - Bottom to Top (从下到上)
• RL - Right to Left (从右到左)
• LR - Left to Right (从左到右)

代码：

graph TD
    A[开始] --> B{是否成功?}
    B -- 是 --> C[结束]
    B -- 否 --> D[重试]
    D --> B

预览：

1.2 节点形状

• [矩形]
• (圆角矩形)
• ([体育场形])
• [[子程序]]
• [(圆柱体)]
• ((圆形))
• {{六边形}}
• [/平行四边形/]
• [\反平行四边形\]

1.3 连接线

• --> 带箭头实线
• --- 不带箭头实线
• -.-> 虚线箭头
• ==> 加粗箭头

2. 时序图 (Sequence Diagram)

时序图用于展示对象之间交互的时间顺序。

代码：

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I am good thanks!
    Alice-)Bob: 异步消息

预览：

2.1 参与者

你可以使用 participant 或 actor 关键字定义参与者，并通过 as 设置别名。

2.2 消息类型

• -> 无箭头实线
• --> 无箭头虚线
• ->> 有箭头实线
• -->> 有箭头虚线
• -x 末端带叉实线
• --x 末端带叉虚线

3. 甘特图 (Gantt Chart)

甘特图用于展示项目进度和时间安排。

代码：

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :a1, 2026-01-01, 3d
    UI设计             :after a1, 5d
    section 开发阶段
    前端开发           :2026-01-10, 10d
    后端开发           :2026-01-10, 12d

预览：

4. 类图 (Class Diagram)

类图用于描述系统中的类及其相互关系，常用于面向对象编程的设计。

代码：

classDiagram
    class Animal {
        +String name
        +eat()
        +sleep()
    }
    class Duck {
        +swim()
    }
    Animal <|-- Duck

预览：

4.1 关系

• <|-- 继承
• *-- 组合
• o-- 聚合
• --> 关联
• ..> 依赖

5. 状态图 (State Diagram)

状态图用于描述系统状态的变化。

代码：

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

预览：

6. 饼图 (Pie Chart)

用于展示数据的比例分布。

代码：

pie title 浏览器市场份额
    "Chrome" : 65
    "Safari" : 20
    "Firefox" : 10
    "Edge" : 5

预览：

7. Git 图 (Git Graph)

用于模拟 Git 分支和提交历史。

代码：

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit

预览：

总结

Mermaid 提供了一种极其高效的方式来创建和维护技术文档中的图表。通过简单的文本描述，你可以专注于内容逻辑，而无需在排版和绘图工具上浪费时间。

别忘了，你可以随时在我们的 在线 Mermaid 编辑器 中练习这些语法，实时查看渲染效果！