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 語法嵌入圖形,例如
從文件看來 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

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