excalidraw 這些用法你肯定不瞭解

轩脉刃發表於2024-07-21

也算用了很多種的畫流程圖的軟體,但是 excalidraw 這個工具之前並沒有使用過。今天就研究了一下這個工具。

excalidraw 繪製的流程圖會有手繪感,手繪感天生會給人親切感,放在文章中,會給文章增色不少。

excalidraw 的網址如下:https://excalidraw.com/

excalidraw 的基礎用法就不說了,說下幾個讓我有點 exciting 的點:

雙列表格自動成圖表

我用 excel 建立了一個兩列的表格

image-20240716001826491

複製到 excalidraw 的時候,直接彈出圖表選項

image-20240716002249693

選擇其中一個,自動生成圖表

image-20240716002315764

這個功能有幾個要求:

  • 需要使用 excel繪製表格(我自己測試使用騰訊文件是不生效的)
  • 表格需要是 2 列的,且第一行是欄位說明,第二列是數值

Mermaid至 Excalidraw

我目前繪製圖表用的最多的就是 mermaid,mermaid 能支援流程圖,時序圖。在 excalidraw 中,你可以直接複製 mermaid 程式碼,就能生成對應的手繪圖。

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

生成如下:

image-20240716003125715

曲線指標

我要將一個模組指向另外一個模組,這個指向的指標我希望是彎曲的,而不是古板的直線,那麼我就可以使用指標的圖示,直接使用滑鼠點選途中經過的第一下,第二下。。。直到到目標後,點選 esc,就能確定這個曲線指標。

image-20240716003542775

文字變圖表

image-20240716003812355

這是一個付費的 AI 功能,每天只能有 10 次嘗試機會。但是使用起來繪製手繪流程圖簡直不要太爽。

如圖,用中文表達方式描述就可以繪製出來模組流程圖。

元素屬性皮膚

我們右鍵能彈出元素屬性皮膚,這裡的 Stats&Element properties 能開啟元素屬性皮膚。

image-20240716004259817

這個皮膚可不是隻能檢視的,我們可以在上面直接進行編輯,有所見即所得效果。

image-20240716004355250

萬能的素材庫

在素材庫中你一定能找到你所需要的各種有用的素材。

image-20240716005127783

本地化

excalidraw 將它的免費功能全部都開源出來了。

https://docs.excalidraw.com/docs/introduction/development

按照上述連結,可以直接在本地搭建一個 excalidraw。

我自己嘗試過,很方便,甚至可以使用素材庫的素材。

其他

excalidraw 有個問題,對中文支援不是很好,中文在上面並沒有手繪化。

所以有人就使用 excalidraw 的開源版本修改了一個支援中文的專案:https://handraw.top/

如果對中文字型有強需求的可以使用這個專案。

總結

excalidraw 是個很好用的手繪圖形繪製編輯器。

相關文章