fbpx

可以產生 UML 圖形的 RESTful 服務

Contents

這個開源專案提供一個 RESTful 服務,傳遞要產生的 UML 的程式碼,到這個 RESTful 服務動態產生 UML 物件類別架構圖 (Class diagram),順序圖( Sequence diagram ),流程圖( flowchart )甚至是甘特圖 , 這個 UML 程式碼可由 Mermaid 或是 PlantUML 來製作

這個專案的開發動機

Github 不支持在 Markdown 編輯器中渲染 Mermaid 圖形。 Mermaid是一個功能強大的工具,它使用定義良好的模式,然後將圖表解譯為 SVG 圖形。 這個工具的想法是允許通過 REST 端點動態嵌入影像,以便輕鬆地將 UML /序列圖 添加到 github 的 markdown 檔案(例如 readme ),無論編輯器是否支持 Mermaid。

Mermaid 的工具支援

Mermaid 可以用 Live Editor 先測試要產生 UML 圖形的程式碼,也有支援 VS Code

使用 Mermrender 的流程

  1. 使用 Mermaid 或是 PlantUML 生成圖形程式碼
  2. 將圖形程式碼進行編碼 – 編碼工具如https://www.freeformatter.com/java-dotnet-escape.html#ad-output
  3. 產生要嵌入的圖檔連結,可用 Markdown ,HTML 語法嵌入圖形,例如![alt_caption](http://localhost:3000/diagram/2VxdWVuY2VEaWF)

從文件看來 Mermrender 必須是一個有網域名稱的服務,文件中建議可以將 Mermrender 在 Gitpod 中執行,Gitpod 是 GitHub 的免費線上開發環境,Mermrender 使用 NodeJS 開發,所以你也可以將 Mermrender 部屬到有支援 NodeJS 的雲端平台

One more thing!

Mermaid 的線上文件只有說明如何繪製順序圖和流程圖,可是卻找不到如何使用 Class diagram 的說明,用 Google 找了一下發現是有支援的,可以參考這邊的討論 – https://github.com/knsv/mermaid/issues/359 最後的結論是可以使用但是還是很多 bug

Demo

專案網址


追蹤 Soft & Share

✍ 不受社群推薦演算法影響,建議 Telegram/Discord/e-mail

幫我們個小忙!

請為我們的網站評分(必)

Comments are closed.

Powered by WordPress.com.

Up ↑

%d