I use excalidraw to manage my diagrams for my blog
This post details a clever technical solution for automating Excalidraw diagram exports, a common pain point for technical bloggers. The author details their journey from a clunky GitHub Action to a custom VSCode extension, enabling seamless local preview and dark/light mode SVG generation. It resonates with developers who constantly battle workflow inefficiencies, offering an open-source approach to a specific, yet relatable, problem.
The Lowdown
The author shares their refined process for integrating Excalidraw diagrams into their blog, specifically addressing the tedious manual export steps. Initially using Excalidraw for personal thought organization and team explanations, they found the graphic-text dependency in blogging to be a source of frustration.
- The Problem: Manually exporting Excalidraw diagrams for a blog post involved a nine-click process per image, duplicated for dark/light modes, taking roughly 45 seconds per graphic. This became a significant bottleneck during content creation.
- First Attempt - GitHub Action: The author first automated this with a GitHub Action using
excalirender. This action detected changed Excalidraw files, identified frames, and exported them as dark/light SVGs, committing them back to the repo. - Shortcomings of Approach 1: This solution suffered from rendering bugs and, critically, required an x86 Docker image that wouldn't run on the author's ARM Mac, breaking local iteration and forcing a push-wait-pull cycle for image updates.
- The Refined Solution - VSCode Extension: Inspired by these limitations, the author developed a fork of the Excalidraw VSCode extension. This custom extension automatically exports frames (prefixed with
export_) as dark and light mode SVGs whenever the Excalidraw file is edited, saving them locally. - Benefits: This new approach enables live local preview of diagrams, greatly streamlining the blog writing and editing workflow.
Ultimately, the author is pleased with the solution, noting it took only a few hours to implement and brings significant joy by solving a real pain point. While considering upstreaming the feature, they opted to share their fork and inspire potential future developments in the main Excalidraw project.
The Gossip
Excalidraw Enthusiasts & Alternatives
Many commenters expressed their admiration for Excalidraw, highlighting its excellent UI, instant loading, privacy, and unique 'sketchy' aesthetic that communicates designs are conceptual, not final blueprints. The discussion also veered into comparisons with other diagramming tools like draw.io (which some still prefer for its local Linux support), TLDraw, Lucid, and Figma, with users sharing their use cases and preferences.
The 'Show HN' Scrutiny
A minor debate arose regarding the post's suitability for Hacker News, with one commenter suggesting it should have been a 'Show HN.' This prompted others to clarify Excalidraw's widespread popularity and argue that the post, detailing a specific technical solution to a common problem, was well-suited for the main front page without the 'Show HN' prefix, indicating general familiarity with the tool among the HN crowd.
AI's Artistic Assistance
A thread touched upon Excalidraw's integration with AI, specifically mentioning Excalidraw MCP ('Model Context Protocol') for bootstrapping diagrams with LLMs. While some found the concept intriguing, others noted that the Claude-generated diagrams were 'too raw/unpolished' when they first tried it, preferring existing methods like Mermaid for now, but remained open to improvements.