Mermaid

当文档中的图表因频繁修改而腐烂（Doc-Rot），或开发者不愿花时间画图时，Mermaid 让你用类似 Markdown 的纯文本定义，一键生成 SVG 图表，让文档始终跟上代码。

能画什么：30+ 图表类型一览

Mermaid 覆盖从基础到前沿的图表需求，所有类型均支持文本定义与实时预览。

• 流程图：基础流程图、泳道图、子图
• 时序图：消息序列、激活框、注释
• 甘特图：任务依赖、里程碑、进度条
• 类图：继承、接口、关联、泛化
• 状态图：状态、转换、事件、分支
• 实体关系图（实验性）：ER 模型，支持键与关系标注
• 用户旅程图：阶段、任务、满意度评分
• 象限图：四象限气泡布局
• XY 图表：折线、柱状、散点混合
• Git 图：分支、合并、提交节点
• C4 图：上下文、容器、组件、代码四层架构
• 思维导图：树形发散结构
• 时间线图：按时间轴排列事件
• ZenUML：轻量时序 UML
• 桑基图：流量/能量流向图
• 看板图：列与卡片，模拟 Kanban 板
• 架构图：分层架构块图
• 雷达图：多维度对比蜘蛛网图
• 事件建模图：事件驱动架构
• 树状图：嵌套矩形展示层级数据
• 维恩图：集合交并关系
• 石川图（鱼骨图）：因果分析
• Cynefin 框架图：复杂决策分类
• 块图、数据包图、沃德利图、树视图等更多实验性图表

怎么用：安装与集成方式

Mermaid 提供多种部署路径，适配不同技术栈。

• CDN 直接引用：`https://cdn.jsdelivr.net/npm/mermaid@11`，在 HTML 中加 `<script type="module">` 并调用 `mermaid.initialize({startOnLoad:true})`
• NPM 安装：`npm i mermaid` 或 `yarn add mermaid` 或 `pnpm add mermaid`，需 Node v16+
• 命令行工具：Mermaid CLI 可将 .mmd 文件批量导出为 PNG/SVG
• 社区集成：支持嵌入 Notion、GitHub Markdown、GitLab、Confluence、VuePress、Docusaurus 等 20+ 平台
• 实时编辑器：Mermaid Live Editor 在线编写并预览，无需安装

安全机制：沙箱与漏洞报告

由于图表中可能包含 HTML 特殊字符，传统消毒方法会破坏图表结构，Mermaid 引入沙箱 iframe 渲染作为额外安全层。

• 沙箱模式：图表在隔离 iframe 中渲染，阻止恶意 JavaScript 执行
• 副作用：交互功能（如点击事件）也会被一同屏蔽
• 漏洞报告：发现安全漏洞请发邮件至 security@mermaid.live，需附复现步骤与受影响版本
• 持续消毒：团队仍努力对传入代码进行清理，但无法保证零漏洞

项目背景与贡献方式

Mermaid 由 Knut Sveidqvist 创建，初衷是让文档编写更轻松。2019 年获得 JS 开源奖“最令人兴奋的技术应用”类别。

• 核心依赖：图形布局依赖 d3 和 dagre-d3，时序图语法受 js-sequence-diagram 启发
• 版本：当前稳定版 v11.16.0
• 贡献入口：从 GitHub issue 列表中选择任务，贡献指南见 contribution guideline
• 开发环境：需 volta 管理 Node 版本，pnpm 包管理器，`pnpm test` 运行测试
• 视觉回归测试：由 Argos 和 Applitools 提供支持，确保 PR 不破坏渲染

常见问题

Q1：Mermaid 支持哪些图表类型？

A1：官网列出 30+ 种，包括流程图、时序图、甘特图、类图、状态图、ER 图、用户旅程图、象限图、XY 图、Git 图、C4 图、思维导图、时间线图、ZenUML、桑基图、看板图、架构图、雷达图、事件建模图、树状图、维恩图、石川图、沃德利图、Cynefin 框架图、树视图等，部分标注为实验性。

Q2：如何在 HTML 中直接使用 Mermaid 而不打包？

A2：在 HTML 中插入 `<script type="module">import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; mermaid.initialize({startOnLoad:true});</script>`，然后添加 `<div class="mermaid">graph TD; A-->B;</div>` 即可自动渲染为 SVG。

Q3：Mermaid 如何处理 XSS 风险？

A3：官网承认标准消毒方法会破坏图表，因此提供沙箱 iframe 模式（securityLevel 配置），在该模式下图表在隔离 iframe 中渲染，阻止恶意脚本执行，但交互功能也同时被禁用。漏洞可报告至 security@mermaid.live。

更多同类工具与网站,可在数据可视化分类继续挑选。

信息核实于 2026年7月,具体以官网为准。