mermaid

Mermaid Diagrams Skill

Create valid, well-formed Mermaid.js diagrams with automatic validation and error repair guidance.

Requirement: rp1 CLI v0.3.0 or later (includes agent-tools mmd-validate command)

What This Skill Does

• Creates diagrams: Flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, Gantt charts, and more
• Validates syntax: Uses rp1 agent-tools mmd-validate CLI tool for verification
• Troubleshoots errors: Categorizes validation errors and guides repairs
• Integrates with fixer agent: Supports bulk validation and automatic repair workflows

When to Use

Activate this skill when:

• User requests any diagram, chart, or visualization
• Creating flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, Gantt charts
• Validating existing mermaid code blocks
• Debugging diagram syntax errors
• Working with markdown files containing mermaid blocks

Trigger phrases: "create a diagram", "draw a flowchart", "visualize this process", "sequence diagram for", "ER diagram", "class diagram", "fix this mermaid", "validate diagram"

Validation Workflow

CRITICAL: Every diagram MUST be validated before being considered complete.

Step 1: Create the Diagram

1. Consult reference.md for syntax
2. Choose the appropriate diagram type
3. Follow proper syntax conventions:
   • Start with diagram type declaration
   • Use consistent indentation
   • Quote labels with special characters
   • Use correct arrow types for the diagram

Step 2: Validate Using CLI Tool

# Validate markdown file (all embedded diagrams)
rp1 agent-tools mmd-validate path/to/document.md

# Validate standalone mermaid file
rp1 agent-tools mmd-validate path/to/diagram.mmd

# Validate from stdin (for inline diagrams)
echo 'flowchart TD
    A --> B' | rp1 agent-tools mmd-validate

Step 3: Handle Validation Results

The CLI tool outputs structured JSON in a ToolResult envelope: