Agent skill

mermaid-fix

Fix and validate Mermaid diagrams using mermaid-cli (mmdc). Use when Claude needs to fix parsing errors in Mermaid diagrams, validate diagrams, or when encountering Mermaid syntax issues. This skill reads rules from .claude/rules/mermaid.md and updates it with newly discovered patterns.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/mermaid-fix

SKILL.md

Mermaid Fix

Fixes Mermaid diagram parsing errors using mermaid-cli and discovers new rules.

Quick Start

  1. Read existing rules: Load .claude/rules/mermaid.md for known patterns
  2. Extract diagrams: Find all Mermaid code blocks in the target file(s)
  3. Validate with mmdc: Run mmdc -i <temp_file> -o /dev/null to check syntax
  4. Fix errors: Apply fixes based on mmdc error output
  5. Update rules: Add newly discovered error patterns to mermaid.md

Validation Command

bash
# Create temp file, validate, check exit code
mmdc -t neutral -i diagram.mmd -o /dev/null
# Exit code 0 = valid, non-zero = error

Common Fixes

Based on existing rules in mermaid.md:

Error Pattern Fix
Graph TD Change to lowercase: graph TD
<br/>, <b>, <i> in labels Remove HTML tags, use plain text
dmzSubnet style naming Use hyphens: dmz-subnet
Missing graph direction Add LR, TD, RL, or BT

Discovering New Rules

When you encounter a new error pattern:

  1. Document the error: Capture the error message from mmdc
  2. Identify the fix: What change resolved the error?
  3. Update mermaid.md: Add a new rule entry with:
    • Rule number (next sequential)
    • Category name
    • Pattern description
    • Fix/avoidance guidance

Example new rule format:

markdown
**N. Category Name**
- Error pattern: `<what causes the error>`
- Fix: `<how to resolve>`
- Example: `<before -> after>`

Workflow Steps

Quick Mode (Markdown Files with Multiple Diagrams)

For markdown files containing multiple Mermaid diagrams, use concurrent validation:

bash
# Validate all diagrams in a markdown file concurrently (4 workers by default)
python3 .claude/skills/mermaid-fix/scripts/validate_markdown_mermaid.py <path/to/file.md>

# Specify number of parallel workers
python3 .claude/skills/mermaid-fix/scripts/validate_markdown_mermaid.py <path/to/file.md> --workers 8

Step-by-Step Mode

  1. Read the target file(s) containing Mermaid diagrams
  2. For each diagram:
    • Extract the Mermaid code block
    • Write to a temporary .mmd file
    • Run mmdc to validate
    • If error: fix based on error message and known rules
    • If new pattern: document for mermaid.md update
  3. Replace fixed diagrams in source file(s)
  4. If new patterns were discovered, update .claude/rules/mermaid.md

Constraints

  • Preserve the diagram's semantic meaning
  • Only fix syntax/structure issues
  • Do not "optimize" or "improve" the visual design (use /optimize-mermaid for that)
  • Test each fix with mmdc before applying

Expand your agent's capabilities with these related and highly-rated skills.

Didn't find tool you were looking for?

Be as detailed as possible for better results