I use Excalidraw to manage diagrams for my blog. When explaining technical concepts, I wrap elements in frames and name them with export_ prefixes. My forked Excalidraw extension automatically generates light and dark mode SVGs from these frames. Initially, manual exports required 45 seconds of tedious clicks: selecting frames, naming files with mode postfixes, and switching between modes. This changed when I built a GitHub Action to automate the process.

The first approach involved a 20-minute GitHub Action using JonRC's excalirender tool. It scanned changed .excalidraw files, parsed frame names via jq, and exported SVGs with dark/light mode variants. While functional, it had limitations: Docker images struggled on my ARM Mac, and remote builds delayed local previews. I couldn't see updates until pushing changes and waiting for CI pipelines.

A breakthrough came with a VSCode extension that exports frames in real time. Now, wrapping elements in frames named export_ triggers immediate SVG generation. The extension saves two files per frame: [name].light.exp.svg and [name].dark.exp.svg alongside the Excalidraw file. This local preview capability transformed my workflow, letting me reference diagrams directly in my blog editor. I spent two hours developing this tool using Claude, and it's already streamlining my writing process.

While tempted to submit a pull request to the main Excalidraw codebase, I've instead shared my fork's artifacts publicly. This solution highlights how open-source tools can be extended for niche use cases. For bloggers juggling technical content, the ability to sync diagrams with text in real time proves invaluable. The extension's GitHub repository now serves as both a technical showcase and practical resource for similar workflows.