無程式碼也能輕鬆打造專業LINE官方帳號！一鍵導入模板，讓AI助你行銷加分！
基于文本的图表生成已彻底改变了开发人员创建和维护可视化文档的方式，而 Mermaid（GitHub 上的 mermaid-js/mermaid）正是开创这种方法的库。通过允许使用简单、人类可读的文本语法定义图表，Mermaid 使图表创建变得像编写 Markdown 一样容易——并使图表能够与代码一起进行版本控制、审查和维护。
由 Knut Sveidqvist 创建，现在由一个专注的社区维护，Mermaid 已成为软件行业中基于文本的图表生成的标准，拥有超过 75,000 个 GitHub 星号。它支持十几种图表类型，包括流程图、序列图、甘特图、类图、状态图、饼图、实体关系图、用户旅程图、Git 图和思维导图。
Mermaid 的影响远不止于一个库。它被 GitHub、GitLab、Notion 和众多文档平台采用，已成为在技术文档中嵌入图表的默认选择。编写 README 或 Wiki 页面的开发者现在可以将流程图或序列图作为简单的代码块包含在内，该块会在平台上自动渲染，无需任何外部工具或图片资源。
图表渲染管线
Mermaid 通过结构化渲染管线将文本定义转换为视觉图表：
flowchart LR
A[Mermaid 定义\n文本语法] --> B[解析器\n语法分析]
B --> C[抽象语法树\n结构化表示]
C --> D[布局引擎\nGraphviz / Dagre / 自定义]
D --> E[SVG 渲染\n视觉图表]
E --> F[交互功能\n平移 / 缩放 / 点击]
B --> G[语法验证\n错误检测]
G --> H[错误报告\n用户反馈]模块化架构将解析、布局和渲染分离成独立的阶段，每个阶段都可以自定义或替换。不同的图表类型使用针对其特定视觉需求优化的不同布局引擎。
支持的图表类型
| 图表类型 | 语法示例 | 使用案例 |
|---|---|---|
| 流程图 | A–>B; B–>C | 流程图 |
| 序列图 | A-»B: 消息 | 交互流程 |
| 类图 | ClassA < | – ClassB |
| 状态图 | [*] –> State1 | 状态机 |
| ER 图 | CUSTOMER | |
| 甘特图 | section Tasks | 项目时间轴 |
| 饼图 | “类别” : 30 | 数据分布 |
| Git 图 | commit id: “main” | 分支可视化 |
| 旅程图 | section Phase | 用户体验 |
| 思维导图 | root((主题)) | 想法组织 |
集成生态系统
Mermaid 真正的优势在于其集成生态系统。该库可以在多种情境中使用：作为通过 npm 或 CDN 加载的 JavaScript 库、作为用于批量图表生成的命令行工具、作为 MkDocs、Docusaurus 和 VuePress 等文档生成器的插件，以及作为 GitHub、GitLab 和 Notion 等平台的原生功能。
对于开发工作流程，Mermaid CLI 工具支持在 CI/CD 管线中自动生成图表。文档存储库可以将 Mermaid CLI 作为构建步骤执行，从源文件生成图表图片，确保图表始终与最新变更保持同步。Mermaid Live Editor 等实时编辑工具提供即时预览，使得在提交图表设计之前可以轻松迭代。
Mermaid 社区维护着一个活跃的插件、主题和集成生态系统。自定义主题允许组织在所有图表中应用一致的样式。插件提供附加功能，如可点击节点、工具提示支持和动态数据绑定。
推荐的外部资源
- Mermaid GitHub 存储库 – 源代码、文档和社区
- Mermaid Live Editor – 用于创建和测试 Mermaid 图表的交互式游乐场
FAQ
什么是 Mermaid？ Mermaid 是一个 JavaScript 库，可从类似 Markdown 的文本描述生成图表和流程图。它支持多种图表类型，包括流程图、序列图、甘特图、类图、状态图、饼图、ER 图、用户旅程图、Git 图和思维导图。图表使用简单、人类可读的语法定义，并渲染为 SVG 或 PNG。
Mermaid 支持哪些类型的图表？ Mermaid 支持十几种图表类型：用于流程可视化的流程图、用于交互流程的序列图、用于面向对象设计的类图、用于状态机的状态图、用于数据建模的 ER 图、用于项目排程的甘特图、用于数据分布的饼图、用于分支可视化的 Git 图、用于体验映射的用户旅程图、需求图和用于想法组织的思维导图。
Mermaid 通常如何使用？ Mermaid 最常用于 Markdown 文档中，其中图表以带有 ‘mermaid’ 语言标识符的代码块嵌入。许多平台包括 GitHub、GitLab、Notion 以及 MkDocs 和 Docusaurus 等文档工具都具有原生 Mermaid 支持。它也作为独立库用于网页应用程序中，并作为 CLI 工具用于生成图表图片。
Mermaid 的语法容易学习吗？ 是的，Mermaid 的语法设计为直观且可读的，即使是对非技术用户也是如此。流程图可以用简单的箭头符号定义，序列图用参与者-消息行定义，甘特图用日期范围定义。大多数用户可以在阅读文档后的几分钟内创建基本图表。
Mermaid 图表可以导出为图片吗？ 是的，Mermaid 支持将图表导出为 SVG、PNG 和 PDF。SVG 输出与分辨率无关且可编辑，非常适合用于文档。PNG 和 PDF 导出适合嵌入报告和演示文稿中。Mermaid CLI 工具和各种集成工具支持批量转换多个图表。
延伸阅读
- Mermaid 在 GitHub 上 – 包含文档和示例的存储库
- Mermaid Live Editor – 用于创建和预览图表的交互式工具
