Mermaid 图表实操指南：如何用代码 3 分钟画出流程图与架构图

Mermaid 图表实操指南：如何用代码 3 分钟画出流程图与架构图

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid

Mermaid 是一款把文本渲染成图表的开源工具：Mermaid 图表——流程图、时序图、甘特图，都用几行纯文本画出来，可以直接写进 Markdown 文档，天然支持版本管理与评审。

你的项目文档里的图，是怎么画的？

很多人的习惯是：画图工具里摆一摆，截图，粘进文档。问题在于截图会过期——接口改了，文档里的流程图还停在旧版本；评审时没人能对着一张图做 diff，更说不清图和代码是否还对得上。

排项目进度时痛点更具体：把排期导出成图片后，改一个任务的时长或依赖，整张图都得重画。

Mermaid 的思路是把「画」变成「写」：图以文本形式和代码放在同一个仓库里，改文本，图跟着变。上面这张甘特图，就是几行文本渲染出来的。

3 分钟画出第一张 Mermaid 流程图

一个最小的流程图只需要这 5 行：

graph TD A[开始写文档] --> B{图还准确?} B -->|是| C[直接提交] B -->|否| D[随代码更新图] D --> C

graph TD声明从上到下的布局；A[...]是矩形节点，B{...}是判断节点；-->|标签|是带文字标签的连线。生成效果是一张决策流程图，两个分支最后汇回同一个终点。

这套 Mermaid 流程图语法是基础，学会之后，剩下的只是换节点形状和连线样式。

Mermaid 图表还能画哪些类型？

按 语法参考 目录整理，目前覆盖 30 多种图，按用途可以归为四类：

此外还有铁路图（railroad）、报文图（packet）、Wardley 地图等更专门的图型，需要哪类就去文档目录里按名字找。

如何用 Mermaid 在线编辑器导出 PNG 与 SVG

不装本地环境也能玩：打开官方在线编辑器 mermaid.live，左侧是代码区，右侧是实时预览，旁边还有配置面板可以切换主题、调整布局参数，边输入边同步。

图定稿后，在编辑器的操作区你可以：

• 下载为 PNG 或 SVG；SVG 是矢量格式，任意缩放不糊，Mermaid 导出 SVG 更适合印刷和嵌入场景
• 把渲染好的图片直接复制进剪贴板，贴进幻灯片或聊天窗口
• 复制 Markdown 源码，粘到任何支持渲染的文档里

把 Mermaid 图表接进项目工作流

用熟之后，三个位置最值得放：

README 与文档：图直接写在 README.md 里，支持 Markdown 渲染的平台会自动画出来，不再需要截图。

CI/CD：在流水线里装@mermaid-js/mermaid-cli，用npx @mermaid-js/mermaid-cli把.mmd文件批量转成 PNG/SVG，每次合并自动归档一份架构图快照。

Issue 与 PR：正文里贴一段 mermaid 代码块，把「现状 → 目标」画清楚，评审的人可以对着图看 diff。

视觉风格上，Mermaid 内置 default、dark、forest、neutral 等主题，还可以用%%{init}%%指令覆盖主题变量，让全仓库文档风格统一：

%%{init: {'theme':'forest'}}%% graph TD A[任务甲] --> B[任务乙]

更细的配置项可以查 配置文档。

上手清单 🚀

• 选一条入口：在线编辑器快速出图、npm install mermaid集成进站点，或用命令行工具批量导出
• 通读一遍 快速入门，亲手跑一次流程图语法
• 画第一张图：挑文档里一张过期的静态截图，手工写一个 5 行版本
• 统一主题：用 init 指令设定一次，全仓库生效
• 接入流程：先在 README 放一张，再让 CI 自动生成

Mermaid 图表的本质，是把「画图」变成「写代码」——写完、预览、提交，三件事。更多图型语法与配置细节，可以翻 语法参考 和官方文档目录 docs/；编辑器插件与第三方集成则收录在社区生态中，新图型还在持续增加。

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid