Mermaid 流程图实战3 步把文档图表搬进 Git【免费下载链接】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 流程图语法描述结构预览工具直接渲染成图代码与图存在同一个仓库。这篇 15 分钟讲完从画第一张图到把它用进日常工作。 三分钟上手如何用 Mermaid 画流程图跟着做3 步跑通。第一步在任意支持 Mermaid 的 Markdown 编辑器里开一个mermaid graph TD A[需求评审] -- B{方案通过?} B --|是| C[进入开发] B --|否| D[重新讨论] D -- A第三步看预览方框和箭头按描述连好就算成功。把 TD 改成 LR图从竖排变横排想加节点照抄一行改文字即可。 ## 能力速览Mermaid 支持哪 6 种图 一张表说清选型 | 类型 | 适合什么 | | --- | --- | | 流程图 | 审批流、故障处理、决策分支 | | 序列图 | 接口调用链、服务间交互 | | 甘特图 | 项目排期、里程碑跟踪 | | 类图 | 对象模型、继承与依赖关系 | | 状态图 | 订单状态机、生命周期 | | ER 图 | 数据库表结构、实体关系 | 各图类型共用一套语法风格声明节点声明连线完事。细节可查[官方语法文档](https://link.gitcode.com/i/cf40c5456a207bd378e57147736258b9)。 ## 按角色分场景把 Mermaid 用进日常工作 每张图对应一类人挑你那份看。 ### 给写技术文档的人 接口怎么调、参数怎么传口头说不清时贴一张序列图。文本改动后图跟着变评审时直接看 diff比换一张截图好沟通。 [](https://link.gitcode.com/i/ae912f006560c12174cfda72953c2c0a) *序列图展示交互时序* ### 给排项目计划的人 任务依赖、开始日期、负责人全写在文本里甘特图自动排好时间轴。调整工期就是改一行日期不用在日历上拖格子。 [](https://link.gitcode.com/i/ae912f006560c12174cfda72953c2c0a) *甘特图展示排期与依赖* ### 给做代码审查的人 新人看类图先建立模型认知评审时拿它对照代码结构漂移一眼可见。类图和代码放同一仓库改哪边另一边都看得见。 [](https://link.gitcode.com/i/ae912f006560c12174cfda72953c2c0a) *类图展示继承与职责* ## ️ 踩坑速查渲染出错先看这里 报错别慌对号入座。 - 图不渲染 → 确认代码块标记是 mermaid不是 text - 报错说不清 → 先查中文标点、没闭合的括号和方括号 - 图太宽溢出 → 节点标签写短或把 TD 改成 LR - 风格跟文档不搭 → 初始化里设置 theme 为 forest 或 dark - 节点重叠 → 调大 flowchart 的 nodeSpacing 与 rankSpacing 挑你最常画的那张图今晚就改成文本。第一版丑没关系图先进仓库跟着文档一起迭代才是关键。【免费下载链接】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），仅供参考