Mermaid 文本画图本地 5 分钟跑起来几行文字画出第一张流程图【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid评审材料发出去有人反馈第二页的流程图怎么和上周的版本对不上——你点开文档一看图还是三个月前用图形软件拖出来的旧版而接口流程早就改了四次。想重画打开专业绘图工具、重新对齐方框和箭头、导出、替换、再等一轮评审。更麻烦的是这张图是二进制格式没法进 Git 参与版本管理改动全靠人肉同步。换个思路把图写成文字。Mermaid 就是这样一个基于文本的图表工具你在 Markdown 里写几行A -- B它就替你渲染出流程图、时序图、甘特图等 30 多种图。图和文档住在同一个文件里改图就是改文字版本、评审、提交全都顺了。5 分钟把 Mermaid 在本地跑起来不装什么重型软件四条命令的事。先确认 Node 环境接着装上包管理器然后拉代码、装依赖、开服务。一条命令确认 Node 版本# 检查 Node.js 与 pnpm 是否就位 node -v pnpm -v预期输出类似v20.x.x加上一行 pnpm 版本号。⚠️ 注意本项目是 pnpm 管理的 monorepopackage.json里写死了包管理器版本缺 pnpm 就先npm install -g pnpm不建议直接用 npm 装依赖。克隆仓库到本地# 把 Mermaid 源码拉到本机 git clone https://gitcode.com/GitHub_Trending/me/mermaid预期输出以Receiving objects: 100%收尾。网络慢属于正常现象换个网络环境或稍等片刻即可中途断了重新执行同一条命令会自动续传。安装依赖包# 进入项目目录并安装全部依赖 cd mermaid pnpm install预期输出若干包版本信息后安静结束。首次安装可能要等几分钟个别包需要本地编译看到进度条卡住别急让它跑完。启动开发服务器# 启动带热更新的开发服务 pnpm dev预期输出Dev server starting on http://localhost:9000。浏览器打开这个地址就能看到 Mermaid 开发页面改代码会自动重编译、页面自动刷新。⚠️ 注意默认端口是 9000被占用的话用MERMAID_DEV_PORT9001 pnpm dev换一个再启动。甘特图用文本定义的日期和依赖关系渲染出的项目排期横条长度即任务工期能力全景一张表看清 Mermaid 能画什么分组图表类型能干嘛流程与结构流程图 / 块图 / 树图审批流、模块依赖、目录层级交互时序图 / 用例图接口调用链、角色与功能关系数据与领域ER 图 / 类图 / C4数据库表结构、类关系、系统架构计划与跟踪甘特图 / 时间线 / Kanban排期、里程碑、任务看板版本Git 图分支、合并、提交轨迹洞察饼图 / 象限图 / 雷达图 / 思维导图占比、优先级矩阵、能力评估、知识梳理状态与路径状态图 / 状态迁移 / 泳道图状态机、流程分角色数据流Sankey / XY 图流量去向、任意坐标数据点流程图节点、菱形判断和分支连线都由文本一行行定义原理 30 秒文本到图形发生了什么你可以把 Mermaid 想象成一位速记翻译官分三步干活读懂你的文字每种图有专属解析器把文本拆成节点和连线的结构化数据安排站位布局引擎算出每个元素的坐标内置 dagre 分层布局还能切换 ELK 布局处理复杂图画出来按当前主题的颜色和字体生成 SVG直接嵌进网页或文档。所以改一个节点名字就是改一行文字后面两步全自动重跑——这就是它和二进制图片最大的区别。用户旅程图各阶段体验评分的起伏用文本一行行写出来动手玩起来三个由浅入深的小例子第一例把请假流程写成 8 行文字场景团队想给新同学看请假审批怎么走。效果一条带菱形判断的审批链路改审批人只需要改方括号里的字。第二例登录接口的时序图场景接口文档里要讲清楚登录时浏览器和服务之间发生了什么。效果请求用实线、响应用虚线每一步谁对谁说话一目了然。第三例发版日的甘特图场景周五下午要发版把当天任务排成表贴进通告。效果横条即时间轴crit和milestone把关键节点标红加星。时序图参与者从左到右排队消息箭头按发生顺序依次落下急救箱遇到这些报错直接抄答案现象页面提示Syntax error图不渲染。原因几乎总是标点问题——中文全角冒号、全角括号混进了代码。解法把图表文本里所有标点换成半角--这类箭头两侧只留 ASCII 字符。现象子图写法对了却整段解析失败。原因subgraph 名字 [标题]的方括号格式少写或写错位置。解法子图声明严格按subgraph id [显示标题]写标题带空格必须放方括号内。现象pnpm dev起不来端口报错。原因9000 端口已被其他服务占用。解法MERMAID_DEV_PORT9010 pnpm dev换端口重新启动。现象渲染出来的中文变成方框或字距异常。原因页面字体缺失或主题字体配置未加载。解法确认页面能加载系统中文字体浏览器缩放回 100%刷新即可。下一步去哪复杂大图的布局不顺眼给flowchart换 ELK 布局算法试试节点更整齐想把风格统一成深色或森林绿翻一下主题与配置项改一处全局生效图表要嵌进自己的网站或文档站看看 API 用法mermaid初始化后渲染任意文本。关键资源都在仓库里完整语法参考流程图、时序图、甘特图配置速查文档30 余种图表的可运行示例源码写对一行代码图就出来——先把你文档里最旧的那张图换成几行文字试试。【免费下载链接】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），仅供参考