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.
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
- Read existing rules: Load
.claude/rules/mermaid.mdfor known patterns - Extract diagrams: Find all Mermaid code blocks in the target file(s)
- Validate with mmdc: Run
mmdc -i <temp_file> -o /dev/nullto check syntax - Fix errors: Apply fixes based on mmdc error output
- Update rules: Add newly discovered error patterns to mermaid.md
Validation Command
# 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:
- Document the error: Capture the error message from mmdc
- Identify the fix: What change resolved the error?
- Update mermaid.md: Add a new rule entry with:
- Rule number (next sequential)
- Category name
- Pattern description
- Fix/avoidance guidance
Example new rule format:
**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:
# 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
- Read the target file(s) containing Mermaid diagrams
- For each diagram:
- Extract the Mermaid code block
- Write to a temporary
.mmdfile - Run
mmdcto validate - If error: fix based on error message and known rules
- If new pattern: document for mermaid.md update
- Replace fixed diagrams in source file(s)
- 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-mermaidfor that) - Test each fix with mmdc before applying
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?