【MERMAID】UML 统一建模语言 —— 流程图（Flowchart）

 
愿你如阳光，明媚不忧伤。

 

---

1. UML 概述

UML （Unified Modeling Language）统一建模语言，是一种为面向对象系统的产品进行说明、可视化和编制文档的一种标准语言，是非专利的第三代建模和规约语言，独立于任何具体程序设计语言。UML立足于对事物的实体、性质、关系、结构、状态和动态变化过程的全程描述和反映，可以从不同角度描述人们所观察到的软件视图，也可以描述在不同开发阶段中的软件形态。采用一组图形符号来描述软件模型，这些图形符号具有简单、直观和规范的特点，开发人员学习和掌握起来比较简单。所描述的软件模型，可以直观地理解和阅读，由于具有规范性，所以能够保证模型的准确、一致。

 

---

2. 流程图方向

------------------------------------------------------	
・【语法】
	TB - top to bottom
	TD - top-down / same as top to bottom
	BT - bottom to top
	RL - right to left
	LR - left to right
------------------------------------------------------	
・【示例】
	graph LR
	    Start --> Stop
------------------------------------------------------	

 

---

3. 流程图形状

------------------------------------------------------	
・【语法】
	Element[Rectangle]			矩形
	Element(Rounded rectangle)	圆角矩形
	Element([Oval])				椭圆
	Element[[Subroutine]]		子程序
	Element[(Cylindrical)]		圆柱形
	Element((Circle))			圆形
	Element>Asymmetric]			不对称图形
	Element{Rhombus}			菱形
	Element{{Hexagon}}			六边形
	Element[/Parallelogram/]	平行四边形
	Element[\Parallelogram\]	平行四边形
	Element[/Trapezoid\]		梯形
	Element[\Trapezoid/]		梯形
------------------------------------------------------	
・【示例】
	graph LR
	Element1 --> Element2 --> Element3 --> Element4 --> Element5
	Element6 --> Element7 --> Element8 --> Element9 --> Element10
	Element6 --> Element11
	Element8 --> Element12
	Element10 --> Element13
	Element1[Rectangle]	
	Element2(Rounded rectangle)
	Element3([Oval])
	Element4[[Subroutine]]	
	Element5[(Cylindrical)]	
	Element6((Circle))	
	Element7>Asymmetric]	
	Element8{Rhombus}
	Element9{{Hexagon}}
	Element10[/Parallelogram/]	
	Element11[\Parallelogram\]	
	Element12[/Trapezoid\]
	Element13[\Trapezoid/]
------------------------------------------------------	

 

---

3. 流程图箭头链接

------------------------------------------------------	
・【语法】
A --- B			实线
A --> B			实线箭头
A ==> B			加粗实线箭头
A -.-> B		虚线箭头

A --o B			单实心圆
A --x B			单×
A o--o B		双实心圆
A <--> B		双箭头
A x--x B		双×

A -- This is the text! --- B	实线文字
A -- text --> B					实线箭头文字
A == text ==> B					加粗实线箭头文字
A -. text .-> B					虚线箭头文字

A -- text --> B -- text2 --> C	连续链接
A --> B & C--> D				一对多合并链接
A & B --> C & D					多对多合并链接
------------------------------------------------------	
・【示例】
graph LR
	Element1 --- Element2 --> Element3 ==> Element4 -.-> Element5
	Element6 -- This is the text! --- Element7-- text --> Element8 == text ==> Element9 -. text .-> Element10
	Element11 -- text --> Element12 -- text --> Element13
	A --> B & C--> D
	E & F --> G & H	
	
	Element1[Rectangle]	
	Element2(Rounded rectangle)
	Element3([Oval])
	Element4[[Subroutine]]	
	Element5[(Cylindrical)]	
	Element6((Circle))	
	Element7>Asymmetric]	
	Element8{Rhombus}
	Element9{{Hexagon}}
	Element10[/Parallelogram/]	
	Element11[\Parallelogram\]	
	Element12[/Trapezoid\]
	Element13[\Trapezoid/]
------------------------------------------------------	

 

---

4. 流程图链接线长度

长度	1	2	3
实线	---	----	-----
实线带箭头	-->	--->	---->
加粗	===	====	=====
加粗箭头	==>	===>	====>
虚线	-.-	-..-	-...-
虚线箭头	-.->	-..->	-...->

 

---

5. 流程图子图

------------------------------------------------------	
・【示例】
graph LR
	c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
------------------------------------------------------	

 

---

6. 流程图CSS样式

------------------------------------------------------	
・【语法】
	fill:#bbf				背景色
	stroke:#f66				边框色	
	stroke-width:2px		边框宽度
	color:#fff				字体颜色
	/*
	 一个参数时： 其实是表示虚线长度和每段虚线之间的间距 
	如：stroke-dasharray = '10' 表示：虚线长10，间距10，然后重复 虚线长10，间距10
	*/
	/* 
	两个参数或者多个参数时：一个表示长度，一个表示间距
	如：stroke-dasharray = '10, 5' 表示：虚线长10，间距5，然后重复 虚线长10，间距5
　　如：stroke-dasharray = '20, 10, 5' 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环
　　*/
	stroke-dasharray: 5 5	创建虚线-间隔
	stroke-dashoffset:3		起始偏移（可为负）
------------------------------------------------------	
・【示例】
graph LR
	A(Start)-->B(Stop)
    style B fill:#bbf,stroke:#f66,stroke-width:2px,color:green,stroke-dasharray: 5 2 7,stroke-dashoffset:-3
------------------------------------------------------	

 

---

7. Flowchart

------------------------------------------------------	
・【语法】
	st=>start: desc 				开始
	e=>end: desc					结束
	op1=>operation: desc 			程序处理
	sub1=>subroutine: desc  		子程序
	cond1=>condition: desc 			条件判断
	io1=>inputoutput: desc			输入/输出
------------------------------------------------------	
・【示例】
flowchat
	st=>start: 开始:>https://youtu.be/YQryHo1iHb8[blank]
	e=>end: 结束
	op1=>operation: 程序处理
	sub1=>subroutine: 子程序
	cond1=>condition: 条件判断
	io1=>inputoutput: 输入/输出
	
	st->op1->sub1->cond1(yes)->io1->e
	cond1(no)->sub1
	cond1(no)@>sub1({"stroke":"Red"})
------------------------------------------------------