* 戳上方蓝字“开源先锋”关注我
推荐阅读：
《25.3K star！搞定VSCode所有插件，就是这么舒适！》
《14K star！开源文献翻译神器，可完整保留排版，爽的不行！》
《14.5K star！一款开源的工作流编排调度项目，无限可扩展！！》
《27.5K star！无需GPU本地轻松运行AI模型，超推荐！》
《33.1K star！又来一款币圈交易开源项目，助你追上2025年行情！》
大家好，我是开源君！
你有没有在写文档或者做项目汇报的时候，被那些复杂的图表弄得头大？传统绘图工具要么操作复杂，要么和文档集成困难，简直能把人逼疯！
今天小林君要给大家安利一个超级酷炫的开源项目 - Mermaid，简直就是程序员和文档编写者的福音啊！！
项目简介
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：
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
这样，就能在项目中生成各种图表啦。
项目体验展示
给大家整了几个示例，感受一下 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
