Mermaid

Mermaid简介

Mermaid 是一款基于 JavaScript 的开源低代码绘图工具，用接近 Markdown 的轻量文本语法描述图形，再渲染成流程图、时序图、甘特图、饼状图、序列图、类图、状态图等。它把注意力从拖拽排版拉回到文字本身，改动几行语法就能同步更新整张图，适合需要反复调整结构的技术写作与团队协作。

• Mermaid官网：https://mermaid.js.org/
• 在线编辑器：https://mermaid.live/
• 开源项目地址：https://github.com/mermaid-js/mermaid
• 在线编辑器中文网站：https://mermaid.nodejs.cn/（非官方中文版，页面有弹窗广告，可配合广告拦截工具使用）

支持的图表类型

• 流程图：用 graph 语法描述节点与连线，适合梳理业务流程、系统模块之间的调用关系。
• 时序图：以 sequenceDiagram 表达参与者之间的消息往来，常用于接口交互过程说明。
• 甘特图：通过 gantt 语法排列任务与时间跨度，项目排期和进度一目了然。
• 其他图形：饼状图、类图、状态图同样由文本定义生成，覆盖多数常规制图需求。

使用方式

• 在线编辑：打开 Mermaid Live Editor，左侧写语法、右侧即时预览，不需要配置本地环境。
• Markdown 集成：在 GitHub、GitLab、Typora、Notion、Obsidian 等支持该语法的编辑器中直接嵌入代码块即可渲染。
• 命令行导出：借助 mmdc 等 CLI 工具，把图表输出为 SVG、PNG 或 PDF 文件供文档引用。
• 接口调用：开发者可通过 API 把渲染能力接入自建应用或文档系统。

适用场景

• 技术文档：为系统架构、开发流程配图，图形与正文一起进入版本管理，修改记录可追溯。
• 团队协作：图表以纯文本保存，方便多人评审、比对差异并合并改动。
• 项目排期：用甘特图和流程图呈现任务安排、里程碑与依赖关系。
• 教学入门：语法门槛低，适合课堂演示，也方便初学者练习图表绘制思路。

如果日常要画流程、写技术文档，又不想在绘图软件里反复对齐线条和调整箭头，Mermaid 这种文本驱动的做法会省下不少时间。建议先从在线编辑器写一段简单语法熟悉手感，再嵌入常用的 Markdown 工具中，基本就能应付大部分制图需求。