Mermaid 流程图：把文档里的图画成代码

Mermaid 流程图把文档里的图画成代码【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid上周改完鉴权模块回头一看设计文档——三个月前手绘的时序图里还写着先查 Redis再查库而代码早改成直接走 JWT 了。要改图得打开画板软件、对齐箭头、再导一张 PNG 传回文档。这种文档即代码的反面是每个团队都熟到懒得抱怨的日常。Mermaid 的做法是把图也写成文本用类 Markdown 的语法描述流程图、时序图、状态图浏览器里解析成 SVG图表文件和代码一起进 Git文本生成图表从此是 diff 友好的一件事。三个场景先试它最好用的三面给新同事画一张谁调谁的图你要解决什么新人接你的服务问的第一个问题永远是这个接口进来之后到底绕了哪几个组件。PPT 里的架构图半年前就过时了而时序图Sequence Diagram就是谁先调谁、谁等谁回话的图是回答这个问题的最短路径。Mermaid 怎么接住几行文本就能声明参与者和消息-是发请求--是回话。改动一个组件改一行文本就行提交记录里还留着谁在什么时候改的。最小示例箭头方向就是调用顺序效果就是一张带生命线、消息顺序一目了然的时序图画完流程大概率下一步要交代一个东西从生到死会经历哪些状态而这个场景最常被产品问住。把状态流转讲给产品听你要解决什么评审会上产品追问用户点了取消订单现在算什么状态你掏出一段 if-else 截图双方都开始走神。Mermaid 怎么接住状态图State Diagram里每个圆角框是一个状态箭头上的文字是转移条件讲起来是已支付遇到退款申请就进退款中不是看第 47 行。最小示例菱形是判断节点黑点是起始排期会上贴一张会自己动的进度图你要解决什么甘特图最烦的不是画是延期之后满世界的日期要手改一遍。Mermaid 怎么接住任务用after表达依赖而不是写死日期上游一挪整条链自动重算再配excludes声明周末和节假日工期自己扣。最小示例红色竖线就是今天除了这三个Mermaid 还内置了二十几种图类图、饼图、ER 图画库表关系、Git 分支图、思维导图甚至 C4 架构图换行首关键字就能切换语法都遵循同一套文本进、SVG 出的路子。从零到第一张图整条链路其实就四步装包、写定义、初始化、拿 SVG。以 npm 为例CDN 引一个 esm 文件也能跑离线或想锁版本就用 npm先安装。当前 11.x 版本Node 20 以上即可npm install mermaid装完 node_modules 里多一个 mermaid 包接下来只需要浏览器环境能跑 ESM。在 HTML 里写图定义放进带mermaid类的prepre classmermaid sequenceDiagram 用户-网关: 登录请求 /pre初始化让 Mermaid 自动找页面上所有pre classmermaid并渲染import mermaid from mermaid; mermaid.initialize({ startOnLoad: true });刷新页面那张时序图就长出来了startOnLoad不想要的话也可以手动调mermaid.render拿回 SVG 字符串自己插进 DOM适合懒加载或按点击触发的场景。少踩坑的几条建议主题别都选 default。theme有 default、forest、dark、neutral 四个长时间盯着看的话 forest 或 neutral 更耐看配合themeVariables还能单独调节点底色和连线色。securityLevel 什么时候要动。默认strict最安全但节点的click回调会被禁掉想给图加跳转链接就设loose同时保证页面里的图内容来源可控——毕竟 loose 意味着图里的 HTML 会被执行。大图别硬画一张。节点超过四五十个之后布局开始打架拆成两张、各讲一段比一张巨图更清楚useMaxWidth保持 true 让图随容器缩放别让它撑爆页面。方向参数也值得记住一张速查参数效果TD从上往下默认方向LR从左往右时间线类图更顺眼BT从下往上RL从右往左学完之后往哪走语法拿不准时先去官方的 Mermaid Live Editor 里试左侧写代码、右侧即时预览URL 本身就能当作分享链接发给同事确认效果再贴回仓库。语法跑通后最省事的用法是直接把图写进 Markdown 的mermaid代码块——很多代码托管和文档平台会原生渲染等于零集成成本。想本地跑也可以仓库里自带一个离线编辑器packages/mermaid-local-editor/构建后双击 HTML 就能用。图种不够用时社区贡献流程写得很直白docs/community/new-diagram.md 讲了加新图种的套路packages/parser/ 里能看到每种图的语法解析是怎么定义的。顺带一提Mermaid 整个纯前端运行不依赖任何服务端所以你随时可以在 CI 里把.mmd文件批量转成 SVG 塞进文档站。回到开头那个改完代码才发现图对不上的下午在 Mermaid 里那张时序图只是仓库里又一个.mmd文件diff、评审、回滚全和代码一个待遇。文档跟着代码一起走这件事它做到了。【免费下载链接】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），仅供参考