Mermaid
定义
Mermaid 是一个以文本定义图表的绘制与制图工具，本身是一套 JavaScript 库：用户在编辑器里写下类 Markdown 的图表描述，库中的解析器读取这些文本，再由渲染器输出成图形[3][4]。它与鼠标拖拽式绘图软件的区别在于，图的节点和连线都以字符表达，同一段文本可以反复渲染、比较和修改[5]。
这一做法通常称为图表即代码(daC)，即把图表当作代码资产来管理。由于图表以纯文本保存，它可以进入 Git 等版本控制系统，与需求文档、源代码一起参与差异比对和代码评审；官方把这一目标概括为解决文档滞后于开发的“文档腐化”问题[3][1]。
原理
Mermaid 的处理流程分为解析、布局与渲染三个阶段：先由解析器按图表类型读取文本定义，构建出节点与边的结构；再计算图形布局，决定各元素的坐标与连线走向；最后输出为 SVG 矢量图形嵌入页面[6][3]。项目早期在致谢中说明，图形布局与绘图能力借助了 d3 与 dagre-d3 这两个库[7]。
在网页中使用时，页面引入 Mermaid 脚本并调用初始化方法，解析器随后查找带 mermaid 类名的 div 或 pre 标签，把标签内的文本定义转换成 SVG 图表[3]。语法方面，图表定义的首行给出图表类型，例如 flowchart 表示流程图、sequenceDiagram 表示时序图、gantt 表示甘特图；节点标识符用于连线，标识符后的方括号内容作为显示标签[3]。下面的流程图示意文本定义到成图的路径：
$\text{文本定义} \rightarrow \text{语法解析} \rightarrow \text{布局计算} \rightarrow \text{SVG 渲染} \rightarrow \text{文档或网页}$[6]
图表类型数量随版本增长。官方仓库列出流程图、时序图、类图、状态图、实体关系图、甘特图、饼图、Git 图、思维导图、时间轴、桑基图等 20 余种类型[4]；部分图类型在不同宿主环境中支持程度不一致，例如 Git 图在官方示例中长期标注为实验特性[8]。样式可通过主题、颜色、字体和布局方向等配置调整[4]。
发展历程
项目由瑞典软件架构师 Knut Sveidqvist 于 2014 年发起，代码仓库的版权声明与软件元数据均将起始年份记为 2014 年[9]。据其自述，动因来自一次丢失 Visio 绘图文件的经历，因此转向以文本为中心的方案；项目名称则取自当时孩子正在观看的《小美人鱼》[1]。
此后项目以 MIT 许可证开源，主要源码用 TypeScript 与 JavaScript 编写，可在不同操作系统上运行[1]。2019 年，Mermaid 获得 JS 开源奖中“最具技术趣味性的应用”类别的奖项[3][1]。2021 年，介绍其用法的专著《The Official Guide to Mermaid.js》出版[1]。
2022 年，Sveidqvist 参与创办 Mermaid Chart 公司，在开源库之外提供托管编辑与企业功能，形成开源核心加商业服务的模式[1]。2024 年 3 月，该商业实体获得 750 万美元种子轮融资，投资方包括 Open Core Ventures、红杉以及微软的 M12 基金[1]。到 2025 年初，开源仓库在代码托管平台上的收藏数超过 7.4 万[1]。
安全缺陷也在持续修补。公开漏洞库 CVE-2026-41149 记录，10.9.5 及更早版本、11.0.0-alpha.1 至 11.14.0 版本在默认配置下存在 HTML 注入问题，源自状态图中 classDef 指令的清理不严，可突破 SVG 上下文，但因脚本标签被剥离而未构成跨站脚本攻击；该问题在 10.9.6 与 11.15.0 中修复[10][11]。
应用
Mermaid 最常见的用途是软件与系统文档。开发者在 Markdown 文件、README 或知识库中写下图表定义，由宿主平台渲染成图，可绘制接口调用时序、服务架构、状态迁移、数据模型与发布计划，覆盖软件开发生命周期中多数可视化需求[12][4]。
主流协作平台已内置对这种语法的支持。代码托管平台可直接渲染 Markdown 中的图表代码块，多个厂商把 Mermaid 集成进代码托管、知识库与项目协作产品，Obsidian、Notion 等写作工具也可嵌入其定义[4][13][2]。除库本身，官方还提供浏览器端的在线编辑器，可即时预览并导出图片或分享链接，并配套命令行工具用于批量和自动化渲染[6][4]。
在项目管理与教学中，甘特图、思维导图、时间轴、用户旅程图等类型被用于表达进度安排、概念层级与流程步骤[5]。近年也出现将自然语言交给大语言模型生成图表代码、再用 Mermaid 渲染的用法[5]。
局限
自动布局无法等同于手工排版。节点较多或标签较长时，布局方向、换行位置与阅读顺序可能与作者预期不同，需要在目标渲染器中反复验证[6]。对于需要精细控制版式的出版物级图表，这类工具并不替代专业绘图软件[13]。
宿主环境差异带来兼容问题。不同平台集成的 Mermaid 版本与启用配置不同，新增图类型、形状语法或配置项未必在旧版宿主中可用，在线编辑器中能渲染不代表所有平台都能渲染[6]。Markdown 平台若未集成相应能力，代码块只会以纯文本显示[6]。
安全配置需要谨慎处理。渲染解析结果涉及信任级别，官方提供严格、宽松、antiscript 与沙箱等选项，默认为严格模式，会对文本中的 HTML 标签进行编码并关闭点击功能；沙箱模式则在受限框架内渲染，但会削弱交互能力[14]。前述漏洞也表明，若应用渲染来自不可信来源的图表定义，应升级到已修复版本或启用沙箱模式[10]。
此外，图表功能本身存在边界：布局算法对特殊结构可能无法给出理想结果，个别图类型的实验状态意味着语法和渲染行为仍可能变动[8]。
参见
参考资料
- Mermaid (software) [引用日期2026-10-29]
- Paradime | Introducing Mermaid in the Paradime Code IDE [引用日期2026-10-29]
- Mermaid [引用日期2026-10-29]
- Mermaid [引用日期2026-10-29]
- What is Mermaid? — Mermaid Chart [引用日期2026-10-29]
- type: entity [引用日期2026-10-29]
- github.com 上的网页 [引用日期2026-10-29]
- mermaid [引用日期2026-10-29]
- Initial commit · linclark/mermaid@e26c2a2 [引用日期2026-10-29]
- CVE-2026-41149 - Vulnerability-Lookup [引用日期2026-10-29]
- CVE-2026-41149 [引用日期2026-10-29]
- MCP World [引用日期2026-10-29]
- lifehacker.com 上的网页 [引用日期2026-10-29]
- Skip to content [引用日期2026-10-29]