mermaid 语法

other
字数统计: 1.4k   |   阅读时长≈ 6 分钟

mermaid 语法

官网地址:http://knsv.github.io/mermaid/index.html

1、图

例如从左到右的一个有向图

1
2
3
4
5
6
7
8
9
graph LR;
A[aa bb]-->B(wo);
A-->C((我是C));
B-->D>我是D];
C-->D;
D-->E{我是E};
C-->E;
2-->E;
_-->E;

img

  1. 第一行的graph LR中graph指定是一个图，第二个LR指定图的方向，所有的方向关键词为:
    • TB - top bottom
    • BT - bottom top
    • RL - right left
    • LR - left right
    • TD - same as TB
  2. 之后的A,B,C等都是节点的标识（标识中不能使用空格）
  3. 节点默认只显示标识,但也可以通过如下方法控制其显示
    • A[aa bb] 显示字符串aa bb的方框
    • B(wo) 显示字符串wo的圆角框
    • C((我是C)) 显示我是C字符串的圆圈
    • D>我是D] 显示我是D的半方框
    • E{我是E} 显示我是E的正方形框
  4. 连线可以选择如下形式:
    • A-->B 箭头
    • A--B 无箭头线
    • A--hh dd--B或者A--|hh dd|B 线之间可以添加注释
    • A-.->B 虚线箭头
    • A-. hh .->B 添加了注释的虚线箭头
    • A==>B 加粗的箭头
    • A== hh ==>B 加注释加粗的箭头
  5. 子图可以使用subgraph id定义
1
2
3
4
5
6
7
8
9
10
11
graph TB
         subgraph one
         a1-->a2
         end
         subgraph two
         b1-->b2
         end
         subgraph three
         c1-->c2
         end
         c1-->a2

img

  1. 使用如下语法给节点添加点击行为
1
click nodeId callback

callback是javascript回调函数

  1. 修改节点的显示样式
1
2
3
4
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px;
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;

img

或者使用如下方式修改class

1
2
3
class nodeId1 className;
class nodeId1,nodeId2 className;
classDef default fill:#f9f,stroke:#333,stroke-width:4px;

2、时序图

如下是一个基本的时序图

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!

img

  1. 时序图使用sequenceDiagram关键词声明
  2. 参与者使用participant声明
  3. 消息声明是使用[参与者][发送方式][参与者]:消息内容形式声明
    发送方式有如下几种:
    • -> 无箭头的线
    • --> 无箭头的虚线
    • ->> 有箭头的实线
    • -->> 有箭头虚线
    • -x 有十字叉的实线
    • --x 有十字叉的虚线
  4. 可以通过ote right of [参与者]: 信息的方式添加备注(多行信息请使用<br/>)
  5. 添加循环
1
2
3
loop Loop text
... statements ...
end
  1. 添加判断使用如下语法
    有选择的:
1
2
3
4
5
alt Describing text
... statements ...
else
... statements ...
end

确定的:

1
2
3
opt Describing text
... statements ...
end

示例:

1
2
3
4
5
6
7
8
9
10
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

img

3、甘特图

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        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

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h

img

  1. 使用关键词gantt声明甘特图
  2. 使用关键词title声明标题
  3. 使用关键词section声明板块
  4. 板块后是任务的名称，任务类型，开始时间，持续时间等

时间参数

参数 示例 含义
YYYY 2014 4 digit year
YY 14 2 digit year
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM January..Dec Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp
H HH 0..23 24 hour time
h hh 1..12 12 hour time used with a A.
a A am pm Post or ante meridiem
m mm 0..59 Minutes
s ss 0..59 Seconds
S 0..9 Tenths of a second
SS 0..99 Hundreds of a second
SSS 0..999 Thousandths of a second
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z

4、类图

同样先来一个示例

img

类图是用来描述类属性、方法以及类指向问题的工具，通过类图可以直观的了解类有哪些属性、哪些方法，遵循怎样的关系（继承、组合……）。类图由三部分构成，顶部区域是类的名称、中间区域是类的属性、底部区域是类的方法。

4.1、类定义

定义一个类有三种方法，隐式定义、使用:定义、使用{}定义

1
2
3
4
%% 隐式定义
classDiagram
    class Animal
    Vehicle <|-- Car
1
2
3
4
5
6
7
%% 使用 : 定义
classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +BigDecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawal(amount)
1
2
3
4
5
6
7
8
%% 使用{}定义
classDiagram
	class BankAccount{
  		+String owner
  		+BigDecimal balance
  		+deposit(amount) bool
  		+withdrawl(amount)
	}

img

4.2、方法*

类的属性和方法通过判断()是否存在加以区分

1
2
3
4
5
6
7
classDiagram
	class BankAccount{
  		+String owner	%% 属性
  		+BigDecimal balance
  		+deposit(amount) bool	%% 方法 bool返回类型
  		+withdrawl(amount)	%% 方法 参数为amount
	}

img

4.3、类间关系

类间关系有继承、实现、组合、依赖等，在类图中以连接形式的不同加以区分。

[公式]

img

4.4、类注释

类注释使用<<>>定义，注释放在尖括号中间，用于指示类的性质，有如下四种性质

[公式]

类注释的定义方法有两种，单独定义或者与类定义一起放在嵌套结构{}中

单独定义

1
2
3
classDiagram
	class Shape
	<<interface>> shape

嵌套定义

1
2
3
4
5
6
7
8
9
10
11
12
classDiagram
	class Shape{
		<<interface>>
		noOfVertices
		draw()
	}
	
	class Color{
		<<enumeration>>
		RED
		BLUE
	}

img

  • Copyrights © 2022-2023 hqz

请我喝杯咖啡吧~

支付宝
微信