Mermaid

Mermaid 是一款基于 JavaScript 的开源低代码绘图工具，用接近 Markdown 的轻量语法描述结构，再由渲染器把文字变成图形。写几行文本就能得到流程图、时序图、甘特图、饼图、类图、状态图等结果，不需要拖动图形素材，也不必专门去学绘图软件的操作。它常出现在技术文档、项目管理这类需要图文配合的场合，开发者与不太懂设计的普通用户都能较快上手。

• Mermaid 官网入口：https://mermaid.js.org/

覆盖的图表类型

• 流程图支持：用 graph 一类的关键字写出节点和连线，分支、循环、并行关系都能直接表达出来。
• 时序图支持：按参与者顺序排列消息往来，适合梳理接口调用、系统之间的交互过程。
• 甘特图排期：把任务名称、时间区间和先后依赖写进文本，项目进度一眼能看清。
• 扩展图形：饼图、类图、状态图、Git 分支图也在支持范围内，切换图形基本不用换工具。

接入与使用方式

• 在线编辑器：网页里直接敲语法，旁边实时预览，调整完就能导出图片带走。
• 文档嵌入：在 GitHub、GitLab、Typora、Notion、Obsidian 等支持 Mermaid 的环境里放一个语法块，打开文档即渲染。
• 命令行导出：借助 mmdc 这类 CLI 工具，把图表批量转成 SVG、PNG 或 PDF 文件。
• 接口调用：开发者可以通过 API 把渲染能力接进自己的应用里，按业务需要出图。

常见使用场景

• 技术文档：系统架构、流程说明这类内容配一张图，比堆长段落更容易读明白。
• 项目协作：用甘特图和流程图同步进度、任务安排，团队对齐的成本会低不少。
• 代码注释：在仓库里给复杂逻辑配张示意图，后来接手的人能少走弯路。
• 教学演示：语法门槛不高，讲结构、讲流程时可以现写现看，学生跟着改也方便。

把绘图这件事换成写文本，是这款开源低代码绘图工具最实在的地方：语法短、改动快、能跟着代码一起做版本管理。无论是日常写文档，还是团队里同步方案，用文本语法生成图表都比手工拖拽省事，值得在需要画图的场景里试一试。