Mermaid 图表实战手册3 行命令出图4 类场景直接抄【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid代码重构了三个月Wiki 里的架构图还是半年前的样子排期进展还在靠表格截图传。Mermaid 用类似 Markdown 的文本描述直接生成流程图、甘特图等各类图表图变成代码能 diff、能评审、能进版本库。一条命令跑通你的第一张图 最快的入口是在浏览器打开 Mermaid Live Editor左侧粘贴语法右侧实时出图画完可直接导出 PNG/SVG 或复制 Markdown 引用代码零环境配置。要集成进项目一条安装命令加一段渲染代码就够npm install mermaidimport mermaid from mermaid const { svg } await mermaid.render(d1, graph LR\n A[开始]--B[结束]) document.body.innerHTML svg图串可以内联也可以从 .mmd 文件读——从文件读后面图当代码管才有意义。第一张图到此就跑通了。语法骨架看懂这三块就够了任何一张 Mermaid 图都是三段式第一行声明图表类型graph TD、gantt、journey……中间主体描述元素与连线末尾可挂样式或配置。graph TD A[提交巡检单] -- B{通过验收?} B --|是| C[归档] B --|否| D[生成整改单]五行就是完整的最小单元。记住首行是类型、箭头是关系、括号定形状绝大多数图型的语法你都会推出来。按场景选图你要解决什么问题流程梳理流程图分支怎么写对齐分支、异常处理、谁接谁时用流程图。关键技巧判断节点放{}里结果写在线的标签上并行路径用串起来不用画两条线。graph TD S[每日巡检开始] -- P[检查设备状态] P -- Q{发现异常?} Q --|是| T[记录异常并拍照] T -- M{是否重大?} M --|重大| A[立即停机上报] M --|一般| B[列入维修清单] Q --|否| E[巡检记录签核]排期推进Mermaid 甘特图任务依赖写法给管理层看进度甘特图核心就三行dateFormat定日期格式section分组:id, 开始日期, 时长定义任务。后一个任务跟着前一个结束写after即可改工期不用动图。gantt title 门铃 v2.0 迭代排期 dateFormat YYYY-MM-DD section 开发 接口开发 :dev1, 2026-09-01, 10d 端侧重构 :dev2, after dev1, 8d section 验收 集成测试 :test1, 2026-09-15, 7d 灰度发布 :rel1, after test1, 5d架构沟通architecture-beta 画 Mermaid 架构图让外部人快速理解系统有几个盒子、怎么连的Mermaid 架构图比文字快。group分层service定义盒子箭头表达调用图标cloud、database、rack 等内置画出来直接像运维看板。architecture-beta group edge(rack)[边缘侧] service cam(camera)[摄像头] in edge service gw(router)[网关] in edge group cloud(cloud)[云端] service api(api)[接入 API] in cloud service store(database)[视频存储] in cloud cam -- api api -- store体验分析journey 图给环节打 1-10 分分析用户与产品的交互体验时journey 给每个环节打 1-10 分分数最低的环节就是最值得优化的体验断点。journey title 新员工入职第一周 section 报到前 设备到位: 4: HR section 第一天 环境搭建: 3: 新员工 代码库导读: 5: 导师 section 第三天 首个提交: 4: 新员工把图表装进团队工作流版本控制。图现在是 .mmd 文本文件改动一行 git diff 就能看到新人git log能追出某条箭头是谁、为什么改的图不再在 Wiki 里烂掉。PR 评审。图随代码进同一个 PR评审人看代码改动的同时就看到了图的变化渲染效果类似这样语法速查可翻 流程图语法文档其余图型在同目录下都有。文档同步。README 或内部文档里用 mermaid 围栏代码块直接嵌入文档站或 CI 批量渲染成 SVG代码分支一更新文档里的图跟着更新不用再手动传截图。进阶两招换皮肤与加交互 ✨换皮肤一行搞定mermaid.initialize({ startOnLoad: true, theme: forest })换成theme: dark就是暗色。想区分不同节点类型在主体里用classDef定义样式再用:::样式名挂到节点上。加交互多两步初始化时放开securityLevel: loose再在图里声明click语句浏览器里点节点即触发你定义的回调——静态图秒变内部运营面板。graph LR A[查看巡检详情] click A callback三个真实翻车现场节点文字变乱码。现象是A[报单(加急)]这类节点显示方框或文字消失。根因是 HTML 标签把、等特殊字符当标签解析了。修复配置里设htmlLabels: false或用反引号把文本包起来转义。布局突然错乱。子图到处飘、箭头指错节点多半不是语法问题而是节点 ID 撞名——两个同名节点会被自动合并成一个。全局搜索重命名重复 ID布局立刻恢复顺手在子图开头声明direction把布局意图写明。各台电脑渲染不一样。发出去的图在你机器上正常在同事机器上变形。根因是版本差异不同版本布局引擎行为会变。修复package.json 里锁定 mermaid 版本最终图交给 CI 统一渲染本地预览只用于草稿。从单干到团队一条推荐路径阶段做什么里程碑第 1 周在线编辑器画 3 张真图流程/甘特/时序产出第一批 .mmd 文件第 2-4 周Mermaid 集成进文档仓库提交时 CI 自动渲染 SVG图与代码同 PR 评审第 3 个月起固化团队主题、图命名与存放目录约定新人复制即用更多接入方式可看官方集成文档。打开编辑器敲下graph TD让下一张架构图从此和代码一起进版本库。【免费下载链接】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），仅供参考