Mermaid 图表测试

这篇文章用于测试 Astro 博客是否支持 Mermaid 图表。下面是各种类型的 Mermaid 图表示例。

流程图 (Flowchart)

这是一个简单的流程图示例：

graph TD
    A[开始] --> B{是否支持 Mermaid?}
    B -->|是| C[太棒了！]
    B -->|否| D[需要配置]
    D --> E[安装 astro-mermaid]
    E --> F[更新 Astro 配置]
    F --> C
    C --> G[完成 🎉]

序列图 (Sequence Diagram)

测试序列图渲染：

sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器

    用户->>浏览器: 访问博客
    浏览器->>服务器: 请求页面
    服务器-->>浏览器: 返回 HTML
    浏览器-->>用户: 显示内容
    用户->>浏览器: 查看 Mermaid 图表
    Note over 用户,浏览器: 图表渲染成功！

类图 (Class Diagram)

测试类图渲染：

classDiagram
    class BlogPost {
        +String title
        +String content
        +Date pubDate
        +String[] tags
        +publish()
        +edit()
    }

    class Author {
        +String name
        +String email
        +writePost()
    }

    BlogPost "1" --> "1" Author : written by

状态图 (State Diagram)

测试状态图渲染：

stateDiagram-v2
    [*] --> 草稿
    草稿 --> 审核中: 提交审核
    审核中 --> 已发布: 审核通过
    审核中 --> 草稿: 需要修改
    已发布 --> [*]

饼图 (Pie Chart)

测试饼图渲染：

pie title 技术栈分布
    "Astro" : 40
    "React" : 25
    "Vue" : 20
    "其他" : 15

甘特图 (Gantt Chart)

测试甘特图渲染：

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :a1, 2026-01-01, 7d
    UI设计            :a2, after a1, 14d
    section 开发阶段
    前端开发          :b1, after a2, 21d
    后端开发          :b2, after a2, 21d
    section 测试阶段
    集成测试          :c1, after b1, 7d
    上线部署          :c2, after c1, 3d

思维导图 (Mindmap)

测试思维导图渲染：

mindmap
  root((博客系统))
    前端
      Astro
      TailwindCSS
      React
    后端
      Node.js
      API
    内容
      Markdown
      MDX
      Mermaid
    部署
      Vercel
      Netlify

ER 图 (Entity Relationship)

测试 ER 图渲染：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "is in"

    CUSTOMER {
        string name
        string email
        int id
    }
    ORDER {
        int id
        date created
        string status
    }
    PRODUCT {
        string name
        int price
        int id
    }

用户旅程图 (User Journey)

测试用户旅程图渲染：

journey
    title 用户访问博客的旅程
    section 访问
      打开网站: 5: 用户
      浏览文章: 4: 用户
      查看图表: 5: 用户
    section 互动
      点击链接: 3: 用户
      分享文章: 4: 用户
      写评论: 2: 用户
    section 离开
      收藏页面: 5: 用户
      再次访问: 5: 用户

Git 图

测试 Git 图渲染：

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit

总结

如果你能看到上面所有的图表都正确渲染了，说明你的 Astro 博客已经成功支持 Mermaid 图表了！

配置方法

使用 astro-mermaid 让 Astro 支持 Mermaid 非常简单：

1. 安装依赖：

   pnpm add astro-mermaid

2. 在 astro.config.mjs 中配置：

   import mermaidIntegration from 'astro-mermaid';
    
   export default defineConfig({
     integrations: [
       // ... 其他集成
       mermaidIntegration(),
     ],
   });

3. 直接在 Markdown 中使用 Mermaid 代码块：

   ```mermaid
   graph TD
     A[开始] --> B[结束]
   ```

优势

astro-mermaid 的优点：

• ✅ 零配置：安装即用，无需额外配置
• ✅ 原生支持：官方 Astro 集成
• ✅ 轻量级：客户端渲染，不占用构建时间
• ✅ 灵活性：支持 Mermaid 的所有配置选项
• ✅ 兼容性好：同时支持 Markdown 和 MDX

自定义配置

如果需要自定义 Mermaid 配置，可以这样：

mermaidIntegration({
  // 自定义配置
  theme: 'dark',
  securityLevel: 'loose',
  // 更多配置选项...
})

更多图表类型

Mermaid 还支持更多类型的图表，比如：

• 时序图 (Timing diagram)
• C4 架构图
• 等等…

访问 Mermaid 官方文档 了解更多！