源：http://ju.outofmemory.cn/entry/105721
Markdown是網絡書寫語言，特別適合程序員書寫文檔：
- 全文本格式，方便進行
diff，patch和版本的管理； - 格式直觀，簡單易學，便於書寫和閱讀；
- 兼容 HTML，能方便地轉換為 pdf，doc等格式；
- 支持 Linux，Windows，Mac；
- 支持內嵌代碼和語法高亮；
估計只是方便版本管理，就能吸引很多程序員的興趣，特別是需要團隊一起參與書寫文檔的時候。感興趣的可以參考官方網站，或者以前寫的一份使用 Markdown 的 slides。
但是畢竟Markdown只是書寫語言，不是程序設計語言，如果我們需要嵌入 UML 的時候，不可避免地需要其他專業軟件的支持。這里介紹幾種利用網絡服務，可以直接在Markdown文檔中嵌入的 UML 建模圖：
用例圖
-
角色(Actor)
使用
[角色名]表示角色。<img src="http://yuml.me/diagram/scruffy/usecase/[Customer]" >
-
用例(Use Case)
使用
(用例名)表示用例，-表示角色和用例之間的關聯。<img src="http://yuml.me/diagram/scruffy/usecase/[Customer]-(Login),[Customer]-(Logout)" >
-
備注(Notes)
如果用例名以
note:開頭，表明那是一個備注，可以用{bg:顏色名}定義備注的背景色。<img src="http://yuml.me/diagram/scruffy/usecase/[Customer]-(Login), [Customer]-(note: Cust can be registered or not{bg:beige})" >
-
角色繼承(Actor Inheritance)
使用符號
^表示角色之間的繼承關系。<img src="http://yuml.me/diagram/scruffy/usecase/[Cms Admin]^[User], [Customer]^[User], [Agent]^[User]" >
-
擴展和包含(Extends and Includes)
使用
>表示用例之間的包含關系，<表示用例的擴展。<img src="http://yuml.me/diagram/scruffy/usecase/(Login)<(Register),(Login)<(Request Password Reminder),(Register)>(Confirm Registration)" >
-
完整示例
<img src="http://yuml.me/diagram/nofunky/usecase/(note: figure 1.2{bg:beige}), [User]-(Login),[Site Maintainer]-(Add User),(Add User)<(Add Company),[Site Maintainer]-(Upload Docs),(Upload Docs)<(Manage Folders),[User]-(Upload Docs), [User]-(Full Text Search Docs), (Full Text Search Docs)>(Preview Doc),(Full Text Search Docs)>(Download Docs), [User]-(Browse Docs), (Browse Docs)>(Preview Doc), (Download Docs), [Site Maintainer]-(Post New Event To The Web Site), [User]-(View Events)" >
YUML支持3種圖示風格，分別是：
- plain
- scruffy
- boring
你可以對比下列圖示的不同風格：
活動圖
-
動作(Action)
用
(狀態名)表示一個狀態，其中(start)和(end)分別表示開始狀態和結束狀態，箭頭->表示狀態的轉換。<img src="http://yuml.me/diagram/nofunky/activity/(start)->(Boil Kettle)->(end)" >
-
判斷和限制(Decisions and Constraints)
使用
<判斷名>表示一個條件判斷，其后跟[條件]->表示滿足條件后狀態的轉換；用不同的判斷名來標識不同的判定位置。<img src="http://yuml.me/diagram/nofunky/activity/(start)-><a>[kettle empty]->(Fill Kettle)->(Boil Kettle),<a>[kettle full]->(Boil Kettle)->(end)" >
-
分支合並(Fork/Join)
使用
||表示分支或者合並點。<img src="http://yuml.me/diagram/nofunky/activity/(start)-><a>[kettle empty]->(Fill Kettle)->|b|,<a>[kettle full]->|b|->(Boil Kettle)->|c|,|b|->(Add Tea Bag)->(Add Milk)->|c|->(Pour Water)->(end),(Pour Water)->(end)" >
-
對象(Objects)
符號
[]表示一個對象。<img src="http://yuml.me/diagram/nofunky/activity/(start)->[Water]->(Fill Kettle)->(end)" >
-
連接器名稱(Connector Name)
在
->中加入名稱，-名稱>表示命名連接器。<img src="http://yuml.me/diagram/nofunky/activity/(start)-fill>(Fill Kettle)->(end)" >
類圖
-
關聯(Association)
類名用
[]表示，->表示定向關聯，-表明關聯。<img src="http://yuml.me/diagram/nofunky/class/[Customer]->[Billing Address]" >
-
基數(Cardinality)
基數-基數>表明關聯的基數，其中基數可以為0，1，0..*，*等任意定義的值。<img src="http://yuml.me/diagram/nofunky/class/[Customer]1-0..*[Address]" >
-
定向關聯(Directional Association)
定向關聯
->可以定義名稱：-名稱>。<img src="http://yuml.me/diagram/nofunky/class/[Order]-billing >[Address], [Order]-shipping >[Address]" >
-
顏色和UTF8字符(Splash of Colour And UTF-8)
類圖可以用
{bg:顏色名}定義顯示的背景顏色。<img src="http://yuml.me/diagram/nofunky/class/[❝Customer❞{bg:orange}]❶- ☂>[Order{bg:green}]" >
-
聚合(Aggregation)
聚合表示比關聯更強的關聯關系，使用
<>->或者+->來表示。<img src="http://yuml.me/diagram/nofunky/class/[Company]<>-1>[Location], [Location]+->[Point]" >
-
組成(Composition)
組成表示比聚合更強的關聯關系，使用
++->來表示。<img src="http://yuml.me/diagram/nofunky/class/[Company]++-1>[Location]" >
-
備注(Notes)
使用
[note:注解內容]表示備注，同樣備注可以自定義顏色{bg:顏色名}。<img src="http://yuml.me/diagram/nofunky/class/[Customer]<>1->*[Order], [Customer]-[note: Aggregate Root{bg:cornsilk}]" >
-
繼承(Inheritance)
使用
^-表示類的繼承，右邊的類是子類。<img src="http://yuml.me/diagram/nofunky/class/[Wages]^-[Salaried], [Wages]^-[Contractor]" >
-
接口繼承(Interface Inheritance)
接口繼承用
^-.-來表示。<img src="http://yuml.me/diagram/nofunky/class/[<<ITask>>]^-.-[NightlyBillingTask]" >
-
依賴(Dependencies)
類的依賴用
-.->來表示，依賴是最弱的關聯關系，一般用來表示類方法的參數或者實現用到了依賴類。<img src="http://yuml.me/diagram/nofunky/class/[HttpContext]uses -.->[Response]" >
-
接口(Interface)
和類名相比，接口的名稱一般包含在
<<>>中。<img src="http://yuml.me/diagram/nofunky/class/[<<IDisposable>>;Session]" >
-
類定義(Class with Details)
可以在類符號
[]中定義類的所有成員。使用|表示類名與類成員變量和成員函數的分割符，不同的成員之間用;隔開，使用+，-分別表示公開和私有成員。<img src="http://yuml.me/diagram/nofunky/class/[User|+Forename+;Surname;+HashedPassword;-Salt|+Login();+Logout()]" >
-
完整的示例
<img src="http://yuml.me/diagram/nofunky/class/[note: You can stick notes on diagrams too!{bg:cornsilk}],[Customer]<>1-orders 0..*>[Order], [Order]++*-*>[LineItem], [Order]-1>[DeliveryMethod], [Order]*-*>[Product], [Category]<->[Product], [DeliveryMethod]^[National], [DeliveryMethod]^[International]" >
時序圖
首先在文件頭加入如下 javascript 文件：
<script type="text/javascript" src="http://www.websequencediagrams.com/service.js"></script>-
同步/異步/返回消息(Synchronous/Asynchronous/Return Message)
一般使用實心箭頭
->表示同步消息或調用，開箭頭->>表示異步消息或調用，虛箭頭-->或-->>表示返回消息。<div class=wsd wsd_style="rose" ><pre> # This is a comment. Alice->Bob: Filled arrow Alice->>Bob: Open arrow Bob-->Alice: Dotted line Bob-->>Alice: Dotted Line, open arrow </pre></div># This is a comment. Alice->Bob: Filled arrow Alice->>Bob: Open arrow Bob—>Alice: Dotted line Bob—>>Alice: Dotted Line, open arrow -
定義參與者的順序
通過
participant可以定義角色在時序圖中的顯示順序，而不是按照缺省的參與者被使用順序來顯示。並且可以定義參與者的別名。<div class=wsd wsd_style="rose" ><pre> participant Bob participant Alice participant "I have a really\nlong name" as L # Alice->Bob: Authentication Request Bob->Alice: Authentication Response Bob->L: Log transaction </pre></div>participant Bob participant Alice participant “I have a really\nlong name” as L # Alice->Bob: Authentication Request Bob->Alice: Authentication Response Bob->L: Log transaction -
自關聯消息(Self-Message)
參與者可以發送一個消息給自己。你可以用
\n將文字切分成多行。<div class=wsd wsd_style="rose" ><pre> Alice->Alice: This is a signal to self.\nIt also demonstrates \nmultiline \ntext. </pre></div>Alice->Alice: This is a signal to self.\nIt also demonstrates \nmultiline \ntext. -
分組消息
通過
alt/else，opt和loop，將消息分組，組頭顯示分組定義的文本信息，end關鍵字用來結束一個分組。分組可以嵌套。<div class=wsd wsd_style="rose" ><pre> Alice->Bob: Authentication Request alt successful case Bob->Alice: Authentication Accepted else some kind of failure Bob->Alice: Authentication Failure opt loop 1000 times Alice->Bob: DNS Attack end end else Another type of failure Bob->Alice: Please repeat end </pre></div>Alice->Bob: Authentication Request alt successful case Bob->Alice: Authentication Accepted else some kind of failure Bob->Alice: Authentication Failure opt loop 1000 times Alice->Bob: DNS Attack end end else Another type of failure Bob->Alice: Please repeat end -
備注(Notes)
使用
note left of，note right of和note over分別定義左/右/中顯示的備注，可以包含多行，end note用來結束該段note。<div class=wsd wsd_style="rose" ><pre> participant Alice participant Bob # note left of Alice This is displayed left of Alice. end note note right of Alice: This is displayed right of Alice. note over Alice: This is displayed over Alice. note over Alice, Bob: This is displayed over Bob and Alice. </pre></div>participant Alice participant Bob # note left of Alice This is displayed left of Alice. end note note right of Alice: This is displayed right of Alice. note over Alice: This is displayed over Alice. note over Alice, Bob: This is displayed over Bob and Alice. -
生命線的激活和終止(Activation/Destruction)
+來表示激活被發送者，-表示終止發送者。destroy關鍵字可以將銷毀該參與者。<div class=wsd wsd_style="rose" ><pre> User->+A: DoWork A->+B: <<createRequest>> B->+C: DoWork C-->B: WorkDone destroy C B-->-A: RequestCreated A->User: Done </pre></div>User->+A: DoWork A->+B: <> B->+C: DoWork C—>B: WorkDone destroy C B—>-A: RequestCreated A->User: Done -