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 5. Default Fallback If no context clues: Use current working directory Generate descriptive filename from diagram content Filename Generation Create meaningful filenames based on content analysis: Content Pattern Example Filename flowchart with auth/login auth-flow.png sequenceDiagram with API api-sequence.png erDiagram entity-relationship.png pie chart about X x-distribution.png gantt chart project-timeline.png Table with comparison comparison-table.png Table with data data-table.png Rules: Use kebab-case (lowercase with hyphens) Keep names concise but descriptive (2-4 words) Avoid generic names like diagram.png or image.png Include topic/subject when identifiable Conversion Process Step 1: Analyze Context Before converting, gather context: Check current working directory Look for existing image directories Analyze diagram/table content for naming Consider any files or topics mentioned in conversation Step 2: Determine Output Path
Example logic (implement mentally, not as literal script)
if user_specified_path: output_path = user_specified_path elif exists ( "./images" ) : output_path = "./images/{generated_name}.png" elif exists ( "./assets" ) : output_path = "./assets/{generated_name}.png" elif exists ( "./public/images" ) : output_path = "./public/images/{generated_name}.png" else: output_path = "./{generated_name}.png" Step 3: Create Temporary Input File
For Mermaid diagrams
cat
/tmp/diagram.mmd << 'DIAGRAM_EOF'
DIAGRAM_EOF
For Markdown tables
cat
/tmp/table.md << 'TABLE_EOF'