擴充閱讀
常見免費開源繪圖工具
OmniGraffle 建立精確、美觀圖形的工具
UML-架構圖入門介紹 starUML
UML 繪製工具 starUML 入門介紹
PlantUML 是繪製 uml 的一個開源專案
UML 等常見圖繪製工具
繪圖工具 draw.io / diagrams.net 免費線上圖表編輯器
繪圖工具 excalidraw 介紹
繪圖工具 GoJS 介紹 繪圖 js
原型設計工具介紹-01-moqups 介紹
常見原型設計工具介紹
UML
統一建模語言（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: 虛線開放箭頭