I use excalidraw to manage my diagrams for my blog

Summary

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 choose the right name + darkmode/lightmode postfix export switch light/dark mode choose the right name + darkmode/lightmode postfix export again realize that one label crossed the frame boundary starting at 1 again. It took me about 45 seconds. Automate it :-) . First approach - the GitHub action​ ...20 minutes later... A bit of bash thanks to open source (specifically JonRC's excalirender) - it worked... A little GitHub action that: looks for changed excalidraw files in the last push, uses jq to find frames inside of those, exports them in dark and light mode as [framename]-[light/dark], commits those new svg files to the repo again. See code here: name: Export Excalidraw Frameson: push: branches: - main pull_request: branches: - mainpermissions: contents: writejobs: export-frames: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v4 with: fetch-depth: 2 - name: Get changed Excalidraw files id: changed-files run: | if [[ "${{ github.event_name }}" == "push" ]]; then CHANGED_FILES=$(git diff --name-only HEAD~1 HEAD | grep '\.excalidraw$' || true) else CHANGED_FILES=$(git diff --name-only origin/${{ github.base_ref }} HEAD | grep '\.excalidraw$'...