markdown图表语法Mermaid介绍

Markdown是一种轻量级标记语言,除了编辑文字外,还支持插入图片、表格、公式,它是很流行的一种文档编辑语言,很多博客平台都支持使用Markdown来编辑文章。Markdown还有一个好用的功能是画流程图,基于Mermaid库来渲染流程图,语法比较简洁,本文将介绍Markdown的Mermaid简单使用方法。

Mermaid 是一个基于 Javascript 的图表绘制工具,可用于创建流程图、时序图、甘特图、类图、状态图、饼图等。

Mermaid集成到了很多 Markdown 编辑器中,本文使用的是Typora编辑器,在代码块中编写Mermaid代码,编程语言名字设置为 mermaid

接下来介绍Mermaid语法。

流程图

1. 定义流程图节点及节点名称

flowchart LR
    A[Start]
flowchart LR A[Start]

2. 定义流程图方向

可设置4个方向:

  • TD - top-down,从上到下。或者使用TB(top to bottom)
  • BT - bottom to top,从下到上
  • RL - right to left,从右到左
  • LR - left to right,从左到右
flowchart TD
    A --> B
flowchart TD A --> B
flowchart LR
    A --> B
flowchart LR A --> B

3. 节点形状

默认节点形状为长方形,也可以设置为其它形状。

flowchart LR
    A(圆角矩形) -.- B([椭圆形]) -.- C((圆形)) -.- D[(圆柱形)]
	E[[subroutine]] -.- F>非对称形状] -.- G{菱形} -.- H{{六角形}}
	I[/平行四边形/] -.- J[\平行四边形\] -.- K[\梯形/] -.- L[/梯形\]
flowchart LR A(圆角矩形) -.- B([椭圆形]) -.- C((圆形)) -.- D[(圆柱形)] E[[subroutine]] -.- F>非对称形状] -.- G{菱形} -.- H{{六角形}} I[/平行四边形/] -.- J[\平行四边形\] -.- K[\梯形/] -.- L[/梯形\]

4. 节点连线

flowchart LR    
    A1 -- 箭头和文本 --> B1 --> |箭头和文本| C1 --> D1
    A2 == 加粗直线箭头 ==> B2 ==> C2
    A3 -- 无箭头 --- B3 ---|无箭头| C3 --- D3   
    A4 -. 虚线 .- B4 -.- C4 -. 虚线 .-> D4 -.-> E4
flowchart LR A1 -- 箭头和文本 --> B1 --> |箭头和文本| C1 --> D1 A2 == 加粗直线箭头 ==> B2 ==> C2 A3 -- 无箭头 --- B3 ---|无箭头| C3 --- D3 A4 -. 虚线 .- B4 -.- C4 -. 虚线 .-> D4 -.-> E4

5. 多节点连接

flowchart LR
    A --> B & C--> D
flowchart LR A --> B & C--> D
flowchart TD
    A & B--> C & D
flowchart TD A & B--> C & D

或者

flowchart TD
    A --> C
    A --> D
    B --> C
    B --> D
flowchart TD A --> C A --> D B --> C B --> D

可通过增加短横线来增加连线长度。

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
flowchart TD A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End]

虚线或粗连线,可增加等号或点来延长连线:

Length 1 2 3
连线 --- ---- -----
箭头 --> ---> ---->
加粗连线 === ==== =====
加粗箭头 ==> ===> ====>
虚线 -.- -..- -...-
虚线箭头 -.-> -..-> -...->

6. 其它类型箭头

flowchart LR
    A --o B
    B --x C
flowchart LR A --o B B --x C
flowchart LR
    A o--o B
    B <--> C
    C x--x D
flowchart LR A o--o B B <--> C C x--x D

7. 特殊字符

如果文本中有字符可以用双引号:

flowchart LR
    A["括号 (text)"]
flowchart LR A["括号 (text)"]
flowchart LR
    A["括号 [text]"]
flowchart LR A["中括号 [text]"]

如果文本中要使用双引号或者其它更多特殊字符,可以使用HTML 实体来表示:

flowchart LR
    A["引号#quot;"]
flowchart LR A["引号#quot;"]
flowchart LR
    A["美元符号#36;"]
flowchart LR A["美元符号#36;"]
flowchart LR
    A["笑脸#128512;"]
flowchart LR A["笑脸#128512;"]

更多HTML字符可参考https://www.w3school.com.cn/charsets/index.asp

8. 子图

flowchart TB
    b2-->a2
    subgraph A [one]
    a1-->a2
    end
    subgraph B [two]
    b1-->b2
    end
flowchart TB b2-->a2 subgraph A [A] a1-->a2 end subgraph B [B] b1-->b2 end subgraph C [C] c1 -->c2 end A --> C

可以通过设置样式来设置流程图边框,具体设置方法可参考:https://mermaid-js.github.io/mermaid/#/flowchart

时序图

举几个时序图的例子:

sequenceDiagram
    autonumber
    participant B as Browser
    participant C as Controller
    participant M as Model    
    participant V as View
    B ->> C: Request
    C ->> M: 数据请求
    M ->> C: 返回数据
	C ->> V: 发送数据
	V ->> B: Response
sequenceDiagram autonumber participant B as Browser participant C as Controller participant M as Model participant V as View B ->> C: Request C ->> M: 数据请求 M ->> C: 返回数据 C ->> V: 发送数据 V ->> B: Response
sequenceDiagram
    autonumber
    participant A
    participant B
    A -> B: 实线
    A --> B: 虚线
    A ->> B: 实线箭头
    A -->> B: 虚线箭头
    A -x B: 实线箭头+十字
    A --x B: 虚线箭头+十字 
	loop
        B->>B
sequenceDiagram autonumber participant A participant B A ->> B: 实线 A -->> B: 虚线 A ->> B: 实线箭头 A -->> B: 虚线箭头 A -x B: 实线箭头+十字 A --x B: 虚线箭头+十字 B ->> B: 循环

类图

Mermaid也支持类图,https://mermaid-js.github.io/mermaid/#/classDiagram

 classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }
classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }

状态图

Mermaid状态图语法和plantUml一样。

stateDiagram-v2
    state "状态1" as State1
    State2 : 状态2    
    [*] --> State1

    State1 --> State2: 过渡文本
    State2 --> State1
    State2 --> State3
    state State3 {
        [*] --> second
        second --> [*]
    }
stateDiagram-v2 state "状态1" as State1 State2 : 状态2 [*] --> State1 State1 --> State2: 过渡文本 State2 --> State1 State2 --> State3 state State3 { [*] --> second second --> [*] }

甘特图

甘特图例子:

gantt
    title 甘特图
    dateFormat  YYYY-MM-DD
    section 项目
    A 项目           :A1, 2022-01-01, 30d
    B 项目     :after A1  , 20d
    section 子任务
    子任务1      :2022-01-12  , 12d
    子任务2      : 24d
gantt title 甘特图 dateFormat YYYY-MM-DD section 项目 A 项目 :A1, 2022-01-01, 30d B 项目 :after A1 , 20d section 子任务 子任务1 :2022-01-12 , 12d 子任务2 : 24d

饼图

Mermaid可以用来渲染饼图:

pie title 标题
    "Dogs" : 38
    "Cats" : 85
    "Rats" : 15
pie title 标题 "Dogs" : 38 "Cats" : 85 "Rats" : 15

Mermaid除了可以渲染流程图、时序图、甘特图、类图、状态图和饼图外,还可以用来画实体关系图、需求图等,更多语法课参考官方文档:https://mermaid-js.github.io/mermaid/#/

--THE END--
posted @ 2022-08-25 21:56  测试开发小记  阅读(1092)  评论(0编辑  收藏  举报