Mermaid 语法速查表

在 Mermaid 中编写流程图，先以 flowchart TD 开头（从上到下布局，LR 为从左到右），然后用 id 加括号标签声明节点——方括号是矩形，花括号是决策菱形——再用 --> 箭头连接节点。要给箭头加标签，把文字写在两个竖线之间，例如 B -->|Yes| C。

flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Ship it]
    B -->|No| D[Debug]
    D --> B
    C --> E(Done)

在 Mermaid 中编写时序图，以 sequenceDiagram 开头，每行声明一个参与者（participant S as Server 可设置显示别名），然后每行写一条消息：实线箭头 ->> 表示请求，虚线箭头 -->> 表示回复。参与者按声明顺序从左到右排列，消息按书写顺序自上而下展开。

sequenceDiagram
    participant C as Client
    participant S as Server
    participant DB as Database
    C->>S: POST /login
    S->>DB: SELECT user WHERE email=?
    DB-->>S: User record
    S-->>C: 200 OK + JWT token

在 Mermaid 中制作甘特图，以 gantt 开头，用 dateFormat YYYY-MM-DD 设置日期格式，并用 section 给任务分组。每个任务占一行：名称、可选状态标记（done、active、crit）、id，然后是具体日期或 5d 这样的工期。把开始日期写成 after 任务id 即可表达依赖关系。

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Design
        Wireframes     :done, des1, 2024-01-01, 2024-01-07
        Mockups        :active, des2, 2024-01-08, 5d
    section Development
        Frontend       :dev1, after des2, 10d
        Backend        :dev2, after des2, 14d
    section Launch
        Deploy         :milestone, 2024-02-15, 0d

在 Mermaid 中编写 ER 图，以 erDiagram 开头，用块的形式定义每个实体并列出属性（类型加名称，主键标 PK、外键标 FK），再用基数符号声明实体之间的关系——||--o{ 表示一对多。冒号后的标签用来描述两个实体如何关联。

erDiagram
    USER {
        int id PK
        string email
        string name
        date created_at
    }
    POST {
        int id PK
        string title
        text body
        int user_id FK
    }
    USER ||--o{ POST : "writes"

在 Mermaid 中编写类图，以 classDiagram 开头，把每个类定义为一个块，列出属性和方法，+ 表示公有，- 表示私有。类之间的关系写在类名之间：<|-- 表示继承，*-- 表示组合，o-- 表示聚合。

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +fetch() void
    }
    class Cat {
        +bool indoor
        +purr() void
    }
    Animal <|-- Dog
    Animal <|-- Cat

在 Mermaid 中编写状态图，以 stateDiagram-v2 开头，用 [*] 表示起始和结束状态，每条转移写成 当前状态 --> 下一状态 : 触发条件。可以用 note right of 给状态加注释，需要内部结构时用 state 名称 { } 嵌套子状态。

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : submit
    Processing --> Success : valid
    Processing --> Error : invalid
    Error --> Idle : retry
    Success --> [*]
    note right of Processing
        Validating input
        and calling API
    end note

在 Mermaid 中制作饼图，以 pie 开头（可在同一行加 title 标题），然后每行列出一个扇区：带引号的标签、冒号和数值。Mermaid 会自动计算百分比，因此数值可以直接用原始计数。

pie title Browser Market Share
    "Chrome" : 65.3
    "Safari" : 18.7
    "Firefox" : 4.1
    "Edge" : 4.2
    "Other" : 7.7

在 Mermaid 中绘制 git 图，以 gitGraph 开头，按顺序书写 git 操作：commit 在当前分支添加提交，branch 创建并切换到新分支，checkout 在已有分支间切换，merge 把其他分支合并回来。用 commit id: "message" 给提交起可读的标签。

gitGraph
   commit id: "initial"
   branch feature/auth
   checkout feature/auth
   commit id: "add login"
   commit id: "add JWT"
   checkout main
   merge feature/auth
   commit id: "bump version"

在 Mermaid 中制作思维导图，以 mindmap 开头，下一行写中心主题——用双层圆括号包裹会渲染成圆形。之后每一行都是一个节点，缩进深度决定它挂在哪个分支下，整张图就是一份缩进的大纲。

mindmap
  root((FlowViz))
    Features
      Real-time preview
      SVG export
      Theme switching
    Diagram Types
      Flowchart
      Sequence
      Gantt
    Tech Stack
      Vue 3
      Mermaid v11
      Nuxt 3

在 Mermaid 中制作时间线，以 timeline 开头，加上 title 标题，并用 section 给时间段分组。每个条目是「时期 : 事件」；在后续行继续写冒号加事件，即可给同一时期附加多个事件。

timeline
    title Product Roadmap
    section 2024 Q1
        Jan : Beta launch
        Feb : User feedback
        Mar : v1.0 release
    section 2024 Q2
        Apr : Mobile support
        Jun : API access

在 Mermaid 中制作象限图，以 quadrantChart 开头，用 Low --> High 的形式标注 x 轴和 y 轴，再用 quadrant-1 到 quadrant-4 给四个象限命名。然后以 名称: [x, y] 的格式描点，坐标取 0 到 1 之间，[1, 1] 是右上角。

quadrantChart
    title Feature prioritization
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Strategic bets
    quadrant-2 Quick wins
    quadrant-3 Deprioritize
    quadrant-4 Money pits
    Dark mode: [0.25, 0.75]
    SSO login: [0.8, 0.85]
    New icons: [0.2, 0.3]
    Full rewrite: [0.9, 0.35]

在 Mermaid 中制作桑基图，以 sankey-beta 开头，每行一条流量，使用不缩进的 CSV 格式：来源,目标,数值。在后续行里把节点名复用为来源，即可把流量串联到下一阶段——Mermaid 会按数值比例绘制每条流带的宽度。

sankey-beta
Visitors,Signed up,300
Visitors,Bounced,700
Signed up,Activated,180
Signed up,Dropped off,120
Activated,Paying,60
Activated,Free tier,120

在 Mermaid 中制作柱状图或折线图，以 xychart-beta 开头，用方括号列表定义 x 轴分类，用标签加范围定义 y 轴，然后用 bar [...] 或 line [...] 绘制数据——两者可以叠加在同一张图上。数值按位置与分类一一对应。

xychart-beta
    title "Monthly revenue"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue ($k)" 0 --> 120
    bar [42, 55, 61, 74, 88, 105]
    line [42, 55, 61, 74, 88, 105]

在 Mermaid 中制作块图，以 block-beta 开头，用 columns N 设定网格宽度。之后每个条目依次填入下一个单元格——用 space 留空，用 DB[("Postgres")] 这样的括号语法设置块的形状——最后用 --> 箭头在块 id 之间画连接。

block-beta
columns 3
  Client space:1 API["API Gateway"]
  space:3
  Cache[("Redis")] space:1 DB[("Postgres")]
  Client --> API
  API --> DB
  API --> Cache

在 Mermaid 中绘制架构图，以 architecture-beta 开头，用 group 声明云、VPC 等边界，再添加 service 条目并选择内置图标（database、server、disk），用 in 关键字把服务放进分组。服务之间按边相连：db:L -- R:server，字母指定连线从哪一侧出入。

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:db

在 Mermaid 中制作用户旅程图，以 journey 开头，用 section 给步骤分组，每一步写成 任务名: 评分: 角色，评分从 1（最差）到 5（最好）。Mermaid 会按评分给每一步着色，让旅程中的痛点一目了然。

journey
    title Checkout experience
    section Browse
      Find product: 5: Shopper
      Compare prices: 3: Shopper
    section Purchase
      Add to cart: 4: Shopper
      Enter payment: 2: Shopper
      Confirm order: 5: Shopper, Support

在 Mermaid 中编写需求图，以 requirementDiagram 开头，把每条需求声明为包含 id、text、risk 和 verifymethod 的块。再用 element 块声明系统组成部分，然后用 auth_service - satisfies -> login_req 这样的带类型关系连接，表明哪个元素满足哪条需求。

requirementDiagram

    requirement login_req {
    id: 1
    text: Users must authenticate before accessing data.
    risk: high
    verifymethod: test
    }

    element auth_service {
    type: service
    }

    auth_service - satisfies -> login_req

在 Mermaid 中绘制 C4 上下文图，以 C4Context 开头（更深层级用 C4Container 和 C4Component），用 Person(id, "标签", "描述") 和 System(...) 声明人员与系统，边界之外的系统用 System_Ext，最后用 Rel(from, to, 标签, 技术) 建立关系。

C4Context
    title Internet banking - system context
    Person(customer, "Customer", "A customer of the bank")
    System(banking, "Internet Banking", "Lets customers view accounts")
    System_Ext(mail, "E-mail System", "Sends notifications")
    Rel(customer, banking, "Uses")
    Rel(banking, mail, "Sends e-mails", "SMTP")

在 Mermaid 中制作看板，以 kanban 开头，每个列写成顶层的 id[标题] 条目，卡片缩进写在所属列的下方。列按声明顺序从左到右渲染，移动卡片只需把那一行剪切并粘贴到另一个列标题之下。

kanban
  todo[Todo]
    t1[Write API spec]
    t2[Design schema]
  doing[In progress]
    t3[Build endpoints]
  done[Done]
    t4[Project setup]

在 Mermaid 中制作雷达图，以 radar-beta 开头，用 axis 条目定义各条轴，再用 curve 绘制每个对象，按轴的声明顺序为每条轴给一个数值。用 min 和 max 固定刻度，使不同对象的曲线可以直接比较。

radar-beta
  title Team skills
  axis c["Coding"], d["Design"], o["Ops"]
  axis p["Product"], m["Marketing"]
  curve alice["Alice"]{80, 60, 70, 55, 40}
  curve bob["Bob"]{55, 85, 45, 75, 70}
  max 100
  min 0

在 Mermaid 中绘制数据包图，以 packet-beta 开头，每个字段写成一个比特区间加带引号的名称，例如 0-15: "Source Port"。每行会在 32 位处自动换行，生成经典的 RFC 风格网络包头布局。

packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"