流程图 (Flowchart)#

graph TD;
    A[开始] --> B{是否安装?};
    B -->|是| C[运行项目];
    B -->|否| D[安装依赖];
    D --> C;
    C --> E[完成];

序列图 (Sequence Diagram)#

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

    用户->>浏览器: 访问页面
    浏览器->>服务器: 请求数据
    服务器-->>浏览器: 返回 HTML
    浏览器-->>用户: 渲染页面

甘特图 (Gantt Chart)#

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析       :a1, 2026-02-01, 7d
    UI 设计        :a2, after a1, 5d
    section 开发
    前端开发       :b1, after a2, 10d
    后端开发       :b2, after a2, 12d
    section 测试
    集成测试       :c1, after b2, 5d

饼图 (Pie Chart)#

pie title 技术栈使用占比
    "Astro" : 40
    "Svelte" : 25
    "TailwindCSS" : 20
    "TypeScript" : 15

类图 (Class Diagram)#

classDiagram
    class BlogPost {
        +String title
        +Date published
        +String[] tags
        +boolean mermaid
        +render() void
    }
    class Config {
        +boolean enable
    }
    BlogPost --> Config : uses

普通代码块（不受影响）#

下面的代码块应该正常高亮，不会被 Mermaid 处理：

1
const config = {
2
  mermaid: {
3
    enable: true,
4
  },
5
};
6
console.log("Hello Mermaid!");