メニュー
WHAT: Render Excalidraw JSON diagrams to PNG via Playwright + headless Chromium WHEN: Creating diagrams for blog posts, documentation, or any visual content
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
WHEN building any customer-facing content, funnel, page, email, call script, or offer structure THEN apply the AIDA fractal at every scale — each value ladder stage has its own AIDA cycle, each piece of content has AIDA within AIDA, and the customer journey is a Hero's Journey where the customer convinces themselves to go because they already believe themselves to be the hero.
WHAT: Dan Kennedy's framework for ascending customers through the value ladder — retention through progression WHEN: When applying direct marketing ascension knowledge
WHAT: Dan Kennedy's adaptation of Dale Carnegie's "make them feel important" for direct marketing WHEN: When applying direct marketing carnegie secret knowledge
WHAT: Dan Kennedy's Direct Marketing Diet — 6-step framework for direct marketing success WHEN: When applying direct marketing diet knowledge
WHAT: Craig Proctor's 8 Breakthrough Strategies for direct marketing success WHEN: When applying direct marketing eight breakthroughs knowledge
WHAT: Dan Kennedy's Follow-Up Framework — the 4-step structured follow-up campaign, closed loop systems, and the "no-fail" follow-up strategy. From No B.S. Direct Marketing. WHEN: When applying direct marketing follow up knowledge
| name | excalidraw-render |
| description | WHAT: Render Excalidraw JSON diagrams to PNG via Playwright + headless Chromium WHEN: Creating diagrams for blog posts, documentation, or any visual content |
| category | single_turn_process |
Renders .excalidraw JSON files to PNG images using Playwright + headless Chromium + jsdelivr CDN.
Labels MUST be standalone text elements. The label property on shapes is NOT rendered by exportToSvg. Convert every shape label to a separate text element positioned at the shape's center.
Use jsdelivr CDN only. esm.sh does NOT work in headless Chromium (module loading times out).
Screenshot the SVG element, not the full page, for clean output without extra whitespace.
python3 /tmp/heaven_data/skills/excalidraw-render/scripts/render_excalidraw.py input.excalidraw --output output.png
pip install playwright && playwright install chromium
When designing Excalidraw JSON:
{"type": "text", "x": shape_x + shape_width/2, "y": shape_y + shape_height/2,
"text": "Label Text", "textAlign": "center", "verticalAlign": "middle",
"fontSize": 20, "fontFamily": 1}
startBinding/endBinding to connect shapesbackgroundColor on rectangles)"type": "excalidraw" at the top level of the JSON#1e90ff (stroke), #1864ab (fill)#2f9e44 (stroke/fill)#e8a120 (stroke), #f08c00 (fill)#e03131 (stroke/fill)#7950f2 (stroke/fill)#0c8599 (stroke/fill)#ffffff (light) or #1e1e2e (dark)scripts/render_excalidraw.py — Main render script (Playwright + Chromium)scripts/render_local.html — HTML template with jsdelivr CDN exportToSvg