markdown工具绘图

[toc]

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

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

image-20220603155904263

Markdown可以绘制各种不同的图,依赖于mermaid 引擎1

Flowchart

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

  1. 可能的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

  1. 使用Typora画 流程图、时序图、顺序图、甘特图、等图详解_Ch_champion的博客-CSDN博客_typora 时序图 ↩︎

  2. mermaid流程图语法教程_acktomas的博客-CSDN博客_mermaid 流程图 ↩︎

Liao lile
Liao lile
架构师 | 系统工程师

目前主要方向在微服务、服务网格等云原生相关领域技术