Mermaid 语法大全

<div class="mermaid-wrapper"><div class="mermaid">
gitGraph LR:
   checkout main
   commit id: "Downtown" tag: "Line 1"
   commit id: "Central Park"
   branch "Line 2 (Blue)"
   commit id: "East Station"
   commit id: "Science Museum"
   checkout main
   commit id: "City Hall (Transfer)" tag: "🔀 Line 1 & 2"
   merge "Line 2 (Blue)"
   commit id: "Financial District"
   branch "Line 3 (Green)"
   commit id: "West Village"
   commit id: "Airport Terminal"
   checkout main
   commit id: "Sports Arena"
   merge "Line 3 (Green)"
   commit id: "Northern Gateway"
   branch "Line 4 (Orange)"
   commit id: "University"
   checkout main
   commit id: "Central Station" tag: "Terminal"
   merge "Line 4 (Orange)"
</div></div>

<style is:global>
  @import url('../styles/mermaid-toolbar.css');
</style>

<script>
  import '../scripts/mermaid-toolbar.js';
</script>

<script is:inline>
  document.addEventListener('DOMContentLoaded', function() {
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
    script.onload = function() {
      mermaid.initialize({
        startOnLoad: false,
        theme: 'dark',
        themeVariables: {
          background: '#1a1a2e',
          primaryColor: '#4a90d9',
          secondaryColor: '#2d2d44',
          tertiaryColor: '#1a1a2e',
          primaryBorderColor: '#555',
          secondaryBorderColor: '#444',
          lineColor: '#888',
          textColor: '#f6f2e9',
          mainBkg: '#2d2d44',
          nodeBorder: '#555',
          clusterBkg: '#1a1a2e',
          clusterBorder: '#333',
          titleColor: '#f6f2e9',
          edgeLabelBackground: '#2d2d44',
          nodeTextColor: '#f6f2e9',
        }
      });
      mermaid.run({ querySelector: '.mermaid' }).then(function() {
        if (window.MermaidToolbar) {
          window.MermaidToolbar.initToolbars();
        }
      });
    };
    document.head.appendChild(script);
  });
</script>

graph TD
            A[开始] --> B{判断}  %% 这是一条注释
            B -->|是| C[执行]

flowchart TD
    A[开始] --> B{是否登录}
    B -->|是| C[进入主页]
    B -->|否| D[跳转登录页]
    C --> E[结束]
    D --> E

flowchart TD
    subgraph 用户模块
        A[用户注册] --> B[用户登录]
    end
    subgraph 业务模块
        C[浏览商品] --> D[下单支付]
    end
    B --> C

flowchart LR
    A[开始] --> B[处理]
    classDef red fill:#f99,stroke:#333,stroke-width:2px
    class A red 

sequenceDiagram
    participant 用户
    participant 服务器
    用户->>服务器: 发送请求
    服务器-->>用户: 返回响应

sequenceDiagram
    participant U as 用户
    participant S as 服务端
    U->>S: 请求数据

sequenceDiagram
    A->>+B: 请求
    B-->>-A: 响应

sequenceDiagram
    participant A
    participant B
    Note right of A: 这是注释
    Note left of B: 左侧注释
    Note over A,B: 跨参与者注释

sequenceDiagram
    loop 每天执行
        A->>B: 检查状态
    end

sequenceDiagram
    alt 成功
        A->>B: 继续处理
    else 失败
        A->>B: 重试
    end

sequenceDiagram
    par 并行执行
        A->>B: 任务1
    and
        A->>C: 任务2
    end

classDiagram
    class Animal {
        +String name
        -int age
        +void eat()
        -void sleep()
    }

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
    Animal : +void move()
    class Dog { 
        +String breed
        +void bark()
    }

stateDiagram-v2
    [*] --> 待审核
    待审核 --> 已通过
    待审核 --> 已拒绝
    已通过 --> [*]
    已拒绝 --> [*]

stateDiagram-v2
    State1: 第一个状态
    State2: 第二个状态
    [*] --> State1
    State1 --> State2

stateDiagram-v2
    [*] --> 运行中
    state 运行中 { 
        [*] --> 就绪
        就绪 --> 执行中
        执行中 --> 就绪
    } 
    运行中 --> [*]

stateDiagram-v2
    state fork <<fork>>
    [*] --> fork
    fork --> 状态A
    fork --> 状态B

gantt
    title 项目开发计划
    dateFormat YYYY-MM-DD
    section 需求阶段
        需求分析    :done, a1, 2024-01-01, 7d
        需求评审    :active, a2, after a1, 3d
    section 开发阶段
        前端开发    :a3, after a2, 14d
        后端开发    :a4, after a2, 21d
    section 测试阶段
        集成测试    :a5, after a3, 7d

pie title 编程语言使用比例
    "JavaScript" : 45
    "Python" : 30
    "Java" : 15
    "Go" : 10

pie showData
    title 市场份额
    "产品A" : 35.5
    "产品B" : 28.3
    "产品C" : 20.2
    "其他" : 16.0

erDiagram
    CUSTOMER ||--o{  ORDER : 下单
    ORDER ||--|{  LINE_ITEM : 包含
    PRODUCT ||--o{  LINE_ITEM : 属于
    CUSTOMER { 
        int id PK
        string name
        string email
    } 
    ORDER { 
        int id PK
        int customer_id FK
        date created_at
    } 

journey
    title 购物体验
    section 浏览商品
        查看商品列表: 5: 用户
        搜索商品: 4: 用户
    section 下单支付
        加入购物车: 4: 用户
        填写地址: 3: 用户
        支付成功: 5: 用户, 系统

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

gitGraph
    commit id: "初始化"
    commit id: "添加功能"
    branch feature
    checkout feature
    commit id: "开发新功能"
    checkout main
    merge feature id: "合并功能"

gitGraph
    commit
    branch dev
    checkout dev
    commit
    branch feature
    checkout feature
    commit
    checkout dev
    merge feature
    checkout main
    merge dev tag: "v1.0.0"

kanban
    待办
        需求分析
        设计评审
    进行中
        前端开发
    已完成
        项目初始化

quadrantChart
    x-axis 低优先级 --> 高优先级
    y-axis 低影响 --> 高影响
    紧急任务: [0.8, 0.9]
    日常事务: [0.3, 0.4]
    战略规划: [0.6, 0.7]
    琐碎杂事: [0.2, 0.2]

architecture-beta
    service api(server)[APIService]
    service db(database)[Database]
    service cache(database)[Cache]
    api:R --< L:db
    api:R --< L:cache

block-beta
    columns 3
    a["模块A"] b["模块B"] c["模块C"]
    a --< b
    b --< c

C4Context
    title 系统上下文图
    Person(user, "用户", "系统使用者")
    System(app, "应用系统", "核心业务系统")
    Rel(user, app, "使用", "HTTPS")

flowchart LR
    A[第一行
第二行
第三行] --> B[结果]

flowchart TD
    A["包含特殊字符的文本"]
    B["end 关键字"]