markdown工具绘图

Fri, 04 Dec 2020 21:23:10 +0000

[toc]

千言万语不如一张图 Express yourself by Pic

给你一座灯塔，给你一个希望

Markdown可以绘制各种不同的图，依赖于mermaid 引擎¹。

Flowchart

Flowchart 都由节点、几何形状和边缘、箭头或线条组成。mermaid代码定义了这些节点和边的制作和交互方式²。

可能的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 <|-- AveryLongClass: Cool <> 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

flow | Liao Lile