簡而言之，我使用 Excalidraw，將感興趣的元素用框架框起來，並以 export_ 前綴命名。我修改過的 Excalidraw 擴充功能會自動產生 light 和 dark 模式的 SVG。
我過去經常使用 Excalidraw。
最近，一個新的使用情境出現了。
在撰寫我的第一篇文章時，圖形與文字之間的依賴關係導致了很多挫折。微調圖形可以讓文字更容易理解。文字的變動讓我意識到，圖形中的某些資訊對於理解文章重點並非必要。
在 Excalidraw 中修改任何圖形都需要 9 次點擊。
...20 分鐘後... 由於開源（特別是 JonRC 的 excalirender），我透過一些 bash 指令完成了——它奏效了……
太棒了！足夠讓我繼續撰寫文章。
在這種方法下工作一段時間後，我遇到了一些問題。
我透過新增額外的標籤來規避了 1.) 的問題，但 2.) 破壞了整個概念。無法在本機執行匯出，意味著我需要將 Excalidraw 檔案推送到 GitHub，等待 pipeline 完成，然後拉取新的 commit 才能看到新的圖像或圖像的變更。
所以這個解決方案有點奏效，但本機預覽部落格文章時只能看到過時的圖像。
如果 Excalidraw 的 VSCode 擴充功能能夠偵測到開啟的 *.excalidraw 檔案的變更，並自動將每個框架匯出為兩個獨立的 SVG 檔案——一個是 dark 模式，一個是 light 模式——那會怎麼樣？
週末我花了一些時間與 Claude 一起 YOLO 編碼。結果是：
如果我在 VSCode 中編輯我的 Excalidraw，為了讓某個區塊能用於我的部落格文章，我只需要做：
擴充功能會偵測到框架，以 dark 和 light 模式將其匯出為 SVG，並在 Excalidraw 檔案旁邊儲存兩個 SVG 檔案，命名為 ${image_name}.light.exp.svg 和 ${image_name}.dark.exp.svg。
現在這些圖像在本機可用，並且在我更改 Excalidraw 中的框架時會更新，我可以透過自動完成和編輯器中的預覽來引用它們，並在預覽標籤中看到它們的渲染效果。
我對結果非常滿意。包括撰寫這篇文章在內，我只花了幾個小時。使用這個工具帶來了樂趣，因為它解決了一個真實的痛點。
我迫不及待地想在正在製作的文章中廣泛使用它——SQLite on Git。
不過有一件事我不確定。在與他人討論這種方法後，我認為我的方法也能為原來的 Excalidraw 擴充功能本身帶來價值。但我不會建立一個 pull request——因為我不擁有程式碼——或者更確切地說，我不想擁有它。我正在考慮開啟一個 issue，描述問題和解決方案，作為靈感來源。
如果其他人覺得這很有用並嘗試使用它——我在我的 GitHub fork 的 release 區塊中創建了 artifacts，讓其他人可以下載和使用我的擴充功能。目前，這樣就足夠了！