MarkDown进阶之Mermaid绘图

2023-02-03 2023-02-03 约 1129 字预计阅读 3 分钟 - 条评论

markdown基础用法: 参考MarkDown基础，请自行确认使用的markdown渲染是否支持mermaid渲染图形

一、整体结构

1
2


[图形类型及相关配置]
    [图形内容]

选项	描述
类型及相关配置	声明图形类型及其声明，例如`mermaid TB;`
图形内容	相关的图形内容文本

引入流程图的方式各有不同，原生使用 ```mermaid方式引入，而本站使用基于LoveIt主题的hugo引入方式为模板

二、流程图flowchart¹

2.1 基础

1
2


flowchart [流程图方向]
    [流程图内容]

1
2


flowchart LR
    A --> B

核心考虑内容：流程图方向、节点内容、节点形状和节点连接线

2.2 流程图方向²

标志	含义	解释
TB	top bottom	从上到下
BT	bottom top	从下到上
RL	right left	从右到左
LR	left right	从左到右
TD		等同于TB

2.3 节点内容

几何图形节点是流程图中的核心元素，其要素包括形状和内容。在 Mermaid 语法中，不加任何修饰的文字内容会被渲染成几何图形节点。

1
2


flowchart LR
    A[描述] --> B

2.4 节点形状

使用不同的符号标识不同形状

符号	形状
`[]`	矩形
`()`	圆角矩形
`>]`	不对称矩形
`{}`	棱形
`(())`	圆形

1
2
3
4
5
6


flowchart TD
    a1[带文本矩形]
    a2(带文本圆角矩形)
    a3>带文本不对称矩形]
    b1{带文本菱形}
    c1((带文本圆形))

2.5 节点连接线

连接线	描述
`---`	实现
`===`	加粗实现
`-.-`	虚号
`-->`	带箭头实现
`==>`	带箭头加粗实线
`-.->`	带箭头虚线
`--yes--`	实线备注
`==yes==`	加粗实线备注
`-.yes.-`	虚线备注
`--yes-->`	带箭头实线备注
`==yes==>`	带箭头加粗实线备注
`-.yes.->`	带箭头虚线备注

节点可任意指向一个或多个，每行声明一个节点指向

2.6 子视图

通过在节点内容中使用subgraph声明子流程图，该子流程图可视为一个普通节点使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

更多高级用法（连接线、形状、边框和事件等）参考官方：Flowchart

三、时序图³

时序图样例⁴，官方文档：Sequence Diagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

四、甘特图⁵

甘特图样例⁴，官方文档：Gantt

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d

五、类图⁶

官方文档：Class Diagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


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官网 mermaid.js.org

MarkDown进阶之Mermaid绘图

一、整体结构

二、流程图flowchart1

2.1 基础

2.2 流程图方向2