markdown工具绘图
[toc]
千言万语不如一张图 Express yourself by Pic
给你一座灯塔,给你一个希望

Markdown可以绘制各种不同的图,依赖于mermaid 引擎1。
Flowchart
Flowchart 都由节点、几何形状和边缘、箭头或线条组成。mermaid代码定义了这些节点和边的制作和交互方式2。
-
可能的flowchart 方向是:
- TB - 从上到下
- TD - 自上而下/与自上而下相同
- BT - 自下而上
- RL - 从右到左
- LR——从左到右
实例:
flowchart LR
id1([start]) --> id2[需求基线确定] --> id3[内部需求变更]-->id4{是否对实际业务产生影响}
id4-->|no|id5{是否接受当前版本变更} -->|no|id6[下一个版本]
id4-->|yes|id7[与客户协商需求变更]-->id8[客户需求变更流程]
id5-->|yes|id9[更新需求文档]-->id10[通知项目组开发测试]-->id11([需求变更备案])
Sequence
- -» 代表实线箭头,–» 则代表虚线箭头
- ->直线,–>虚线
sequenceDiagram
李雷 -> 韩梅梅: Hello 梅梅, How are you?
Note right of 韩梅梅: 韩梅梅心想
韩梅梅 --> 李雷: I'm fine, thanks, and you?
Gantt
gantt
dateFormat YYYY-MM-DD
title 快乐的生活
section 吃一把鸡就学习
学习 :done, des1, 2014-01-06,2014-01-09
疯狂学习 :active, des2, 2014-01-09, 3d
继续疯狂学习 : des3, after des2, 5d
吃鸡! : des4, after des3, 4d
section 具体内容
学习Python :crit, done, 2014-01-06,72h
学习C++ :crit, done, after des1, 2d
学习Lisp :crit, active, 3d
学习图形学 :crit, 4d
跳伞 :2d
打枪 :2d
ClassDiagram
classDiagram
Class01 > 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 {
<>
int id
size()
}
StateDiagram
stateDiagram
[*]-->Active
state Active {
[*]-->NumLockOff
NumLockOff-->NumLockOn : EvNumLockPressed
NumLockOn-->NumLockOff : EvNumLockPressed
--
[*]-->CapsLockOff
CapsLockOff-->CapsLockOn : EvCapsLockPressed
CapsLockOn-->CapsLockOff : EvCapsLockPressed
--
[*]-->ScrollLockOff
ScrollLockOff-->ScrollLockOn : EvCapsLockPressed
ScrollLockOn-->ScrollLockOff : EvCapsLockPressed
}
ErDiagram
erDiagram
CUSTOMER ||--o{ORDER : places
ORDER ||--|{LINE-ITEM : contains
CUSTOMER}|..|{DELIVERY-ADDRESS : uses
GitGraph
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 15
}
end
commit
branch lelandBranch
checkout lelandBranch
commit
commit
checkout master
commit
commit
commit
merge lelandBranch
Pie
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
Journey
展示了不同用户要做的步骤信息,可以展示当前的工作流
Task name:
:
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: 3: Me