markdown 绘图
流程图
说明
访问Mermaid 流程图参考具体使用方法。
效果
code
使用mermaid标识 开头```mermaid
graph LR
A[公司] -->| 下 班 | B(菜市场)
B --> C{看见<br>卖西瓜的}
C -->|Yes| D[买一个包子]
C -->|No| E[买一斤包子]
```mermaid
graph TD
A[公司] -->| 下 班 | B(菜市场)
B --> C{看见<br>卖西瓜的}
C -->|Yes| D[买一个包子]
C -->|No| E[买一斤包子]
时序图
说明
访问Mermaid 时序图参考具体使用方法
效果
code
```mermaid
sequenceDiagram
autonumber
A-->A: 文本1
A->>B: 文本2
loop 循环1
loop 循环2
A->B: 文本3
end
loop 循环3
B -->>A: 文本4
end
B -->> B: 文本5
end
状态图
说明
访问Mermaid 状态图参考具体使用方法
效果
code
```mermaid
stateDiagram-v2
[*] --> A
A --> B
A --> C
state A {
[*] --> D
D --> [*]
}
B --> [*]
C --> [*]
UML类图
说明
访问Mermaid UML图参考具体使用方法
设置标题
---
title: 标题
---设置提示语
note "this is note"定义一个类
class Animal给类定义一个说明
class Animal["Animal with a label"]给类定义一备注
classDiagram
note "This is a general note"
note for MyClass "This is a note for a class"
class MyClass{
}
设置可见性
+Public-Private#Protected~Package/Internal
支持的箭头
| Type | Description |
|---|---|
| ` <|-- ` | 空心三角箭头 |
*-- | 实心菱形箭头 |
o-- | 空心菱形箭头 |
--> | 实心箭头 |
-- | 实线连接 |
..> | 虚线箭头 |
| `..|>` | 虚线三角箭头 |
.. | 虚线连接 |
| `<|--|>` | 双箭头 |
code
```mermaid
classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
Animal <|--|> Zebra : 双箭头演示
关系类型(Relation Type)
| Type | Description |
|---|---|
| `<|` | Inheritance |
\* | Composition |
o | Aggregation |
> | Association |
< | Association |
| `|>` | Realization |
和连线
| Type | Description |
|---|---|
| -- | 实线 |
| .. | 虚线 |
定义m:n的关系
1Only 10..1Zero or One1..*One or more*Manynn (where n>1)0..nzero to n (where n>1)1..none to n (where n>1)
code
```mermaid
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains效果
code
```mermaid
---
title: 标题
---
classDiagram
Base <|-- One
Base <|-- Two
Base : +String name
Base: +getName()
Base: +setName(String name)
class One{
+String newName
+getNewName()
}
class Two{
-int id
-getId()
}
饼图
说明
访问Mermaid 饼图参考具体使用方法
效果
code
```mermaid
pie
title 饼图
"A" : 100
"B" : 80
"C" : 40
"D" : 30
甘特图
效果
code
```mermaid
gantt
title 敏捷研发流程
section 迭代前
交互设计 :a1, 2020-03-01, 4d
UI设计 :after a1, 5d
需求评审 : 1d
section 迭代中
详细设计 :a2, 2020-03-11, 2d
开发 :2020-03-15, 7d
测试 :2020-03-22, 5d
section 迭代后
发布: 1d
验收: 2d
回顾: 1d折线图
效果
| Header1 | Header2 | Header3 | Header4 | |
|---|---|---|---|---|
| Sample1 | 11 | 11 | 4 | 33 |
| Sample2 | 112 | 111 | 22 | 222 |
| Sample3 | 333 | 142 | 311 | 11 |
code
| :line:{x,y} | Header1 | Header2 | Header3 | Header4 |
| ------ | ------ | ------ | ------ | ------ |
| Sample1 | 11 | 11 | 4 | 33 |
| Sample2 | 112 | 111 | 22 | 222 |
| Sample3 | 333 | 142 | 311 | 11 |柱状图
效果
| Header1 | Header2 | Header3 | Header4 | |
|---|---|---|---|---|
| Sample1 | 11 | 11 | 4 | 33 |
| Sample2 | 112 | 111 | 22 | 222 |
| Sample3 | 333 | 142 | 311 | 11 |
code
| :bar:{x,y} | Header1 | Header2 | Header3 | Header4 |
| ------ | ------ | ------ | ------ | ------ |
| Sample1 | 11 | 11 | 4 | 33 |
| Sample2 | 112 | 111 | 22 | 222 |
| Sample3 | 333 | 142 | 311 | 11 |