Mermaid 是一个开源的图表工具用类似 Markdown 的文本写出节点和连线就能渲染成图。它能画流程图、时序图、甘特图等改图就是改几行字适合经常写文档、记笔记的人。是什么用文字描述图Mermaid 官方文档介绍它是基于 JavaScript 的图表工具能把类似 Markdown 的文本渲染成图。开源项目采用 MIT 许可证代码公开在 GitHub 上。官方有在线编辑器 Mermaid Live Editor边写代码边看效果。和拖拽画图相比Mermaid 的图就是一段文本可以复制可以跟着文档一起保存和修改节点位置由它自动排好。它适合常写技术文档、用 Markdown 记笔记、流程经常要改的人如果每个节点的位置都要精确摆放拖拽类工具会更顺手。常见图类型不止流程图除了流程图Mermaid 官方文档还列出了时序图、类图、状态图、ER 图、甘特图、思维导图、时间线等多种图。每种图的代码第一行要写声明关键字告诉 Mermaid 画的是哪一种。下表是常用的几种图类型第一行关键字常用来画流程图flowchart业务流程、审批流时序图sequenceDiagram登录、支付等系统交互类图classDiagram面向对象设计状态图stateDiagram-v2订单、工单的状态流转ER 图erDiagram数据库表之间的关系甘特图gantt项目排期思维导图mindmap梳理思路、读书笔记用户旅程图journey用户体验的各个阶段在哪能显示常见5处GitHub、GitLab 等代码平台和部分 Markdown 编辑器都能把 Mermaid 代码块直接显示成图。Mermaid Live Editor官方在线编辑器可导出 PNG、SVG。GitLabMarkdown 里的 mermaid 代码块会渲染官方文档写明支持 Mermaid 11。GitHubIssue、Discussion、PR、Wiki 和 Markdown 文件里标注为 mermaid 的代码块会显示成图。Typora在偏好设置的 Markdown 选项里开启图表功能后可以显示。VS Code安装「Markdown Preview Mermaid Support」扩展后内置的 Markdown 预览就能显示 Mermaid 图。各平台内置的 Mermaid 版本不同新语法在旧版本里可能显示不出来。GitHub 文档建议先确认当前使用的 Mermaid 版本方法是在 mermaid 代码块里写 info。可以直接运行的示例下面是一个请假审批流程的示例示例为虚构复制到 Mermaid Live Editor 里就能看到图。第一行 flowchart TD 表示从上到下画方括号是步骤花括号是判断圆括号套方括号是开始和结束。箭头写作 --两条竖线之间是连线上的文字节点前的字母只用来连线。同意不同意是否提交请假申请主管是否同意是否超过3天申请被驳回部门负责人审批人事登记流程结束照着改的时候注意两点节点文字里有圆括号或双引号时把整段文字放进英文双引号如 A[“提交(草稿)”]括号、箭头、冒号都用英文半角符号。总结Mermaid 把画图变成写文字第一行声明图类型下面逐行写节点和连线。先在在线编辑器里把示例跑通再换成自己的流程。互动问题你写文档时常用哪种图想看哪种图的 Mermaid 写法