Markdown Mermaid 图表

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 尝试更多语法，再将图表代码粘贴到文章中。