mermaid-renderlisted
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 |
|---------|--------