前言
在搬遷文章以及個人資訊到 Hugo 後，就開始一直尋找在 Hugo 的 Markdown 上寫入 PlantUML 的方式，第一是這樣未來我我在畫圖或表達抽象意思時，能夠較快的撰寫，再來是我本來就想研究在 Markdown 內實現畫圖
後來花了大概一天的時間研究，並從網路上參考了 Mogeko’s Blog 的資料，完成了這個透過 Shortcode 實現的方法，因此特別寫下來流程
有要使用的朋友歡迎到我的 Github hugo-shortcode-plantuml 上，有完整的 Code 可以下載
原理
最早的 Idea 是我在使用 Wordpress 作為網站部落格時，會下載 PlantUML 套件來進行撰寫，當時就注意到很多這種套件都是用 shortcode 的方式來實現，研究後了解比較接近於提供一小區塊的 HTML 變化，來達到不同的目的
因此假如有一段 PlantUML 如下，我想要把他想辦法在 HTML 中呈現出來
Alice -> 張三
張三 -> Felipe
在研究之後，了解了透過 HTML 實現需要有三個步驟
- 將語法內容(Alice 到 Felipe 這段)透過指定方式轉換為一串代碼
- 將代碼送給 PlantUML 的 Server，並請他回傳 svg 檔案
- 將回傳的 svg 檔案，顯示在 Hugo 上
而我實現這個的方式，就是透過 Hugo shortcode 的機制完成，我只要在 index.md 中打入以下文字
{{ < plantuml >}} ---> 實際上 "{{>" 中間沒有空格
Alice -> 張三
張三 -> Felipe
{{ < /plantuml >}}
就可以渲染成以下的圖示
Alice -> 張三 張三 -> Felipe
如何使用
我都放在這個 Repo上摟
但還是要說明這不是我原創，基本上都是透過 Mogeko’s Blog 完成的，謝謝大神
另外目前有個 Bug，就是渲染的時候有時會額外渲染 2-3 次，至於為什麼我也不知道