Diagrams as Code - UML
更新於 發佈於 閱讀時間約 3 分鐘
有時，一張圖片可能勝過千言萬語，善用圖表可以幫助我們更請楚地表達不同的資訊及概念。
- 當講述專案進度時，甘特圖是一個強大的工具。以條形圖呈現了時間軸、里程碑和任務，讓我們可以清晰地了解專案的時間安排和進度。
- 在討論需求時，Use Case 可以幫助我們確定不同的需求和角色，並定義系統的邊界。它描述了使用者和系統之間的互動，讓我們可以更好地理解系統的功能和行為。
- 而在說明一個功能的內部運作流程時，Sequence Diagram 展示了對象之間的交互，讓我們可以視覺化地理解系統內部的運作方式。
市面上許多的圖表工具可以選擇，如 Diagrams.net (以前稱為 Draw.io) 和 Miro 等，這些工具提供了圖形化介面和各種靈活性，方便我們創建和編輯不同類型的圖表。
除了傳統的圖表工具，有一種越來越受歡迎的方式是 diagrams-as-code。將圖表以代碼的形式儲存，並使用對應的引擎將代碼渲染成圖形。可將其放在版本控制系統中，便於文件化和版本管理。
依照我的需求要畫 UML 及在 GitHub or GitLab 可以直接顯示，選擇有 Mermaid 和 PlantUML
大致上來說，兩套工具各有優缺：
📍環境設定
- Mermaid 基於 JavaScript，可以輕鬆在本地環境或在 GitHub 上使用。
- PlantUML 基於 Java，需要在系統中安裝 Java Runtime Environment，並配置相應的環境變數。且 GitHub 並沒有直接支援，需要透過 rendering server 來渲染圖表
📍客製化
- PlantUML 提供了豐富的自定義選項，可以根據需要調整圖表的外觀和風格。
- Mermaid的客製化選項較少，對於特定需求可能不夠使用。
📍學習曲線
- Mermaid 簡單直觀的語法，容易上手
- PlantUML 社群和資源豐富，提供了許多範例、文件和資源
📍圖表種類
各有所長，基本的圖表雙方都有，如 Sequence diagram、Usecase diagram 等，但各自也有專屬的圖表，如 PlantUML 的 JSON Data，Mermaid 的 GitGraph。
📍美觀
這可能有點主觀，但 Mermaid 生成的圖表比較現代化一點，勝出
UML Diagrams in Markdown
一般來說一個專案或 repository 都會有一份 README.md 來做為指引，要是能將圖表直接放在指引中就不會打斷觀看的體驗
以 Mermaid 來說較為簡單，GitHub 在 2022 年開始支援 Mermaid [link]，直接在 code block 中使用 Mermaid syntax 就可以了。
而 PlantUML 並不能被直接解讀，所以這時我們需要一個 rendering server，剛好 PlantUML 有提供了一個 proxy server: http://www.plantuml.com/plantuml/proxy?src=<resource URL> ，再搭配已 commit 到 github 上的 plantmul 檔，就可以直接在 markdown 中顯示了
1會員
2內容數
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在現代專案管理中，工具的選擇與應用至關重要。兩個常見且有效的工具是同理心地圖和甘特圖。這兩者雖然功能不同，但相輔相成，能夠大幅提升專案的管理效率與成效。
這篇文章介紹如何使用 Mermaid Live 來生成一個展示學習效果因果迴圈圖（Causal Loop Diagram, CLD）。Mermaid 是一個簡單且強大的語法，可以用來創建各種類型的圖表，並提供了系統動力學原理和從YouTube影片旁摘取資訊的優點。
本文主要在討論以 Docs as Code 方法來撰寫技術文件，此做法能否滿足企業內部對知識管理的需求。
列出一套完整的程式
程式設計有許多種方法，不過通常會先列出清單的再逐一執行，這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後，將框架設計完了以後，先列出一套完整的程式，將所有使用者都確
系統的分析與規劃
在談到程式設計時，首要的是進行系統的分析與規劃。程式設計的起點通常是系統分析與規劃，這涉及到如何分析和設計系統的大原則和方向。為了達到預期效果，重要的是擁有對產業的清晰邏輯認識和深入了解。
進行深入了解
若要進行系統分析，必須對企業的設計和程式設計的對象進行深入了解，以充分理
替產業做設計
有人要我談程式設計，那我就稍微談一下。我從事的大都是產業的工作，所以我們也從如何替產業做設計來談起。基本上，每個產業都會有自己的作業流程，大同小異。但是基礎來做都是一樣的，都會有客戶、物料、產品、供應商、員工等資料。不同的是，由於企業型態的不同，他們每個人有不同的作業流程。這個作業流
圖形演算法在資料處理上扮演重要角色。本文介紹圖形的歷史、定義、技術用途，以及為什麼我們要關心圖形演算法。文末還提及圖形演算法在機器學習領域的應用。下次將介紹更詳細的圖形演算法內容。
草圖不只是紙上畫畫，它可以運用各種媒材和活動來展現概念，目的是快速獲得證據，證明設計概念的可行性，推進設計的演進。我們先快速展現設計概念，驗證它的可行性，才能避免後續花費太多成本在旁技末節上。
流程圖是流程中各個步驟的直覺表示，在我們的工作生活中都能用到流程圖。如果你是新手，想要學習如何繪製流程圖，那麽不妨看看下面的5個流程圖範例，包括泳道圖、樹狀圖、組織圖等，快速幫你熟悉流程圖。
什麼是PERT圖？有什麼用？高效專案管理方法幫你分析任務相依性、依賴性關係！視覺化圖表，一目了然專案任務所需的時間、資源和團隊成員職責分配，讓你不再擔心時間不夠或者資源浪費！3 大PERT圖製作工作推薦，讓你即刻開始一鍵生成自己的專案管理PERT圖！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在現代專案管理中，工具的選擇與應用至關重要。兩個常見且有效的工具是同理心地圖和甘特圖。這兩者雖然功能不同，但相輔相成，能夠大幅提升專案的管理效率與成效。
這篇文章介紹如何使用 Mermaid Live 來生成一個展示學習效果因果迴圈圖（Causal Loop Diagram, CLD）。Mermaid 是一個簡單且強大的語法，可以用來創建各種類型的圖表，並提供了系統動力學原理和從YouTube影片旁摘取資訊的優點。
本文主要在討論以 Docs as Code 方法來撰寫技術文件，此做法能否滿足企業內部對知識管理的需求。
列出一套完整的程式
程式設計有許多種方法，不過通常會先列出清單的再逐一執行，這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後，將框架設計完了以後，先列出一套完整的程式，將所有使用者都確
系統的分析與規劃
在談到程式設計時，首要的是進行系統的分析與規劃。程式設計的起點通常是系統分析與規劃，這涉及到如何分析和設計系統的大原則和方向。為了達到預期效果，重要的是擁有對產業的清晰邏輯認識和深入了解。
進行深入了解
若要進行系統分析，必須對企業的設計和程式設計的對象進行深入了解，以充分理
替產業做設計
有人要我談程式設計，那我就稍微談一下。我從事的大都是產業的工作，所以我們也從如何替產業做設計來談起。基本上，每個產業都會有自己的作業流程，大同小異。但是基礎來做都是一樣的，都會有客戶、物料、產品、供應商、員工等資料。不同的是，由於企業型態的不同，他們每個人有不同的作業流程。這個作業流
圖形演算法在資料處理上扮演重要角色。本文介紹圖形的歷史、定義、技術用途，以及為什麼我們要關心圖形演算法。文末還提及圖形演算法在機器學習領域的應用。下次將介紹更詳細的圖形演算法內容。
草圖不只是紙上畫畫，它可以運用各種媒材和活動來展現概念，目的是快速獲得證據，證明設計概念的可行性，推進設計的演進。我們先快速展現設計概念，驗證它的可行性，才能避免後續花費太多成本在旁技末節上。
流程圖是流程中各個步驟的直覺表示，在我們的工作生活中都能用到流程圖。如果你是新手，想要學習如何繪製流程圖，那麽不妨看看下面的5個流程圖範例，包括泳道圖、樹狀圖、組織圖等，快速幫你熟悉流程圖。
什麼是PERT圖？有什麼用？高效專案管理方法幫你分析任務相依性、依賴性關係！視覺化圖表，一目了然專案任務所需的時間、資源和團隊成員職責分配，讓你不再擔心時間不夠或者資源浪費！3 大PERT圖製作工作推薦，讓你即刻開始一鍵生成自己的專案管理PERT圖！