Mermaid 快速上手指南

Mermaid 是一个强大的图表生成工具，可以通过简单的文本语法创建各种类型的可视化图表。本教程将帮助你快速掌握在博客中使用 Mermaid 的技巧。

🚀 基础语法

Mermaid 使用简洁的文本语法来定义图表结构。每个图表类型都有自己的语法规则，但基本概念相通。

📊 流程图 (Flowchart)

流程图用于展示步骤和决策过程：

flowchart TD
    A[开始编写] --> B{是否熟悉语法?}
    B -->|是| C[直接写图表]
    B -->|否| D[查看文档]
    D --> E[学习基础语法]
    E --> C
    C --> F[测试渲染]
    F --> G{图表正确?}
    G -->|是| H[完成!]
    G -->|否| I[调试修改]
    I --> F

⏱️ 时序图 (Sequence Diagram)

时序图用于展示不同组件或用户之间的交互顺序：

sequenceDiagram
    participant 用户
    participant 博客系统
    participant Mermaid渲染器
    participant 浏览器
 
    用户->>博客系统: 访问包含图表的文章
    博客系统->>Mermaid渲染器: 解析Mermaid代码
    Mermaid渲染器->>Mermaid渲染器: 生成SVG图表
    Mermaid渲染器->>浏览器: 返回渲染结果
    浏览器->>用户: 显示可视化图表

🥧 饼图 (Pie Chart)

饼图用于展示数据的比例关系：

pie
    title 学习时间分配
    "阅读文档" : 25
    "实践练习" : 40
    "调试问题" : 20
    "完成项目" : 15

📈 甘特图 (Gantt Chart)

甘特图用于项目进度管理：

gantt
    title 博客开发进度
    dateFormat  YYYY-MM-DD
    section 准备阶段
    需求分析   :a1, 2024-10-01, 3d
    技术选型   :a2, after a1, 2d
    section 开发阶段
    核心功能开发 :b1, 2024-10-06, 5d
    界面优化     :b2, after b1, 3d
    section 测试阶段
    功能测试     :c1, after b2, 2d
    性能优化     :c2, after c1, 2d

🏗️ 架构图 (Graph)

架构图用于展示系统结构：

graph TB
    subgraph "前端架构"
        A[React] --> B[Next.js]
        B --> C[Tailwind CSS]
        C --> D[shadcn/ui]
    end
 
    subgraph "内容管理"
        E[MDX文件] --> F[Markdown处理]
        F --> G[Mermaid渲染]
        G --> H[静态生成]
    end
 
    subgraph "部署"
        H --> I[Vercel]
        I --> J[CDN分发]
    end
 
    A --> E

💡 使用技巧

1. 选择合适的图表类型

流程图：适合展示决策流程和算法步骤
时序图：适合展示交互过程和时间顺序
饼图：适合展示比例和百分比数据
甘特图：适合项目时间线管理
架构图：适合展示系统结构和关系

2. 语法要点

使用有意义的节点名称
合理使用连接器的箭头方向
添加子图表来组织复杂结构
使用注释来解释复杂逻辑

3. 常见问题

语法错误：检查括号和引号是否匹配
布局混乱：使用不同的布局方向 (TD, LR, TB, RL)
节点重叠：增加节点间距或调整布局

🎯 最佳实践

从简单开始：先创建基础图表，再逐步添加细节
测试渲染：经常检查图表是否正确显示
添加注释：用注释解释复杂的逻辑结构
保持整洁：合理组织节点和连线的布局

🔄 兼容性说明

我们的博客系统支持：

✅ 所有主流 Mermaid 图表类型
✅ 自动适配深色/浅色主题
✅ 响应式设计，适配移动端
✅ 错误处理和友好提示

现在你可以在博客文章中轻松创建专业的图表了！开始尝试创建你的第一个 Mermaid 图表吧！