用例圖協助團隊說明人員與外部系統如何與系統所提供的功能互動。現在您可以在 Mermaid 中建立它們，並在 VPasCode 中預覽。這項新功能擴大了 VPasCode 的圖形即程式碼支援，並為您提供另一種以文字描述系統行為的方式，無需手動繪製每個元素。
已經使用 Mermaid 進行技術文件撰寫嗎？您現在可以將 VPasCode 用作Mermaid 圖形編輯器用於建立用例圖，與其他支援的圖形類型並列。如果您正在尋找一個免費的用例圖編輯器將 Mermaid 語法轉換為視覺圖形，請在VPasCode 編輯器.
新功能：Mermaid 用例圖
VPasCode 原本已支援以 PlantUML 撰寫的用例圖。透過此次更新，您現在也可以使用 Mermaid 的usecase-beta語法，此語法於 Mermaid 12.0.0 及之後版本提供。該語法用於表示參與者、用例、系統邊界，以及參與者與用例之間的關係。
此新增功能讓您更容易將用例模型與其他 Mermaid 圖形保持在相同的文字工作流程中。編輯原始碼、預覽渲染結果，並根據需求變更修訂圖形。
範例：ATM 系統用例圖
下方的範例顯示兩位參與者及其可存取之 ATM 功能。系統邊界將屬於 ATM 系統的用例分組。
usecase-beta
direction LR
actor User("使用者")
actor Technician("技術人員")
systemBoundary "ATM 系統"
Withdraw("提領現金")
Transfer("轉帳")
Deposit("存款")
SettleBills("結清帳單")
Repair("維修 ATM")
end
User --> Withdraw
User --> Transfer
User --> Deposit
User --> SettleBills
Technician --> Repair在此，actor宣告與系統互動的人員，每個具名稱的用例代表一項功能。systemBoundary將這些功能歸類於 ATM 系統之下。箭頭顯示每位參與者可存取的功能，而direction LR要求採用由左至右的版面配置。
為何使用 Mermaid 建立用例圖？
當您需要一個能隨需求、文件或程式碼輕鬆修訂的模型時，基於文字的圖形實為實用。您無需手動調整形狀位置，只需在原始碼中修改標籤、新增參與者或更新關係即可。這使得 Mermaid 不僅適用於早期設計討論，也能在系統演進時保持圖形的最新狀態。
使用案例圖可協助產品經理、業務分析師、開發人員、架構師及利害關係人建立對系統範圍的共同理解。它們能讓討論以下問題變得更加容易：
- 誰與系統互動？
- 系統提供哪些功能？
- 每個參與者可以使用哪些功能？
- 系統範圍的起點與終點分別在哪裡？
VPasCode：瀏覽器中的圖形即程式碼編輯器
VPasCode 是專為開發人員、架構師及技術團隊設計的線上圖形即程式碼平台。它能在編輯器與即時預覽中，將支援的文字式圖形語言與結構化資料轉換為視覺化圖形。其設計宗旨是讓使用者能輕鬆地在圖形原始碼與渲染結果之間切換。
要開始使用，請將圖形程式碼貼上或直接在編輯器中撰寫。VPasCode 會自動偵測支援的格式，因此您無需手動選擇語言。編輯時，預覽會即時更新，協助您發現變更並優化圖形。
除了 Mermaid，VPasCode 還支援 PlantUML 及其他圖形與視覺化格式，包括 D2、Graphviz、Markmap 與 ECharts。它亦支援結構化資料格式與程式語言。這使其成為團隊在多種記法下記錄系統時的單一工作區的理想選擇。
不僅僅是即時預覽
VPasCode 包含圖形渲染後使用的實用工具：
- 分享圖形：建立可分享的網址、產生 QR 碼，或透過支援的社群管道進行分享。
- 匯出影像：將圖形匯出為 SVG 或 PNG 格式，用於文件、簡報及其他資料。
- 使用 AI 修正語法：若已啟用相關進階功能，可使用「AI 自動修正」來修復語法錯誤，並檢視程式碼差異與變更說明。
- 翻譯圖形標籤：進階 AI 功能可直接在編輯器中將圖形文字翻譯成其他語言。
- 將圖形傳送至 OpenDocs：若已具備相關進階存取權限，可將圖形傳送至 Visual Paradigm OpenDocs，用於技術文件。
核心編輯、即時渲染、影像匯出與分享功能免費使用。AI 功能與 OpenDocs 整合則需透過符合資格的 Visual Paradigm 方案取得。如需了解更多關於此平台的資訊，請瀏覽 VPasCode 功能總覽.
在 VPasCode 中嘗試 Mermaid 使用案例圖
無論您是在規劃 ATM 服務、描述線上結帳流程，或是記錄軟體產品的參與者與功能，VPasCode 都能提供一個便捷的環境來撰寫與預覽您的圖形。可將其用作「免費的使用案例圖編輯器以支援 Mermaid 語法，或作為「Mermaid 圖形編輯器以實現更廣泛的圖形即程式碼工作流程。
開啟 VPasCode 並建立 Mermaid 使用案例圖. 若要進一步了解其支援的格式與功能，請參閱VPasCode 概覽.