78k star，像写 Markdown 一样画流程图，这个开源工具太牛了！

在技术文档中插入一张流程图需要多久？传统方式可能需要30分钟调整Visio图形，而现在通过Mermaid，只需3分钟编写类Markdown文本即可完成。这个拥有78.4k GitHub星标的开源项目，正在颠覆技术文档的创作方式。

简介

Mermaid 是一款基于 JavaScript 的图表和制图工具，它使用 Markdown 风格的文本定义和渲染器来创建和修改复杂的图表。Mermaid 的主要目的是帮助文档跟上开发的步伐。

以下是 Mermaid 支持的一些主要图表类型：

• 流程图 (Flowchart)
• 序列图 (Sequence Diagram)
• 类图 (Class Diagram)
• 状态图 (State Diagram)
• 实体关系图 (Entity Relationship Diagram, ERD)
• 甘特图 (Gantt Diagram)
• 饼图 (Pie Chart)
• 用户旅程图 (User Journey Diagram)
• Git 图 (Git Graph)
• 需求图 (Requirement Diagram)

优势

• 与文档集成： Mermaid 完美支持 Markdown 语法，你可以直接在 Markdown 文件中嵌入图表代码，文档和图表一体化。
• 版本管理： 因为图表是用文本定义的，所以可以直接纳入版本控制系统，方便团队协作和修改。
• 学习成本低： 就算你不是程序员，也能快速上手 Mermaid。它的语法简单易懂，就像和朋友聊天一样自然。
• 丰富多样的图表类型： 流程图、时序图、甘特图、类图、状态图……只要你能想到的图表类型，Mermaid 几乎都能帮你搞定！
• 实时预览与在线编辑： Mermaid提供了一个在线的Live Editor，你可以直接在浏览器里编写和预览图表代码。这样就能实时看到图表的变化，调整起来超方便。而且，Live Editor还有自动补全和语法提示的功能，新手也能快速上手。

快速开始

浏览器端集成

<div class="mermaid">
 graph LR
    A[需求评审] --> B(技术设计)
    B --> C{复杂度评估}
    C -->|高| D[拆分任务]
    C -->|低| E[直接开发]
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.0.0/dist/mermaid.min.js"></script>

VS Code深度集成

安装Mermaid插件后支持：

• 实时预览渲染效果
• 导出PNG/SVG/PDF
• 语法智能提示

示例

流程图

文档

flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

实时编辑器

序列图

文档

sequenceDiagram
Alice->>John: Hello John, how are you?
loop HealthCheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

实时编辑器

甘特图

文档

gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

实时编辑器

类图

文档

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

实时编辑器

饼图

文档

pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15

实时编辑器

Mermaid 不仅让图表绘制变得轻松简单，还能极大地提高我们的工作效率和文档质量，让我们用类似 Markdown 的简洁文本语法来定义图表，极大提高程序员绘图能力。

Git图

文档

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

1

用户体验旅程图

文档

  journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me

实时编辑器

开源地址

https://github.com/mermaid-js/mermaid

https://mermaid.live/edit