本文转载自：AI225在线工具箱，原文链接：https://tools.ai225.com/articles/mermaid-introduction/

什么是 Mermaid?

Mermaid 是一个基于 JavaScript 的图表绘制工具，它允许你使用文本和代码来生成图表。它的语法类似于 Markdown，非常易于学习和使用。

为什么选择 Mermaid?

• 版本控制友好：图表以纯文本形式存储，非常容易通过 Git 进行跟踪、对比和合并。
• 高效快捷：告别繁琐的拖拽式 UI。只需输入逻辑，让 Mermaid 自动处理布局。
• 易于维护：更新复杂的图表就像修改几行文本一样简单。
• 广泛集成：原生支持 GitHub、GitLab、Notion、Obsidian 等众多开发者工具。

除了流程图，你还能创建什么？

Mermaid 的功能非常强大，以下是一些最受欢迎的图表类型：

1. 序列图 (Sequence Diagrams)

非常适合展示进程之间如何交互以及交互的顺序。

代码示例：

sequenceDiagram
    Alice->>John: 你好 John，最近怎么样？
    John-->>Alice: 挺好的！
    Alice-)John: 晚点见！

渲染结果：

2. 甘特图 (Gantt Charts)

用于项目管理和跟踪进度。

代码示例：

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :a1, 2026-01-01, 30d
    UI 设计           :after a1  , 20d

渲染结果：

3. 状态图 (State Diagrams)

非常适合表示系统的状态以及状态之间的转换。

代码示例：

stateDiagram-v2
    [*] --> 闲置
    闲置 --> [*]
    闲置 --> 运行中
    运行中 --> 闲置
    运行中 --> 故障
    故障 --> [*]

渲染结果：

4. 实体关系图 (ERD)

适用于数据库设计和可视化数据结构。

代码示例：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

渲染结果：

样式与自定义

Mermaid 允许你使用主题（default, forest, dark, neutral）自定义图表外观，并支持为单个节点应用类似 CSS 的样式。你甚至可以定义类 (class) 来在多个元素间复用样式。

立即体验

准备好了吗？你可以在我们的 Mermaid 在线编辑器 中实时编写、预览和导出你的图表。

• 实时渲染：输入即所得。
• 多种主题：轻松切换明暗模式。
• 导出选项：支持导出为高质量的 PNG 或 SVG 文件。

掌握 Mermaid 将显著提升你的文档编写和技术交流效率。今天就开始用代码绘制你的图表吧！