iT邦幫忙

0

Week29 - 讓你心裡的邏輯具現化的念能力工具 vscode-drawio [Server的終局之戰系列]

本文章同時發佈於:


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

vscode-drawio 是什麼?

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

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

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

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

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

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

From: https://github.com/hediet/vscode-drawio

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

vscode-drawio 與 mermaid.js 的職責

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

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

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

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


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

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


謝謝你的閱讀,也歡迎分享討論指正~


尚未有邦友留言

立即登入留言