使用 Mermaid 產生圖表

每隔一段時間筆者就需要繪製 循序圖(Sequence Diagram)、流程圖 (Flowchart)等，圖表，每次筆者都會順便搜尋看看有沒有更合適的工具，這次打算採用 markdown 語法的 Mermaid 來達成。Mermaid 在 GitHub 上面有 69.1k Star 。使用「程式碼」來撰寫這些圖表的好處就是容易修改，甚至可以用來產生程式碼。

因為大多數人使用 VS Code ，本文就介紹一下 VS Code 的套件。在套件的選擇上筆者不是安裝官方推薦的 Mermaid Chart 套件，而是使用 Markdown Preview Mermaid Support 這個「第三方套件」。

只要建立副檔名為 .md 的檔案，編輯器開啟預覽，就可以使用 Markdown 語法撰寫：

    
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
    

具體的語法可以查看官方文件

筆者在測試時發現使用 Markdown PDF 這個 VS Code 套件可以正常的將 markdown 語法和 Mermaid 圖表轉換為 HTML，但是無法轉換為 PDF ，轉換為 PDF 時 Mermaid 圖表以程式碼的方式呈現。所以暫時的解決方式是先產生 HTML ，再使用其他工具做轉換，如果有推薦的工具也歡迎留言補充。

參考資料：
Mermaid