本文章同時發佈於：

• Medium
• iT 邦幫忙

大家好，繼上次Week28 - 讓你心裡的邏輯具現化的念能力工具 Mermaid的文章後，接下來要介紹vscode-drawio。

vscode-drawio 是什麼？

將 drwa.io 網站的放到 vscode 中來用的超棒插件

相信大家一定有碰過draw.io，他是一個非常強大的繪圖軟體，

幾乎你想得到的繪圖功能他都能辦到，但是有以下幾點讓我使用體驗一直很差:

1. 他是在一個第三方網站，如果我要分享此文件至 Markdow，就是得複製連結或者匯出文件，一天到晚的複製貼上很浪費時間
2. 網頁用到後面常常會卡

而 vscode-drawio 很完美的解決了以上問題:

1. 圖片即可編輯，編輯完立馬同步至 Markdow，寫文檔的速度飛起
2. 在 vscode 裡面使用從沒卡過

如影片所示，只要把檔案名編輯成.drawio.svg或者.drawio.png，在點擊時 vscode-drawio 就會自動開啟編輯模式，但同時他又是一張圖片，這很直接的解決了我第 1 點的問題。

vscode-drawio 與 mermaid.js 的職責

對我來說，vscode-drawio 負責繪畫關係圖，mermaid.js 負責流程圖

比如說要表達 A Service, B Service 與外界(External)的關係就適合用 vscode-drawio

因為圖擺放的位置就是這張圖的重點，所以我們必須要好好來處理這些圖。

如果讓軟體以程式碼幫我們自動產生有時候圖，常常會產生擺放的不符合我們預期的問題。

而如果以邏輯為重的話，就適合以 mermaid.js 來解決，

要怎麼放圖就不是在這些邏輯下需要關注的事情。

謝謝你的閱讀，也歡迎分享討論指正～