mermaid-diagram-to-image

Mermaid Diagram to Image

Convert Mermaid diagrams to high-quality images in PNG, SVG, or PDF formats using the mermaid-cli tool.

When to Use This Skill

Activate this skill when:

• Generating Mermaid diagram syntax and wanting to provide a visual representation to the user
• Converting existing Mermaid diagrams (from files or discussion context) to image formats
• User requests diagram visualization in a specific format (PNG for embedding, SVG for web, PDF for print)

Quick Start

To convert a Mermaid diagram to an image:

1. Identify the source - Determine if working with diagram content, a file path, or inline Mermaid syntax
2. Create temporary file if needed - Use mktemp -t mermaid-XXXXXX.mmd for inline content
3. Run conversion - Execute mmdc with appropriate flags (input, output, dimensions, theme)
4. Clean up - Use rm -f /path/to/temp.mmd to remove temporary file
5. Report results - Confirm successful conversion with output filename

Conversion Workflow

Step 1: Parse Input

Determine the source of the Mermaid diagram:

• Diagram content in context - Mermaid syntax recently generated or discussed
• File path - User provides a path to a .mmd or .md file
• Inline Mermaid content - Raw Mermaid syntax provided by user
• Format preferences - User specifies output format (PNG, SVG, PDF) and options

Step 2: Set Up Variables

Establish conversion parameters with sensible defaults:

Output Format

• Default: png
• Options: png, svg, pdf

Output Filename

• Default pattern: mermaid-diagram-{SHORT_DESCRIPTIVE_NAME}
• Example: mermaid-diagram-flowchart.png, mermaid-diagram-sequence.svg
• Base name on diagram type or content context

Default Image Settings (High Resolution)

• Width: 1600 pixels
• Height: 1200 pixels
• Scale: 2 (for crisp rendering)

Optional Parameters

• Theme: default, forest, dark, neutral
• Background color: hex code or named color (e.g., transparent, white, #f0f0f0)
• PDF fit: -f flag for PDF output