Loading...
Loading...
Create and validate Mermaid diagrams in markdown files
npx skill4agent add codihaus/claude-skills diagramSkill Awareness: Seefor all available skills.skills/_registry.md
- Use with:
for architecture visualization/dev-scout- Use with:
for flow diagrams/dev-specs- Related:
for document relationships/docs-graph
npm install -g @mermaid-js/mermaid-climmdc --version/diagram validate path/to/file.md # Validate diagrams in file
/diagram validate # Validate file from context
/diagram fix path/to/file.md # Validate and auto-fixmmdc -i <temp-file> -o /tmp/mermaid-out.svg 2>&1references/common-errors.md| Type | Keyword | Use For |
|---|---|---|
| Flowchart | | Process flows, decisions |
| Sequence | | API flows, interactions |
| State | | Status lifecycle |
| ER Diagram | | Database schema |
| Class | | Object structures |
| Type | Keyword | Use For |
|---|---|---|
| Pie | | Distribution |
| XY Chart | | Line/bar charts, trends |
| Quadrant | | Priority matrix, effort/impact |
| Sankey | | Flow visualization, funnels |
| Type | Keyword | Use For |
|---|---|---|
| Architecture | | AWS/Cloud diagrams, CI/CD |
| Block | | System blocks, layouts |
| C4 | | Software architecture levels |
| Packet | | Network protocols |
| Type | Keyword | Use For |
|---|---|---|
| Gantt | | Project timelines |
| Timeline | | Milestones, phases |
| Journey | | User experience mapping |
| Mindmap | | Feature breakdown |
| Git Graph | | Branch strategies |
| Requirement | | Requirements tracking |
| Kanban | | Task boards |
references/diagram-types.mdarchitecture-betaarchitecture-beta
group aws(cloud)[AWS Region]
group vpc(cloud)[VPC] in aws
service alb(server)[Load Balancer] in vpc
service ec2(server)[EC2] in vpc
service rds(database)[RDS] in vpc
service s3(disk)[S3] in aws
alb:R --> L:ec2
ec2:R --> L:rds
ec2:B --> T:s3| Element | Syntax |
|---|---|
| Group | |
| Nested group | |
| Service | |
| Service in group | |
| Edge | |
| Junction | |
clouddatabasediskinternetserverLRTBservice lambda(logos:aws-lambda)[Lambda]
service s3(logos:aws-s3)[S3]# Extract and validate mermaid blocks
# Save mermaid content to temp file, then:
mmdc -i /tmp/mermaid-temp.mmd -o /tmp/mermaid-out.svg 2>&1
# Exit code 0 = valid, non-zero = error
# Stderr contains error detailsreferences/common-errors.md<!-- After creating mermaid diagram -->
1. Write the diagram to file
2. Run: mmdc -i <file> -o /tmp/validate.svg 2>&1
3. If error, fix and retry
4. Continue with skill workflowUser: /diagram validate plans/billing/brd/flows/FL-MAIN-001-overview.md
Claude: Validating mermaid diagrams in FL-MAIN-001-overview.md...
Found 2 diagrams:
1. Line 5-15: flowchart LR
✓ Valid
2. Line 20-35: sequenceDiagram
✗ Error: Parse error on line 8
→ "End" is a reserved word, wrap in quotes: "End"
Fixing diagram 2...
Applied fix: End → "End"
Re-validating... ✓ Valid
Updated file. All diagrams now valid.references/diagram-types.mdreferences/common-errors.md