本文目录
为何 Mermaid 是开发者的绘图利器
技术文档常常依靠图表来说明系统架构、工作流程和数据流向。传统绘图工具需要在画布上拖动各种图形，再导出难以进行版本控制的图片。Mermaid 采取了另一种思路——你用简单的文本语法描述图表，渲染器便会生成整洁的 SVG，可以与代码一起存放在 Markdown 文件、Wiki 和代码评审（pull request）中。
由于 Mermaid 图表是纯文本，因此易于在差异（diff）中审阅、存储于 Git 并自动重新生成。这使它非常适合需要随代码库不断演进的文档。实时预览工具让你能即时迭代图表语法，边输入边查看渲染结果，而无需等待构建步骤或切换到另一个应用程序。
如何使用 Mermaid 预览工具
CheckTown 的 Mermaid 预览会即时渲染你的图表代码，让你无需离开浏览器即可设计和调试图表。
- 在编辑器中输入或粘贴你的 Mermaid 语法——预览会随着你修改代码实时更新
- 该工具支持流程图、时序图、类图、状态图、实体关系图、甘特图、饼图等多种类型
- 语法错误会以清晰的提示信息高亮显示，让你能立即定位并修复问题，而无需靠猜测判断哪里出了错
- 将渲染后的图表导出为 SVG 或 PNG，可用于演示文稿、文档或问题追踪系统
免费试用 —— 无需注册
打开 Mermaid 预览 →Mermaid 图表最佳实践
遵循一些约定，能让你的 Mermaid 图表在复杂度增长时依然保持易读和易维护。
- 为节点使用具有描述性的 ID 和标签——使用 userService、authDB 这类有意义的名称，而非泛泛的 A 和 B，这样源码读起来就像文档一样
- 让每张图表聚焦于单一概念——将复杂系统拆分为多张较小的图表，而不是把所有内容塞进一张难以辨认的大图
- 使用子图（subgraph）对相关节点进行分组——这能增加视觉结构，让大型图表一目了然、便于浏览
常见问题
支持哪些 Mermaid 图表类型？
预览支持所有主要的 Mermaid 图表类型，包括流程图、时序图、类图、状态图、实体关系图、甘特图、饼图、旅程图和需求图。渲染器会与最新的 Mermaid.js 版本保持同步。
我可以将生成的图表嵌入 GitHub 或 GitLab 吗？
可以。GitHub 和 GitLab 都能在 Markdown 文件中原生渲染 Mermaid 代码块。你可以直接把编辑器中的语法复制到 README 或 Wiki 页面的围栏代码块（fenced code block）中。预览工具则便于你在把语法提交到代码库之前进行迭代。
图表有大小限制吗？
没有硬性的字符数上限。不过，包含数百个节点的超大图表在浏览器中渲染可能较慢。如果你的图表变得过于庞杂，可考虑将其拆分为多张较小、聚焦的图表，让每一张分别描述系统的一个部分。