【mermaid】画图工具使用笔记_xybdiy的博客-爱代码爱编程
文章目录
Mermaid简介
Mermaid 允许使用文本和代码创建图表和可视化效果。它是一个基于 JavaScript 的图表绘制和图表工具,可呈现受 Markdown 启发的文本定义,以动态创建和修改图表。
Mermaid使用方法
1、流程图(graph)
graph TD;
A-->B;
A-->C;
B-->D;
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
edge comment
square
shape
line break
and some odd
special characters
in an Odd shape
2、时序图(sequenceDiagram)
sequenceDiagram
Alcie->>Johb:hello John, how are you?
John-->>Alice:Great!
3、状态图(stateDiagram)
stateDiagram
[*]-->s1
s1-->[*]
4、类图
classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}
5、甘特图(gantt)
gantt
section Section
Completed :done, des1, 2022-01-06,2022-01-08
Active :active, des2, 2022-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
6、饼图(pie)
pie
title Key elements in Product X
"Dogs" : 25
"Cats" : 25
"Rats" : 15
"Iron" : 35
7、需求图
flowchat
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op