可以產生 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 的流程

使用 Mermaid 或是 PlantUML 生成圖形程式碼
將圖形程式碼進行編碼 – 編碼工具如https://www.freeformatter.com/java-dotnet-escape.html#ad-output
產生要嵌入的圖檔連結，可用 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