← ClaudeAtlas

mermaid-renderlisted

Render Mermaid .mmd diagrams as hand-drawn style PNG exports via Excalidraw. Use when converting .mmd files to presentation-quality images with a sketch/hand-drawn aesthetic. Triggered by 'render this diagram', 'export mermaid as PNG', 'convert mmd to image', or 'excalidraw export'. Also handles .excalidraw → PNG directly.
tomcounsell/ai · ★ 14 · AI & Automation · score 76
Install: claude install-skill tomcounsell/ai
# mermaid-render Convert Mermaid `.mmd` source files (or `.excalidraw` JSON files) to hand-drawn style PNGs. ## Browser surface The `.mmd → PNG` flow drives `excalidraw.com` via BYOB MCP (`mcp__byob__browser_*`) — the user's real Chrome. The `.excalidraw → PNG` flow does not touch a browser at all. The `.mmd` flow uses `mcp__byob__browser_eval` to extract scene JSON from `localStorage`. BYOB blocks `browser_eval` by default; set `BYOB_ALLOW_EVAL=1` before invoking BYOB if you need this flow. The gate is documented in [`docs/features/byob-browser-control.md`](../../../docs/features/byob-browser-control.md). ## Dependencies (install once) ```bash npm install -g @moona3k/excalidraw-export ``` This handles `.excalidraw` → PNG headlessly (pure Node, no browser, ~100ms/file, authentic roughjs hand-drawn aesthetic). ## Input types | Input | Pipeline | |-------|----------| | `.excalidraw` | Direct: `excalidraw-export` → PNG (fast, no browser) | | `.mmd` | Browser: excalidraw.com import → extract scene from localStorage → `excalidraw-export` → PNG | --- ## Workflow A: `.excalidraw` → PNG (no browser needed) ```bash excalidraw-export <file.excalidraw> -o <output.png> --scale 2 file <output.png> # verify: should show "PNG image data" ``` --- ## Workflow B: `.mmd` → PNG ### Step 1: Read and validate the Mermaid source ```bash cat <file.mmd> ``` **Before proceeding, check for diagram topologies that produce bad renders:** | Pattern | Problem | Fix | |---------|--------