洱海文档

外观

在 GitHub 上 Star遇到问题?喝杯奶茶

Mermaid

约 2933 字大约 10 分钟

2025-12-24

语法

```mermaid

<!-- 在此处放置 mermaid 代码 -->

```

除了使用mermaid代码块, 你也可以直接使用以下代码块

  • class: classDiagram
  • c4c: C4Context
  • er: erDiagram
  • gantt: gantt
  • git-graph: gitGraph
  • journey: journey
  • mindmap: mindmap
  • pie: pie
  • quadrant: quadrantChart
  • requirement: requirementDiagram
  • sankey: sankey-beta
  • sequence: sequenceDiagram
  • state: stateDiagram-v2
  • timeline: timeline
  • xy: xychart-beta

你不需要再声明图表类型, 也不需要缩进图表代码.

当图表支持设置标题时, 你可以直接在代码块信息后添加标题

```sequence 代码标题
<!-- 顺序图代码内容
... -->
```

配置文档详见 Mermaid 文档

示例

流程图

详情

循序图

详情
```sequence Greetings
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```

类图

详情

状态图

详情
```state Check if n is negative

state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
```

关系图

详情
```er Er Example
CAR ||--o{ NAMED-DRIVER : allows
CAR {
    string registrationNumber
    string make
    string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
    string firstName
    string lastName
    int age
}
```

用户日记图

详情
```journey
title My working day
section Go to work
  Make tea: 5: Me
  Go upstairs: 3: Me
  Do work: 1: Me, Cat
section Go home
  Go downstairs: 5: Me
  Sit down: 5: Me
```

甘特图

详情

饼图

详情
```pie
title What Voldemort doesn't have?
  "FRIENDS" : 2
  "FAMILY" : 3
  "NOSE" : 45
```

Git 图表

详情

C4C 图表

详情

思维导图

详情

时序图

详情
```timeline
title Timeline of Industrial Revolution
section 17th-20th century
    Industry 1.0 : Machinery, Water power, Steam <br>power
    Industry 2.0 : Electricity, Internal combustion engine, Mass production
    Industry 3.0 : Electronics, Computers, Automation
section 21st century
    Industry 4.0 : Internet, Robotics, Internet of Things
    Industry 5.0 : Artificial intelligence, Big data,3D printing
```

桑基图

详情

依赖图

详情
```requirement
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}

element test_entity {
type: simulation
}

test_entity - satisfies -> test_req
```

象限图

详情

XY图

详情
```xy
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

块图

详情
```block
columns 3
前端 blockArrowId6<[" "]>(right) 后端
space:2 down<[" "]>(down)
硬盘 left<[" "]>(left) Database[("数据库")]

classDef front fill:#696,stroke:#333;
classDef back fill:#969,stroke:#333;
class Frontend front
class Backend,Database back
```

复杂例子

详情

版权归属：洱海

许可证：署名 4.0 国际 (CC-BY-4.0)