preview-mermaid

Preview Mermaid Skill

Interactive Mermaid diagram viewer that renders flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, Gantt charts, pie charts, and more.

Agent Usage

When the user asks to preview a Mermaid diagram, DO NOT build HTML manually. Use the Bash tool to execute this skill's run.sh script:

# Preview a file
./run.sh diagram.mmd

# Pipe content
echo "graph TD
  A-->B" | ./run.sh

The script handles all HTML generation and automatically opens the result in the browser. Do NOT open the file manually to avoid duplicate tabs.

Usage

# Preview a Mermaid diagram file
/preview-mermaid diagram.mmd

# Pipe Mermaid content (preferred for temporary content)
cat flowchart.mermaid | /preview-mermaid
echo "graph TD\n  A-->B" | /preview-mermaid

# With custom background color
/preview-mermaid sequence.mmd --background "#ffffff"

Best Practice: For temporary or generated content, prefer piping over creating temporary files. This avoids cluttering your filesystem and the content is automatically cleaned up.

Options

The script works with sensible defaults but supports these flags for flexibility:

• -o, --output PATH - Custom output path
• --no-browser - Skip browser, output file path only

Features

• All diagram types supported:
  • Flowcharts
  • Sequence diagrams
  • Class diagrams
  • State diagrams
  • ER diagrams (Entity-Relationship)
  • Gantt charts
  • Pie charts
  • Git graphs
  • User journey diagrams
  • Requirement diagrams
• Interactive diagrams with clickable nodes
• Pan and zoom for large diagrams
• Export to SVG functionality
• Light/dark theme support
• Auto-layout for optimal diagram rendering
• Responsive design adapts to screen size

When to Use This Skill

Use this skill when the user wants to:

• Visualize flowcharts and process diagrams
• Create sequence diagrams for system interactions
• Document software architecture with class diagrams
• Design database schemas with ER diagrams
• Plan projects with Gantt charts
• Share visual documentation