Diagrams as Code - UML

更新於 發佈於 閱讀時間約 4 分鐘
raw-image

有時,一張圖片可能勝過千言萬語,善用圖表可以幫助我們更請楚地表達不同的資訊及概念。

  • 當講述專案進度時,甘特圖是一個強大的工具。以條形圖呈現了時間軸、里程碑和任務,讓我們可以清晰地了解專案的時間安排和進度。
  • 在討論需求時,Use Case 可以幫助我們確定不同的需求和角色,並定義系統的邊界。它描述了使用者和系統之間的互動,讓我們可以更好地理解系統的功能和行為。
  • 而在說明一個功能的內部運作流程時,Sequence Diagram 展示了對象之間的交互,讓我們可以視覺化地理解系統內部的運作方式。


市面上許多的圖表工具可以選擇,如 Diagrams.net (以前稱為 Draw.io) 和 Miro 等,這些工具提供了圖形化介面和各種靈活性,方便我們創建和編輯不同類型的圖表。

raw-image
raw-image

除了傳統的圖表工具,有一種越來越受歡迎的方式是 diagrams-as-code。將圖表以代碼的形式儲存,並使用對應的引擎將代碼渲染成圖形。可將其放在版本控制系統中,便於文件化和版本管理。

raw-image


依照我的需求要畫 UML 及在 GitHub or GitLab 可以直接顯示,選擇有 Mermaid 和 PlantUML


raw-image


大致上來說,兩套工具各有優缺:

📍環境設定

  • 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 中顯示了

以下為範例:UML in Markdowm - Dexiang GitHub





留言
avatar-img
留言分享你的想法!
avatar-img
Tony的沙龍
1會員
2內容數
你可能也想看
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
在網路上查找可以發現有很多類別圖的 6 種關係的說明與示例,通常不太容易難取得共鳴。主要有兩個原因: 1. 對於這些關係線的定義混淆,導致無法判斷滿足條件與使用時機 2. 缺少生活相關的具體案例,很難理解這些關係所對應的抽象概念
Thumbnail
在網路上查找可以發現有很多類別圖的 6 種關係的說明與示例,通常不太容易難取得共鳴。主要有兩個原因: 1. 對於這些關係線的定義混淆,導致無法判斷滿足條件與使用時機 2. 缺少生活相關的具體案例,很難理解這些關係所對應的抽象概念
Thumbnail
Notion 是一個功能強大且多功能的協作工具。透過在 Notion 使用 Mermaid 語法繪製流程圖,可以有效地以視覺化的方式呈現流程和流程間的關係。此外,流程圖是一種圖形表示方式,用於展示任務、流程或系統中的步驟和相互關係,有助於優化複雜的流程,從而幫助我們檢視和改進流程效率。
Thumbnail
Notion 是一個功能強大且多功能的協作工具。透過在 Notion 使用 Mermaid 語法繪製流程圖,可以有效地以視覺化的方式呈現流程和流程間的關係。此外,流程圖是一種圖形表示方式,用於展示任務、流程或系統中的步驟和相互關係,有助於優化複雜的流程,從而幫助我們檢視和改進流程效率。
Thumbnail
Notion 是一個功能強大且多功能的協作工具,透過在 Notion 使用 Mermaid 語法繪製甘特圖,可以有效地視覺化學習進度和目標完成情況,從而提升工作效率和學習成果的管理。現在,我們將開始學習在 Notion 上繪製甘特圖,以組織學習進度並促進團隊之間的協作。立即踏上這個專業的學習旅程吧!
Thumbnail
Notion 是一個功能強大且多功能的協作工具,透過在 Notion 使用 Mermaid 語法繪製甘特圖,可以有效地視覺化學習進度和目標完成情況,從而提升工作效率和學習成果的管理。現在,我們將開始學習在 Notion 上繪製甘特圖,以組織學習進度並促進團隊之間的協作。立即踏上這個專業的學習旅程吧!
Thumbnail
Diagrams as Code 有時,一張圖片可能勝過千言萬語。 在討論需求時,Use Case 可以讓我們知道有那些需求,有哪些腳色,系統邊界在哪裡。 Mermaid 和 PlantUML 能幫助我們達成,那又該怎麼選擇呢
Thumbnail
Diagrams as Code 有時,一張圖片可能勝過千言萬語。 在討論需求時,Use Case 可以讓我們知道有那些需求,有哪些腳色,系統邊界在哪裡。 Mermaid 和 PlantUML 能幫助我們達成,那又該怎麼選擇呢
Thumbnail
這邊要來跟大家分享流程圖是什麼?它很重要嗎? 一、什麼是流程圖?   它可以幫我們簡化密密麻麻的程式,用圖表來說明這支程式運行的來龍去脈,包含著流程的步驟、決策、輸出/輸入的相關過程。   當我們在製作程式過程中,可以協助我們紀錄、規劃流程、甚至是介紹程式或未來自己要看的時候,流程圖就可以派上用場
Thumbnail
這邊要來跟大家分享流程圖是什麼?它很重要嗎? 一、什麼是流程圖?   它可以幫我們簡化密密麻麻的程式,用圖表來說明這支程式運行的來龍去脈,包含著流程的步驟、決策、輸出/輸入的相關過程。   當我們在製作程式過程中,可以協助我們紀錄、規劃流程、甚至是介紹程式或未來自己要看的時候,流程圖就可以派上用場
Thumbnail
知識圖解是一個非常實用的技能,但不是很好掌握。這篇文章分享由軟體架構師 Simon Brown 提出的 C4 模型,可以很好地讓圖解變的「見樹又見林」,最後我還會分享在軟體業之外的應用。如果你是需要在工作場合中思考與溝通複雜事物的人,就一起來看看這篇文章吧!
Thumbnail
知識圖解是一個非常實用的技能,但不是很好掌握。這篇文章分享由軟體架構師 Simon Brown 提出的 C4 模型,可以很好地讓圖解變的「見樹又見林」,最後我還會分享在軟體業之外的應用。如果你是需要在工作場合中思考與溝通複雜事物的人,就一起來看看這篇文章吧!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News