markdown mermaid 画图
流程图 flow chart
时序图代码如下, 写到typroa下面即可, 查看源码是这种格式即可
```mermaid flowchat st=>start: 开始 op=>operation: 普通操作 cond=>condition: 结果是否成功? op2=>operation: 操作2 op3=>operation: 操作3 sub1=>subroutine: 子程序1:>url i1=>inputoutput: inputoutput1 e=>end: 结束 st->op->cond-> cond(yes)->op2->e cond(no)->op3->sub1->i1->e ```
定义元素的语法
tag=>type: content:>url
tag就是元素名字，
type是这个元素的类型，有6中类型，分别为
- start # 开始
- end # 结束
- operation # 操作
- subroutine # 子程序
- condition # 条件
- inputoutput # 输入或产出
- content就是在框框中要写的内容，注意type后的冒号与文本之间一定要有个空格。
- url是一个连接，与框框中的文本相绑定
连接元素的语法
c2(yes)->io->e
c2(no)->op2->e
时序图 sequence diagram
时序图代码如下, 写到typroa下面即可, 查看源码是这种格式即可
?```mermaid sequenceDiagram title: 提现流程图 client->> + web: 1. 跳转提现页面 web->> + server: 2. 发起提现 server -->> - web : 3. 返回提现结果 note over web : 提现结果处理 alt 提现失败 web ->> web : 4. 提现失败处理 note over web : 详细查看 提现失败处理时序图 else 提现成功 web ->> web : 5.通知成功 note over web : 详细查看 提现成功处理时序图 end web -->>- client : 6.主动退出 ?```
标题
- title
图的标题
sequenceDiagram
title: 图的标题
participant participant
参与者
- participant
可以通过这个来启用别名
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
p1->p2: 链接
备注方向控制
-
left of
生命线的左边 -
right of
生命线的右边 -
over
生命线中间
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
note left of p1: left
note right of p2: right
note over p2 : over
p1->p2: 链接
循环
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
note over p1: 准备循环
loop 条件
note over p2: notev2
note over p1: notev2
end
箭头
->表示实线-->表示虚线->>表示实线箭头-->>表示虚线箭头
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
p1 -> p2: 实线
p1-->p2: 虚线
p1 ->> p2: 实线箭头
p1-->>p2: 虚线箭头
激活块
+ 开始激活块
- 结束激活块
sequenceDiagram
title: 图的标题
participant p1 as participant1
participant p2 as participant2
p1 -> +p2: 实线
p2-->> -p1: 返回
类图 class diagram
用的比较少, 毕竟IDEA有直接生成的
classDiagramAnimal <|-- DuckAnimal <|-- FishAnimal <|-- ZebraAnimal : +int ageAnimal : +String genderAnimal: +isMammal()Animal: +mate()class Duck{
+String beakColor+swim()+quack()}class Fish{
-int sizeInFeet-canEat()}class Zebra{
+bool is_wild+run()}
状态图 state diagram
[*] 标识开始/结束
stateDiagram[*] --> StillStill --> [*]Still --> MovingMoving --> StillMoving --> CrashCrash --> [*]
甘特图 gantt diagram
gantttitle A Gantt DiagramdateFormat YYYY-MM-DDsection SectionA task :a1, 2020-01-01, 30dAnother task :after a1 , 20dsection AnotherTask in sec :2020-01-12 , 12danother task : 24d饼图 pie diagram
pie title Pets adopted by volunteers"Dogs" : 386"Cats" : 85"Rats" : 15
ER图
erDiagramCUSTOMER }|..|{
DELIVERY-ADDRESS : hasCUSTOMER ||--o{
ORDER : placesCUSTOMER ||--o{
INVOICE : "liable for"DELIVERY-ADDRESS ||--o{
ORDER : receivesINVOICE ||--|{
ORDER : coversORDER ||--|{
ORDER-ITEM : includesPRODUCT-CATEGORY ||--|{
PRODUCT : containsPRODUCT ||--o{
ORDER-ITEM : "ordered in"资料
基于mermaid的时序图,流程图, 甘特图
mermaid时序图–知乎
mermaid在线图