Diagrams as Code - UML

閱讀時間約 3 分鐘
Diagrams as Code
有時,一張圖片可能勝過千言萬語,善用圖表可以幫助我們更請楚地表達不同的資訊及概念。
  • 當講述專案進度時,甘特圖是一個強大的工具。以條形圖呈現了時間軸、里程碑和任務,讓我們可以清晰地了解專案的時間安排和進度。
  • 在討論需求時,Use Case 可以幫助我們確定不同的需求和角色,並定義系統的邊界。它描述了使用者和系統之間的互動,讓我們可以更好地理解系統的功能和行為。
  • 而在說明一個功能的內部運作流程時,Sequence Diagram 展示了對象之間的交互,讓我們可以視覺化地理解系統內部的運作方式。
市面上許多的圖表工具可以選擇,如 Diagrams.net (以前稱為 Draw.io) 和 Miro 等,這些工具提供了圖形化介面和各種靈活性,方便我們創建和編輯不同類型的圖表。
Miro 介面
drawio 介面
除了傳統的圖表工具,有一種越來越受歡迎的方式是 diagrams-as-code。將圖表以代碼的形式儲存,並使用對應的引擎將代碼渲染成圖形。可將其放在版本控制系統中,便於文件化和版本管理。
Ask chatGPT for Popularity
依照我的需求要畫 UML 及在 GitHub or GitLab 可以直接顯示,選擇有 Mermaid 和 PlantUML
PlantUML VS Mermaid
大致上來說,兩套工具各有優缺:
📍環境設定
  • 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
查看全部
發表第一個留言支持創作者!
Tony的沙龍 的其他內容
當我們在討論 Web Applications 中的數據交換時,JSON 常是第一時間想到的格式,它有著易於閱讀且跨語言、開發成本低等優點。但當傳輸的數據量開始變大時,我們是不是有別種的選擇呢?
當我們在討論 Web Applications 中的數據交換時,JSON 常是第一時間想到的格式,它有著易於閱讀且跨語言、開發成本低等優點。但當傳輸的數據量開始變大時,我們是不是有別種的選擇呢?
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
可能包含敏感內容
比照各自的性癖好,猜想一副手銬也許會是一份皆大歡喜的交往紀念禮物,於是在春末的深夜,下了網購訂單;然而怎麼也沒料到,本該春宵盡歡的那晚,卻要從小北百貨開始...... 是情慾,更是自我定義的探索。
Thumbnail
可能包含敏感內容
學長奴看著走在自己稍前的學弟犬,薄暮灑在他五分袖白T配抽繩膝上黑短褲時,心裡還有些不踏實,畢竟眼前這個男人剛還赤身裸體的跪在地上,跟自己度過了瘋狂的一天。學長不禁又往下瞄了那踩在黑白底交錯的勾子拖鞋之上,裹著MIZUNO白襪的那雙細毛壯腿,腦袋一時閃過學弟在自己身上雄汗淋漓的模樣,不禁又⋯⋯
Thumbnail
可能包含敏感內容
不可能忍得住的,學長的精神已經無法負荷了,滿腦子都是射精、射精、射精被高潮的慾望佔滿,這天也真是夠嗆的,先是被雙頭龍肛到流出來,再被學弟捅屁眼內射,加上野薔的美屄坐姦,人生至此絕頂升天也不為過吧,管不了之後會被主人懲罰了,就射了吧,貪圖一時肉慾的歡愉,扎扎實實地享受這一刻身體都快崩解的極致高潮吧⋯⋯
Thumbnail
可能包含敏感內容
學弟犬很聽話的趴在學長奴兩腿開開之間,伸出舌頭就低頭啜汁,只是舔著舔著狗屌尖端就距離那個才剛被雙頭龍開鑿過還在開闔呼吸的褶皺越來越近,越來越近,終於龜頭就被吸附在學長奴淌著濕液的騷穴口,一動不動,好幾天沒射又被折騰了一天的騷狗屌怎麼可能承受得住這種色誘,牠遂開始偷偷挪動著下半身以為神不知,鬼不覺⋯⋯
Thumbnail
這篇文章將會講述設計模式中的狀態模式,其資料源自於書籍、網路、個人理解,從簡介→架構→撰寫→測試的整個流程進行介紹與分享。
Thumbnail
這篇文章將會講述類圖的基本介紹,並且詳細敘述從零開始製作完整的類圖流程。
Thumbnail
小時候耳熟能詳的的童話長大後紛紛變身,加入更多新世紀元素,來吸引日益刁鑽的大小讀者眼球。 於是「格林童話」”糖果屋”裡的Hansel and Gretel一下子化身電影裡的女巫獵人;一下子又變成2021年動畫“神秘魔法部(Secret Magic Control Agency)”裡的搞笑探員。
Thumbnail
「溝通的認知前提」很重要,用「不能理解」形容會比「不知道」好很多,比認為「對方是故意的」好更多。溝通是雙向的,代表不僅是神經人要懂AS的世界,AS也要學習神經星球的運作方式,「平等互相」才是關係經營之道。因此預設讀者為兩個世界的人都可以看。
Thumbnail
考量哩程的等效消費,計算之後就會知道帳面上哩程看起來最便宜的,其實最貴,如下圖。
Thumbnail
誰說只有StarAlliance和OneWorld可以開環球票,AS就能開了
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
可能包含敏感內容
比照各自的性癖好,猜想一副手銬也許會是一份皆大歡喜的交往紀念禮物,於是在春末的深夜,下了網購訂單;然而怎麼也沒料到,本該春宵盡歡的那晚,卻要從小北百貨開始...... 是情慾,更是自我定義的探索。
Thumbnail
可能包含敏感內容
學長奴看著走在自己稍前的學弟犬,薄暮灑在他五分袖白T配抽繩膝上黑短褲時,心裡還有些不踏實,畢竟眼前這個男人剛還赤身裸體的跪在地上,跟自己度過了瘋狂的一天。學長不禁又往下瞄了那踩在黑白底交錯的勾子拖鞋之上,裹著MIZUNO白襪的那雙細毛壯腿,腦袋一時閃過學弟在自己身上雄汗淋漓的模樣,不禁又⋯⋯
Thumbnail
可能包含敏感內容
不可能忍得住的,學長的精神已經無法負荷了,滿腦子都是射精、射精、射精被高潮的慾望佔滿,這天也真是夠嗆的,先是被雙頭龍肛到流出來,再被學弟捅屁眼內射,加上野薔的美屄坐姦,人生至此絕頂升天也不為過吧,管不了之後會被主人懲罰了,就射了吧,貪圖一時肉慾的歡愉,扎扎實實地享受這一刻身體都快崩解的極致高潮吧⋯⋯
Thumbnail
可能包含敏感內容
學弟犬很聽話的趴在學長奴兩腿開開之間,伸出舌頭就低頭啜汁,只是舔著舔著狗屌尖端就距離那個才剛被雙頭龍開鑿過還在開闔呼吸的褶皺越來越近,越來越近,終於龜頭就被吸附在學長奴淌著濕液的騷穴口,一動不動,好幾天沒射又被折騰了一天的騷狗屌怎麼可能承受得住這種色誘,牠遂開始偷偷挪動著下半身以為神不知,鬼不覺⋯⋯
Thumbnail
這篇文章將會講述設計模式中的狀態模式,其資料源自於書籍、網路、個人理解,從簡介→架構→撰寫→測試的整個流程進行介紹與分享。
Thumbnail
這篇文章將會講述類圖的基本介紹,並且詳細敘述從零開始製作完整的類圖流程。
Thumbnail
小時候耳熟能詳的的童話長大後紛紛變身,加入更多新世紀元素,來吸引日益刁鑽的大小讀者眼球。 於是「格林童話」”糖果屋”裡的Hansel and Gretel一下子化身電影裡的女巫獵人;一下子又變成2021年動畫“神秘魔法部(Secret Magic Control Agency)”裡的搞笑探員。
Thumbnail
「溝通的認知前提」很重要,用「不能理解」形容會比「不知道」好很多,比認為「對方是故意的」好更多。溝通是雙向的,代表不僅是神經人要懂AS的世界,AS也要學習神經星球的運作方式,「平等互相」才是關係經營之道。因此預設讀者為兩個世界的人都可以看。
Thumbnail
考量哩程的等效消費,計算之後就會知道帳面上哩程看起來最便宜的,其實最貴,如下圖。
Thumbnail
誰說只有StarAlliance和OneWorld可以開環球票,AS就能開了