【Mermaid】画图工具使用笔记
2023-02-18 16:28:16 时间
文章目录
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
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
参考连接
相关文章
- Java使用Steam流对数组进行排序
- 【Java技术专题】「原理专题」深入分析Java中finalize方法的作用和底层原理
- JavaFx 使用字体图标记录
- JavaFx 模拟键盘和鼠标事件
- 关于Java执行Cmd命令出现的死锁问题解决
- Java/Kotlin Double保留小数点后几位
- Java编程小技巧(1)——方法传回两个对象
- Java/Kotlin 实现控制台输出日志保存到文件
- 使用Jitpack发布开源Java库
- JavaFx 软件重启功能实现
- JavaFx 实现按钮防抖
- Java/Kotlin 密码复杂规则校验
- JavaFx Tooltip悬浮提示使用及自定义
- JavaFx WebView使用研究
- JavaFx 监听剪切板实现(Kotlin)
- JavaFx全局快捷键实现(Kotlin)
- JavaFx 创建快捷方式及设置开机启动
- JavaXMail发送邮件功能实现
- Kotlin/Java 读取Jar文件里的指定文件
- 极路由4增强版B70(HC5962)刷机