应用介绍
文档里那张流程图,当初拖框对齐花了半小时。三个月后要加一个判断分支,得先翻出源文件——存在哪个网盘早忘了,找不到就干脆不改,于是文档和代码越走越远,图还挂在那儿骗人。
Mermaid 换了个路子:图用文本写。几行像 A --> B 这样的声明,渲染出来就是一张流程图,节点怎么排、线怎么绕由布局引擎负责,你只描述关系。代码在哪儿,图就在哪儿——写进 Markdown 的围栏代码块,跟着仓库一起进版本控制,改了哪条边在 diff 里一目了然。GitHub、GitLab、Notion、Obsidian、VS Code 都原生渲染 mermaid 代码块,不用装插件。MIT 许可证。
二十多种图表:流程图、时序图、类图、状态图、ER 图、用户旅程、甘特图、饼图、象限图、需求图、Git 提交图、思维导图、时间线、桑基图、XY 图、看板、架构图、C4、雷达图、树状图、包图。每种都有自己的一套语法,但都是同一个心智模型:先声明节点,再声明关系。
写在 Markdown 里就渲染:标了 mermaid 的围栏代码块,在 GitHub 的 README、Issue 和 PR 描述里会直接渲染成图。评审时不用再点开某个外链图床,也不会出现图早就改了、图床还是旧版的情况。
在线编辑器:mermaid.live 左边写代码右边实时出图,不用注册,改一个字符右边立刻重排。生成的分享链接把整张图编码进 URL,发给同事就能打开继续改,不需要上传任何文件。
主题和样式配置:内置浅色、森林、深色、中性四套主题,配色、字体、连线曲率、节点间距都能覆盖。深色主题跟着文档站的暗色模式走,不会出现白底图糊在黑底页面上那种割裂感。
嵌进自己的页面:引一个 JS 包,初始化之后页面上所有标了 mermaid 的元素自动渲染;也可以调用渲染接口拿到 SVG 字符串,自己决定往哪儿放、要不要后处理。
纯文本,天然适合版本控制:图是代码,能 diff、能 review、能 merge,不用往仓库里塞二进制图片。谁在哪次提交里加了哪个节点,git blame 直接看得出来。
命令行批量出图:官方 CLI 把 mmd 文件转成 SVG、PNG 或 PDF。放进 CI 里,文档图就能跟着代码自动重新生成,不会出现代码改了图还是半年前那版的情况。
Mermaid 换了个路子:图用文本写。几行像 A --> B 这样的声明,渲染出来就是一张流程图,节点怎么排、线怎么绕由布局引擎负责,你只描述关系。代码在哪儿,图就在哪儿——写进 Markdown 的围栏代码块,跟着仓库一起进版本控制,改了哪条边在 diff 里一目了然。GitHub、GitLab、Notion、Obsidian、VS Code 都原生渲染 mermaid 代码块,不用装插件。MIT 许可证。
软件功能
二十多种图表:流程图、时序图、类图、状态图、ER 图、用户旅程、甘特图、饼图、象限图、需求图、Git 提交图、思维导图、时间线、桑基图、XY 图、看板、架构图、C4、雷达图、树状图、包图。每种都有自己的一套语法,但都是同一个心智模型:先声明节点,再声明关系。
写在 Markdown 里就渲染:标了 mermaid 的围栏代码块,在 GitHub 的 README、Issue 和 PR 描述里会直接渲染成图。评审时不用再点开某个外链图床,也不会出现图早就改了、图床还是旧版的情况。
在线编辑器:mermaid.live 左边写代码右边实时出图,不用注册,改一个字符右边立刻重排。生成的分享链接把整张图编码进 URL,发给同事就能打开继续改,不需要上传任何文件。
主题和样式配置:内置浅色、森林、深色、中性四套主题,配色、字体、连线曲率、节点间距都能覆盖。深色主题跟着文档站的暗色模式走,不会出现白底图糊在黑底页面上那种割裂感。
嵌进自己的页面:引一个 JS 包,初始化之后页面上所有标了 mermaid 的元素自动渲染;也可以调用渲染接口拿到 SVG 字符串,自己决定往哪儿放、要不要后处理。
纯文本,天然适合版本控制:图是代码,能 diff、能 review、能 merge,不用往仓库里塞二进制图片。谁在哪次提交里加了哪个节点,git blame 直接看得出来。
命令行批量出图:官方 CLI 把 mmd 文件转成 SVG、PNG 或 PDF。放进 CI 里,文档图就能跟着代码自动重新生成,不会出现代码改了图还是半年前那版的情况。
