excalidraw-workflow
CommunityExport Excalidraw diagrams to PNG reliably.
Design & Creative#automation#excalidraw#puppeteer#batch-processing#headless-chrome#png-export#diagram-validation
Authorzkzupup
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Excalidraw diagrams often remain as editable JSON files, but sharing or publishing requires PNG exports and validation to prevent rendering defects. This skill exports diagrams to PNG using a bundled Node.js tool and enforces JSON correctness rules to ensure the exported image matches the source.
Core Features & Use Cases
- PNG export pipeline: Batch export of .excalidraw files to PNG using a headless Chromium renderer with Excalidraw's exportToBlob API.
- JSON correctness validation: Detects and prevents common rendering defects (misbound text, arrows through boxes, misaligned elements) by applying documented rules.
- Batch workflows: Ideal for teams producing diagrams that must be published or documented with exact PNG references, while keeping the original .excalidraw as editable source.
Quick Start
Run the export script at scripts/export_excalidraw_png.js to export all .excalidraw files in your project to PNGs.
Dependency Matrix
Required Modules
puppeteer
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: excalidraw-workflow Download link: https://github.com/zkzupup/MySkills/archive/main.zip#excalidraw-workflow Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.