Excalidraw to PNG Export

Script Location

~/.claude/skills/excalidraw-to-png/export.mjs

How It Works

Opens excalidraw.com in headless Chromium (Puppeteer), loads the .excalidraw file via drag-and-drop, opens the export dialog, sets scale, and captures the PNG via a mocked File System Access API. This uses Excalidraw's own production rendering engine, so fonts and layout are pixel-perfect.

Usage

# Single file (outputs PNG next to the input file)
node ~/.claude/skills/excalidraw-to-png/export.mjs ./diagram.excalidraw

# Multiple files to a specific output directory
node ~/.claude/skills/excalidraw-to-png/export.mjs ./a.excalidraw ./b.excalidraw --output /tmp/

# Custom scale (default: 2 for retina)
node ~/.claude/skills/excalidraw-to-png/export.mjs ./diagram.excalidraw --scale 3

# Dark mode
node ~/.claude/skills/excalidraw-to-png/export.mjs ./diagram.excalidraw --dark

Options

Flag	Default	Description
--output <dir>	Same as input	Output directory for PNGs
--scale <n>	2	Scale factor (1, 2, or 3)
--dark	off	Export with dark mode background

Output

• PNG files named {input-basename}.png
• At 2x scale, produces crisp images suitable for Notion, docs, and presentations
• White background by default

Prerequisites

Dependencies are pre-installed in ~/.claude/skills/excalidraw-to-png/node_modules/. If missing, run:

cd ~/.claude/skills/excalidraw-to-png && npm install

Workflow: Export and Upload to Notion

1. Export: node ~/.claude/skills/excalidraw-to-png/export.mjs <files> --output /tmp/excalidraw-export/
2. The PNGs at /tmp/excalidraw-export/ are ready for upload
3. Use the Notion MCP tools to embed images on pages (upload via external URL or reference)