前言

我在上一篇的文章 - 從 Http 請求到認識 OAuth 以及 OpenID 中引入了 PlantUML，主要是看了這篇文章後啟發我使用 UML 來畫圖，除了可以動手畫流程讓自己更了解外，也不用到處去找適合的圖並且能讓文章的風格統一。

但若要 Markdown 支援 PlantUML 的話還需要額外安裝套件，這邊就以我部落格的樣式 - Hexo 的 next Theme 來描述實作過程！🙂

下載位置: VScode PlantUML 套件

介紹

因為是使用 hexo，從官網的 Plugins 中找到後決定使用hexo-filter-plantuml

不得不說 hexo 官網真的是很多特別又好玩的套件，大家可以上去找找看有沒有適合自己寫作風格的套件喔！

首先一般在編輯器上開發完應該會像這樣:

想說寫好太棒了 🎉，我要把它放到部落格上，結果就會變成這樣:

這下可好了這樣是誰看得懂 😤！

此時就使用 npm 來幫忙安裝(hexo 是基於 Node.js 開發的套件):

1	npm install --save hexo-filter-plantuml

1	brew install graphviz

接下來因為我們只是輸入標記符號，但輸出是圖片格式，因此要讓 hexo 在網頁載入時先去轉換 base64-encoded 的圖片並下載至文章上。

首先以為的部落格為例(GitHub)，先進入到
themes/ ➡️ next/ 找到 _config.yml 裡的任一行輸入:

1 2	plantuml: render: "PlantUMLServer"

若還是不懂可參考我的專案寫法。

以上是一個簡易的設定，要注意到它文件中是獨立的一層，不是在任何的子階層裡面，若想要更多客製化的功能可以參考作者文件說明。

最後部署上去後就會看到這樣的結果:

如此一來就大功告成囉！之後就可以拿著 UML 到處跟人家炫耀了 😆

在寫的時候一定要在頓號後面加上puml的標記，這樣 hexo 才看得懂喔！

{% plantuml %}@startuml
...省略
@enduml
{% endplantuml %}

或是習慣另一種寫法的也可以這樣：

{% plantuml %}
@startuml
...省略
@enduml
{% endplantuml %}

若你不是 Java 的開發者，或許也會遇到這樣的問題：

1	No Java runtime present, requesting install.

因為之前因為需要安裝 openapi-generator 時有安裝過 Java 相關套件，此時需要至官網抓取並安裝，之後再執行一次就沒問題囉！

我當時是直接到 oracle 官方直接下載 Java SE，但如果這不還是不行可以嘗試看看這個網站

為什麼我要用標記符號顯示而不是直接輸出圖片呢？

因為我們文章可能在發佈之後或是之後回來看時發現流程有錯誤時可以馬上針對特定內容直接修改，而不用再重新找當時寫的檔案位置-輸出圖片這樣的順序，總之只要將流程圖畫好並透過程式碼區塊的語法就能將圖片輸出了，這樣對我寫作來說就能夠更順暢一些了！