基于JS的Mermaid使用教程

关于流程图的绘制中有很多工具,比如微软的visio 或者 PowerPoint、贝尔的Graphviz、Lucidchart、OmniGraffle、Draw.io、processOn、Latex的tikZ;但是这种基于图形界面的操作往往会受限于人本身的不精确导致不好看。所以希望借助代码生成流程图来尽可能保持协调一致的美观。

0x01 使用教程

可以直接在Typora中使用,只需要输入即可

1
``` mermaid

什么是Mermaid,按照官网的定义是基于JavaScript的图表工具,可以渲染受markdown启发的文本定义,用于动态创建和修改图表。其基本的语法结构包括:

1
2
3
4
# Diagrams definitions begin with a declaration of the diagram type
# Define the blocks
# Link the blocks

erDiagram
          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
          CUSTOMER ||--o{ ORDER : places
          CUSTOMER ||--o{ INVOICE : "liable for"
          DELIVERY-ADDRESS ||--o{ ORDER : receives
          INVOICE ||--|{ ORDER : covers
          ORDER ||--|{ ORDER-ITEM : includes
          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"

常见的表格可以分为:流程图Flowchart、顺序图Sequence Diagram、类图Class Diagram、状态图State Diagram、实体关系图Entity Relationship Diagram、甘特图Gantt、饼图Pie chart、需求图Requirement Diagram、GitGraph、C4C图、思维导图Mindmaps、时间线Timelines

0x02 流程图 Flowchart

流程图由节点 (Nodes)、形状 (Edges)、箭头 (Arrows)和线条(Lines)组成,应用示例

flowchart 
	id1(This is the text in the node1)
	id2[This is the text in the node2]
	db1[(database)]
	id1 --> id2
	db1 --> id1
	
%% TB : top to bottom,TD
%% BT: bottom to top
%% RL: right to left
%% LR: left to right

flowchart LR
  subgraph BT[Define of the nodes]
      id1(圆角)
      id2([更大的圆角])
      id3[长方形]
      id4[(数据库)]
      id5((圆形))
      id6>what]
      id7{方形}
      id8{{角}}
      id10[\梯形 Trapezoid alt/]
 	end
 	
 	subgraph LR[define of the linkes]
 	   id11[node1]
 	   id12[node2]
 	   id11 --> id12
 	   id11 --- id12
 	   id11 -- Text ---id12
 	   id11 ---|Text|id12
 	   id11-->|Text|id12
 	   id11 -.-> id12
 	   id11 -. text .-> id12
 	   A == text ==> id12
 	   a -->b & c-->d
 	end
 	
 	subgraph LR
 		B[start]
 		C{Is it?}
 		B -->|yes|C
 		C-->D[rethink]
 		D-->B
 		B-->|No|E[End]
 		E[perhaps?]
 		
 		
 	end
	

0x03 时序图 Sequence diagrams

时序图表示用户之间相互交流的过程的图表,其中的语法主要包括:参与者(Participant)、演员(Actor)、别名(Alias)、分组(Group and box)、信息(Arrows and lines)、激活(Activate)、备注(Notes)、循环(Loop)

sequenceDiagram 
 	participant A as Alice
    participant B as Bob
    participant J as John
	A->>B:hello John
	B->>J:Great!
1
2
3
4
5
6
7
8
9
[Actor][Arrow][Actor]:Message Text
-> 实线
--> 没有箭头的点画线
->> 箭头线
-->> 箭头点画线
-X corss
--X 点线带cross
-)
--)

sequenceDiagram
    Alice->John: Hello John, how are you?
    activate John
    loop Every minute
        John-->Alice: Great!
    end
    deactivate John

初次之外顺序图还需要表示一些基本的逻辑概念,比如激活(Activate)、循环(Loop)、替代(Alt)、平行(Par)、关键区域(Critical)、Break、高亮显示(Rect)

sequenceDiagram
    participant Alice
    participant John

    rect rgb(191, 223, 255)
    note right of Alice: Alice calls John.
    Alice->>+John: Hello John, how are you?
    rect rgb(200, 150, 255)
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    end
    John-->>-Alice: I feel great!
    end
    Alice ->>+ John: Did you want to go to the game tonight?
    John -->>- Alice: Yeah! See you there.


sequenceDiagram
	participant C as Client
	participant S as Server
	autonumber
	note left of C: 选择初始seq number=x<br/>发送客户端的TCP SYN段
	C->>S:SYNbit=1,Seq=X
	note right of S:选择初始seq number=y<br/>发送服务端TCP SYN信息<br/>利用SYN+1作为回复
	S->>C:SYNbit=1,Seq=Y<br/>ACKbit=1,ACKnum=x+1
	note left of C:收到SYNACK(x),确认服务器存在<br/>发送ACK回复SYNACK<br/>不包含client-to-server数据
	C->>S:ACKbit=1,ACKnum=y+1
	note right of S:收到 ACK(y)<br/>确认用户存在
		

https://zhuanlan.zhihu.com/p/53374516

0x04 GitGraph

gitGraph
	commit id: "Set up folder"
	branch release
	branch development
	checkout development
	commit
	branch feature01
	commit id:"feature1 add"
	commit id:"feature1 add2"
	checkout development
	branch feature02
	commit id:"fixed feature2"
	checkout development
	merge feature02
	commit id:"feature1 add3"
	checkout development
	merge feature01
	commit
	checkout main
	merge development tag:"Beta1.0"
	checkout release
	merge main tag:"V1.0"


基于JS的Mermaid使用教程
https://blog.tjdata.site/posts/3be9bc5f.html
作者
chenxia
发布于
2023年5月16日
许可协议