技術標籤：我記得你的笑臉，午後陽光般的溫暖自然語言處理uml

願你如陽光，明媚不憂傷。

目録

• • 1. UML 概述
  • 2. 流程圖方向
  • 3. 流程圖形狀
  • 3. 流程圖箭頭連結
  • 4. 流程圖連結線長度
  • 5. 流程圖子圖
  • 6. 流程圖CSS樣式
  • 7. 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. 流程圖連結線長度

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"})
------------------------------------------------------