74K star！像写 Markdown 一样画流程图，GitHub官方支持，太优雅了！

* 戳上方蓝字“开源先锋”关注我

项目简介

Mermaid 是一款基于 JavaScript 的图表绘制工具，它最牛掰的地方在于：我们可以用类似 Markdown 的简洁文本语法来定义图表，然后它就能生成各种复杂的图表，像流程图、时序图、甘特图、类图、状态图等等！没错，就是写几行代码，然后“唰”的一下，一个精美的图表就出现了。

目前在Github上收获了74K star！

性能特色

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

快速使用

最简单的使用方式就是直接用Mermaid的Live Editor啦！打开网址

https://mermaid-js.github.io/mermaid-live-editor

就可以开始愉快地画图啦。无需安装任何软件，随时随地都能用。

如果你想在Markdown文档里插入Mermaid图表，那就更简单了。只需要用代码块括起Mermaid内容，就像这样：

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

然后，无论是GitHub、GitLab还是其他支持Markdown的编辑器，都能自动渲染出漂亮的图表。

如果要在前端或Node.js项目中使用Mermaid，先安装它：

npm install mermaid

接着，在HTML文件中引入Mermaid：

这样，就能在项目中生成各种图表啦。

项目体验展示

给大家整了几个示例，感受一下 Mermaid 的魅力吧！

流程图

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

状态图

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

饼图

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

看到没？是不是超级简单又直观？

Mermaid 真的是一个宝藏项目啊！它不仅让图表绘制变得轻松简单，还能极大地提高我们的工作效率和文档质量。无论你是个人开发者还是团队成员，Mermaid 都是你不可或缺的好帮手。

更多细节功能，感兴趣的可以到项目地址查看：

项目地址：
https://github.com/mermaid-js/mermaid