跳到主要内容

Mermaid 流程图语法指南

· 阅读需 2 分钟
DingZhiyu
DingZhiyu
2023 Para team number

流程图 (Flowchart)​

示例​

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

image-20240701220715588

思维导图 (Mind Map)​

示例​

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

时序图 (Sequence Diagram)​

示例​

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

image-20240701220809877

甘特图 (Gantt Chart)​

示例​

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

类图 (Class Diagram)​

示例​

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

    class Employee{
        +int employeeId
        +double salary
    }

    Person <|-- Employee

image-20240701220856779