Export Excalidraw diagrams to PNG and validate JSON rendering rules.
npx skills add https://github.com/zkzupup/MySkills --skill excalidraw-workflow
Please help me install this Agent Skill. Skill: excalidraw-workflow Source: https://github.com/zkzupup/MySkills/tree/main/skills/excalidraw-workflow Command: npx skills add https://github.com/zkzupup/MySkills --skill excalidraw-workflow
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.
Run the export script at scripts/export_excalidraw_png.js to export all .excalidraw files in your project to PNGs.
High-intent search queries and answers about installing and using this skill.
To batch export Excalidraw diagrams to PNG, run the bundled Node.js script to process all .excalidraw files in your project. The pipeline uses Puppeteer with headless Chromium and Excalidraw's exportToBlob API to generate PNG images from the editable JSON sources.
To validate Excalidraw JSON and prevent rendering defects, apply strict correctness rules to detect misbound text, arrows through boxes, and misaligned elements. This validation ensures the exported PNG faithfully represents the editable source without visual errors.
Yes, you need Puppeteer to export Excalidraw files to PNG because it provides the headless Chromium browser required to execute the Excalidraw exportToBlob API. This bundled Node.js pipeline ensures reliable rendering of the editable JSON source files.
The best way to publish Excalidraw diagrams as PNG images is using a batch workflow that exports .excalidraw sources and validates the JSON. This approach guarantees the published PNGs match the editable source files while preventing rendering defects.
Your Excalidraw PNG export has misaligned elements and misbound text due to incorrect JSON structure. Applying documented JSON correctness rules during the export pipeline detects and prevents these common rendering defects before generating the final image.
Yes, you can use headless Chrome through Puppeteer for Excalidraw diagram validation in batch workflows. The Node.js export pipeline renders the JSON sources and applies correctness rules to ensure the output PNGs faithfully represent the editable diagrams.
elaraaiRender East UI components and decision surfaces as PNG images and standalone HTML files from TypeScript, IR, or live workspace tasks.
TrevorEdrisCreate Mermaid diagrams from plain text in Markdown documents.
Tommy-ywCreate hand-drawn style diagrams in Excalidraw JSON format.
exiaoGenerate hand-drawn style diagrams as PNG files or Excalidraw links.
