Technical writer Martin Lysk has unveiled a custom solution to streamline image management for his technology blog. The developer engineered a Visual Studio Code extension to automate SVG exports for both light and dark modes directly from Excalidraw files. This tool addresses the significant friction between graphic editing and text updates during the writing process. Lysk documented the workflow on his personal blog to share the methodology with the wider technical community.
Manual exports previously consumed approximately 45 seconds per image adjustment in the standard workflow. Lysk noted that fine-tuning graphics often required nine distinct clicks within the Excalidraw interface alone. Changes in the accompanying text frequently revealed unnecessary information within the diagrams, forcing a restart of the export cycle. This repetitive task created a bottleneck that slowed down the overall article production timeline significantly.
Automation Attempts and Limitations
An initial GitHub Actions approach utilized the open-source excalirender library to process files on every push event. The script scanned the repository for changed Excalidraw files and triggered the rendering process on a remote server. However, this method required spinning up an x86-based Docker container that failed to run on Lysk's ARM-based Mac. Consequently, the developer could not preview new images locally before publishing the article to production.
The final solution involves a forked VSCode extension that monitors open Excalidraw files in real-time for user changes. Frames prefixed with the export_ label trigger automatic generation of light and dark mode SVG files immediately. Lysk reports that this workflow allows for live previews directly within the editor pane without needing to commit code first. The system saves two distinct SVGs next to the source file for each designated frame.
Developer Workflow Analysis
Using the tool brings joy since it solves a real pain, Lysk wrote on his blog regarding the user experience.
The extension effectively bridges the gap between technical diagramming and content management systems. He spent only a couple of hours developing the prototype, including documentation and testing phases. This efficiency gain allows writers to focus on narrative structure rather than asset generation logistics. The workflow highlights a growing trend among technical writers to build custom tooling rather than rely on generic platforms.
Broader Industry Implications
Similar automation scripts exist for content management systems, but this integration targets diagram-heavy documentation specifically. Lysk plans to share his forked extension via a GitHub release for others to download and test. He intends to open an issue on the original project to describe the problem without taking ownership of the code. Future versions of the extension could expand to support additional export formats beyond SVG files.
Technical writers managing complex architecture diagrams may find similar benefits in automating their asset pipelines. The tooling effort demonstrates how niche developer needs drive specialized software evolution within the open-source ecosystem. This approach may inspire broader adoption of automated asset generation in technical documentation projects. The project stands as a practical example of how individual developer experience shapes software tooling.
