跳到主要内容

Mermaid 图表示例与语法速查

Mermaid 很适合放在文档站里写流程图、时序图和类图。它的优点是直接写在 Markdown / MDX 里，维护成本低，后续修改也比截图省事。

流程图​

示例​

graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[结束]
    B -->|否| D[处理过程]
    D --> B

image-20240701220715588

思维导图​

示例​

graph TD
    A[思维导图]
    A --> B[主要分支1]
    A --> C[主要分支2]
    A --> D[主要分支3]
    B --> E[子分支1]
    B --> F[子分支2]
    C --> G[子分支3]
    C --> H[子分支4]
    D --> I[子分支5]
    D --> J[子分支6]

image-20240701220742929

时序图​

示例​

sequenceDiagram
    participant 用户
    participant 系统
    用户->>系统: 登录请求
    系统-->>用户: 返回登录结果

image-20240701220809877

甘特图​

示例​

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 项目阶段
    需求分析 :a1, 2024-06-01, 10d
    系统设计 :after a1, 15d
    系统开发 : 2024-06-20, 30d
    系统测试 : 2024-07-20, 20d

image-20240701220838836

类图​

示例​

classDiagram
    class Person{
        +String name
        +int age
        +void speak()
    }

    class Employee{
        +int employeeId
        +double salary
    }

    Person <|-- Employee

image-20240701220856779