Markdown 中 Mermaid 图表完整指南#
本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、ER 图、类图、状态图、XY 图、甘特图、思维导图等。
Mermaid 图表由 Merman 实现。Firefly 在 Astro 构建阶段生成亮色和深色两套静态 SVG，无需在浏览器中加载 Mermaid 渲染运行时。可以前往 Merman Playground 实时编辑语法并预览渲染结果。
时序图示例#
时序图显示对象之间随时间的交互。
ER 图示例#
ER 图（实体关系图）非常适合表示数据库结构。
类图示例#
类图显示系统的静态结构，包括类、属性、方法及其关系。
状态图示例#
状态图显示对象在其生命周期中经历的状态序列。
XY 图示例#
XY 图表非常适合展示趋势和对比数据。
饼图示例#
饼图适合直观展示各部分在整体中的占比。
甘特图示例#
甘特图可以按时间轴展示项目阶段、任务依赖和当前进度。
思维导图示例#
思维导图适合梳理主题层级和知识结构。
时间线示例#
时间线用于按年份或阶段呈现项目的重要事件。
用户旅程图示例#
用户旅程图能够描述用户在不同阶段的行为和体验评分。
Git 图示例#
Git 图可以清晰展示分支、提交和合并历史。
看板示例#
看板适合展示任务在不同工作阶段之间的分布。
Sankey 图示例#
Sankey 图通过连线宽度展示流量在不同节点之间的流向。
Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了流程图、时序图、ER 图、类图、状态图、XY 图、饼图、甘特图、思维导图、时间线、用户旅程图、Git 图、看板和 Sankey 图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。
要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。图表会在构建时自动渲染为 SVG，无需客户端 JavaScript 加载。
可以前往 Merman Playground 尝试更多语法，再将图表代码粘贴到文章中。
