拓展閱讀
繪圖工具 draw.io / diagrams.net 免費在線圖表編輯器
UML
統一建模語言（UML）是一種標準的建模語言，用於可視化、指定、構造和文檔化軟件系統的各個方面。
常見的圖
用例圖（UseCase）
使用ASCII字符畫出用例圖是一種簡單的方式來表示系統的功能需求和用戶交互。
下面是一個簡單的用例圖示例，它展示了一個在線圖書館系統的幾個關鍵用例：
+-------------------+ +------------------------+
| 用戶 (User) | | 在線圖書館系統 |
| | | (Online Library System)|
+-------------------+ +------------------------+
| 搜索圖書 | | 登錄系統 |
|---------------->| |<------------------------|
| 查看圖書詳情 | | 瀏覽圖書列表 |
|---------------->| |<------------------------|
| 借閱圖書 | | 管理借閱記錄 |
|---------------->| |<------------------------|
| 歸還圖書 | | 查找推薦圖書 |
|---------------->| |<------------------------|
| 評價圖書 | | 管理個人賬戶 |
|---------------->| |<------------------------|
在這個例子中，我們定義了一個“用戶”角色，並且列出了幾個可能與在線圖書館系統交互的用例。
類關係圖（Class Relationship）
類關係圖（Class Diagram）是UML中用於展示系統中類之間關係的靜態結構圖。
在類關係圖中，我們通常展示類的屬性（attributes）和方法（methods），以及類之間的關聯（associations）、依賴（dependencies）、繼承（inheritance）和實現（realization）等關係。
下面是一個簡單的ASCII藝術表示的類關係圖示例，它展示了一個簡單的學校管理系統中的三個類：Student、Teacher和Course。
+----------------+ " 1 " +----------------+
| Student |----------| Teacher |
+----------------+ +----------------+
| - name | | - name |
| - age | | - subject |
| - id | +----------------+
| + enroll() | ^
| + attendClass()| |
+----------------+ |
^ " 0..* " |
| |
+----------------+ |
| Course |---------------+
+----------------+
| - name |
| - code |
| - description |
+----------------+
在這個例子中：
-
Student類與Teacher類之間有一個關聯關係，表示一個學生可以被一個教師指導（這裏用" 1 "表示學生端的關係強度，用" 0..* "表示教師端的關係強度，意味着一個教師可以指導多個學生）。 -
Student類與Course類之間有一個關聯關係，表示一個學生可以註冊多個課程（這裏用" 0..* "表示學生可以註冊從零到多個課程）。 -
Teacher類與Course類之間有一個關聯關係，表示一個教師可以教授多個課程（這裏同樣用" 0..* "表示教師可以教授從零到多個課程）。
請注意，ASCII藝術圖的複雜性可以根據你的需求進行調整。簡單的ASCII圖可以快速傳達基本的概念，但是它們通常不適合表示複雜系統的設計。
對於更復雜的設計，使用專業的UML工具來創建圖形化類關係圖會更加清晰和易於理解。
活動圖（Activity）
活動圖（Activity Diagram）是UML中用於描述業務流程或系統操作的工作流的一種圖形表示。它展示了活動的順序、決策點、並行處理以及合併點等。下面是一個簡單的ASCII藝術表示的活動圖示例，它展示了一個在線購物流程：
+-------------------+ +-------------------+
| 開始 (Start) | --> | 選擇商品 (Select) |
+-------------------+ +-------------------+
| |
V V
+-------------------+ +-------------------+
| 登錄賬戶 (Login) | | 添加到購物車 (Add) |
+-------------------+ +-------------------+
| |
V V
+-------------------+ +-------------------+
| 確認訂單 (Confirm)| --> | 選擇支付方式 (Pay) |
+-------------------+ +-------------------+
| |
+------------+------------+
|
V
+-------------------+
| 訂單完成 (Order Complete) |
+-------------------+
在這個例子中：
-
流程開始於“開始”節點，表示購物流程的啓動。
-
用戶首先需要“選擇商品”，然後可以選擇“登錄賬戶”以便進行後續操作。
-
登錄後，用戶可以選擇“添加到購物車”商品，或者直接“確認訂單”。
-
在“確認訂單”節點，用戶需要選擇一種“支付方式”來完成支付。
-
支付完成後，流程到達“訂單完成”節點，表示購物流程結束。
活動圖使用不同的形狀來表示不同類型的節點：
-
圓角矩形（如“選擇商品”、“登錄賬戶”等）表示活動的執行。
-
箭頭表示流程的流向。
-
菱形（如“確認訂單”）表示決策節點，通常包含條件邏輯。
-
並行條（在本例中未展示）表示活動可以同時進行。
-
結束節點（如“訂單完成”）表示流程的結束。
序列圖（Sequence）
它展示了一個簡單的客戶端-服務器通信場景：
+----------------+ +----------------+ +---------------+
| 客戶端 (Client) | --> | 服務器 (Server) | --> | 數據庫 (DB) |
+----------------+ +----------------+ +---------------+
| 請求數據 | | |
|----------------->| 處理請求 | |
| |<-- 驗證權限 | |
| |----------------->| 查詢數據 |
| | |<-- 返回結果 |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
在這個例子中：
-
客戶端發起請求，向服務器請求數據。
-
服務器接收到請求後，首先驗證客戶端的權限。
-
權限驗證通過後，服務器向數據庫發出查詢請求。
-
數據庫處理查詢請求，並將結果返回給服務器。
-
服務器接收到數據庫返回的結果後，將其發送回客戶端。
序列圖中的每個箭頭代表一個消息，消息的發送者和接收者分別位於箭頭的兩端。
箭頭的方向表示消息的流向，即從發送者到接收者。
對象之間的交互按照時間順序排列，垂直排列的對象表示它們在交互中的存在。
狀態圖（State chart）
狀態圖（State Diagram）是UML中用於描述系統或對象可能處於的各種狀態以及在接收到特定事件或條件滿足時狀態之間的轉換的一種圖形表示。
下面狀態圖示例展示了一個在線訂單的生命週期：
+-----------+
| 訂單創建 |
+-----------+
|
V
+-----------+
| 待支付 |
+-----------+
|
V
+-----------+
| 已支付 |
+-----------+
|
V
+-----------+
| 已發貨 |
+-----------+
|
V
+-----------+
| 已完成 |
+-----------+
在這個例子中，一個在線訂單的生命週期包括以下幾個狀態：
-
訂單創建：這是訂單的初始狀態。當用戶完成商品選擇並提交訂單時，訂單就處於此狀態。
-
待支付：在訂單創建之後，用戶需要支付訂單。在這個階段，訂單等待用戶的付款。
-
已支付：用戶完成支付後，訂單狀態更新爲已支付。此時，訂單正在處理中，準備發貨。
-
已發貨：訂單處理完成並且商品已經發出，訂單狀態變爲已發貨。用戶可以跟蹤物流信息。
-
已完成：當用戶收到商品，訂單生命週期結束，狀態變爲已完成。
狀態之間的轉換通常由事件觸發，例如，在“待支付”狀態下，用戶的支付行爲是一個事件，它會觸發狀態轉換到“已支付”狀態。
狀態圖使用箭頭來表示狀態轉換，箭頭的方向表示轉換的方向。
請注意，ASCII藝術圖的複雜性可以根據你的需求進行調整。簡單的ASCII圖可以快速傳達基本的概念，但是它們通常不適合表示複雜系統的設計。
對於更復雜的狀態機，使用專業的UML工具來創建圖形化狀態圖會更加清晰和易於理解。
組件圖（Component）
組件圖（Component Diagram）是UML中用於描述系統中軟件組件以及它們之間的關係的靜態結構圖。
組件通常是指代碼的封裝單元，如庫、模塊或包。
下面是一個簡單組件圖示例，它展示了一個簡單的文本編輯器應用程序的組件結構：
+--------------------------------------------------+
| 文本編輯器應用程序 (Text Editor Application) |
+--------------------------------------------------+
| | | |
V V V V
+------------+ +------------+ +------------+ +------------+
| 用戶界面 | | 文件管理 | | 編輯功能 | | 顯示組件 |
| (UI) | | (File Mgmt)| | (Editing) | | (Display) |
+------------+ +------------+ +------------+ +------------+
在這個例子中：
-
文本編輯器應用程序 是整個系統的邊界，包含了所有子組件。
-
用戶界面 (UI) 組件負責提供用戶交互的界面，如菜單、工具欄和編輯區域。
-
文件管理 (File Mgmt) 組件處理文件的打開、保存和其他文件操作。
-
編輯功能 (Editing) 組件實現文本編輯的核心功能，如剪切、複製、粘貼等。
-
顯示組件 (Display) 負責文本的顯示，包括文本渲染和屏幕更新。
組件之間的關係可以用箭頭或連接線表示，表示它們之間的依賴關係。
在這個例子中，組件之間的關係是隱含的，因爲它們都是文本編輯器應用程序的一部分，相互之間存在依賴關係。
部署圖（Deployment）
部署圖（Deployment Diagram）是UML中用於描述系統中軟件和硬件的配置以及它們之間的依賴關係的靜態結構圖。
部署圖展示了系統的物理部署，包括節點（如服務器、客戶端等）和它們的組件分佈。
下面是一個簡單的部署圖示例，它展示了一個簡單的Web應用程序的部署結構：
+--------------------------------------------------+
| Web服務器 (Web Server) |
| (Node A) |
+--------------------------------------------------+
| +--------+ +--------+ +--------+ +--------+ |
| | Web | | App | | DB | | Cache | |
| | Server | | Server | | Server | | (in- | |
| +--------+ +--------+ +--------+ | memory)| |
| | | | | | | | (for | |
| | | | | | | | hot | |
| | | | | | | | data | |
| | | | | | | | storage |
| | | | | | | +--------+ |
+--------------------------------------------------+
| | | |
| | | |
V V V V
+--------+ +--------+ +--------+ +--------+ +--------+
| 客戶端 | | 客戶端 | | 客戶端 | | 客戶端 | | 客戶端 | | 客戶端 |
| (Client)| | (Client)| | (Client)| | (Client)| | (Client)|
+--------+ +--------+ +--------+ +--------+ +--------+
在這個例子中：
-
Web服務器 (Web Server) 位於節點A，是部署圖的主要節點，它託管了Web應用程序的各個組件。
-
Web Server：負責處理客戶端請求和提供Web頁面。
-
App Server：運行應用程序邏輯和處理業務請求。
-
DB Server：存儲應用程序數據，處理數據庫查詢。
-
Cache (in-memory)：用於存儲熱點數據，提高應用程序性能。
-
-
客戶端 (Client) 表示多個客戶端設備，它們通過網絡與Web服務器進行交互。
部署圖中的節點通常用矩形框表示，組件用較小的矩形框嵌套在節點內表示。
節點之間的連接線表示它們之間的通信或依賴關係。
客戶端可以是物理設備，如個人電腦、手機等，也可以是其他網絡中的服務器。
序列圖
下面是一個使用 Markdown 格式編寫的簡單序列圖示例：
<uml>
下載->定義:
定義->使用:
</uml>
js-sequence-diagrams 能夠幫助你將文本轉換成UML序列圖。
而 flowchart 則是另一個工具。
-
下載
js-sequence-diagrams依賴於 Raphaël 和 Underscore.js。 -
定義
<uml> 標題: UML 測試 A->B: 正常線條 B-->C: 虛線 C->>D: 開放箭頭 D-->>A: 虛線開放箭頭 </uml> -
使用
- 導入js文件
<script src="raphael-min.js"></script> <script src="underscore-min.js"></script> <script src="sequence-diagram-min.js"></script>- 在jQuery中定義這個：
$("UML, uml").sequenceDiagram({theme: 'hand'});然後你可以看到：
標題: UML 測試 A->B: 正常線條 B-->C: 虛線 C->>D: 開放箭頭 D-->>A: 虛線開放箭頭