I use excalidraw to manage my diagrams for my blog

TL;DR I use an Excalidraw, wrap the elements of interest with a frame, name it with export_ prefix, my forked excalidraw extension automatically generates SVGs for light and dark mode.

Using Excalidraw

I used Excalidraw a lot in the past.

• When breaking down a technical problem for myself
• When explaining a concept or an architecture to my coworkers.

Just recently a new usecase evolved: Expressing my thoughts in my Blog. While writing my first article the dependency between graphics and the text lead to a lot frustration. Fine-tuning the graphic led to an easier text. Changes in the text made me realize that some information in the graphic is not needed to grasp what should land.

The Problem

Every change in a graphic in Excalidraw meant 9 clicks in Excalidraw: Selecting the frame, pressing export, choosing names, switching modes, and re-exporting. It took about 45 seconds. Automate it!

First approach - the GitHub action

A little GitHub action that looks for changed excalidraw files, uses jq to find frames, exports them in dark and light mode, and commits those new svg files back to the repo.

Problems with approach 1

• Rendering bugs in the library.
• Docker image compatibility issues (x86 vs ARM Mac).
• Slow feedback loop: pushing to GitHub and pulling back just to see local changes.

A new Idea: Add auto-export to Excalidraw

What if Excalidraw's VSCode extension would check the open file for changes and automatically export each frame? Now, I just wrap elements with a frame named export_${image_name}. The extension picks it up and saves two SVGs next to the file. This allows for live preview locally in the editor.

Conclusion

I am pretty happy with the result. It solves a real pain. I've created artifacts for the release section in my GitHub fork that allows others to download and use my extension.