diagram-to-image

Diagram to Image

Convert Mermaid diagrams and Markdown tables to PNG images via the mermaid-red API (diagramless.xyz). Produces high-quality, styled output with custom themes — no heavy local dependencies needed.

When to Use

Use this skill when:

• User has a Mermaid diagram that needs to be converted to an image
• User has a Markdown table that needs to be converted to an image
• User is writing content for X/Twitter and needs visual exports
• User asks to "convert to image", "export as PNG", "make this an image", or similar

Prerequisites

The bundled script uses Node.js built-in fetch (Node 18+). No npm install needed.

# The render script is bundled with this skill:
SKILL_DIR=~/.claude/skills/diagram-to-image/scripts
ls $SKILL_DIR/diagram-to-image.mjs

Smart Output Location

IMPORTANT: Determine the best output location based on context. Follow this decision tree:

1. User Specifies Path

If user explicitly mentions a path or filename, use that.

2. Project Context Detection

Check for common image/asset directories in the current project:

# Check for existing image directories (in order of preference)
ls -d ./images ./assets ./img ./static ./public/images ./assets/images 2>/dev/null | head -1

Use the first existing directory found. Common patterns:

• ./images/ - General projects
• ./assets/ - Web projects
• ./assets/images/ - Structured web projects
• ./public/images/ - Next.js, React projects
• ./static/ - Hugo, other static site generators
• ./img/ - Short form convention

3. Article/Document Context

If user is writing an article or document:

• Look for the document's directory
• Create images/ subdirectory if appropriate
• Name the image based on the document name + descriptor

4. Conversation Context

Analyze the conversation to determine:

• What the diagram represents → Use for filename (e.g., auth-flow.png, user-journey.png)
• Related file being discussed → Place image near that file
• Topic being discussed → Use for naming