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 --> Cgraph TD声明从上到下的布局；A[...]是矩形节点，B{...}是判断节点；-->|标签|是带文字标签的连线。生成效果是一张决策流程图，两个分支最后汇回同一个终点。
这套 Mermaid 流程图语法是基础，学会之后，剩下的只是换节点形状和连线样式。
Mermaid 图表还能画哪些类型？
按 语法参考 目录整理，目前覆盖 30 多种图，按用途可以归为四类：
| 用途 | 典型图型 | 适合场景 |
|---|---|---|
| 流程与叙事 | 流程图、block 图、timeline、用户旅程 | 文档撰写、会议演示 |
| 系统设计 | 时序图、类图、ER 图、C4、架构图、状态图 | 接口设计、数据库建模、系统拆分 |
| 项目与协作 | 甘特图、Git 图、看板、需求图 | 排期管理、版本追溯、需求跟踪 |
| 数据与分析 | 饼图、XY 图、雷达图、桑基图、象限图、韦恩图、思维导图 | 数据展示、方案对比 |
此外还有铁路图（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
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
