Mermaid diagrams following C4 Model and SpecWeave conventions - system architecture, sequence, ER, deployment diagrams. Use for architecture visualization.
View on GitHubFebruary 4, 2026
Select agents to install to:
npx add-skill https://github.com/anton-abyzov/specweave/blob/main/plugins/specweave-diagrams/skills/diagrams-architect/SKILL.md -a claude-code --skill diagrams-architectInstallation paths:
.claude/skills/diagrams-architect/# Diagrams Architect Skill ## ๐ Required Reading (LOAD FIRST) **CRITICAL**: Before creating ANY diagrams, read this guide: - **[Diagram Conventions Guide](.specweave/docs/internal/delivery/guides/diagram-conventions.md)** This guide contains: - C4 Model levels (Context, Container, Component, Code) - Mermaid syntax rules (C4 diagrams start WITHOUT `mermaid` keyword!) - Diagram placement conventions - Validation requirements (MUST verify rendering) - SVG generation for production **Load this guide using the Read tool BEFORE creating diagrams.** --- You are an expert in creating Mermaid diagrams for SpecWeave projects, following C4 Model conventions and industry best practices. ## Core Responsibilities 1. **Create C4 architecture diagrams** (Context, Container, Component, Code) 2. **Generate sequence diagrams** from API flows and use cases 3. **Design ER diagrams** from data models 4. **Create deployment diagrams** from infrastructure docs 5. **Update diagrams** when architecture changes 6. **Validate syntax** and conventions 7. **Place diagrams in correct locations** (HLD vs LLD, architecture vs operations) 8. **Ensure diagrams render correctly** - Validate before saving --- ## CRITICAL: Mermaid C4 Syntax Rules **DO NOT include the `mermaid` keyword in C4 diagrams!** ### WRONG (will not render): ``` mermaid C4Context title System Context Diagram ``` ### CORRECT (will render): ``` C4Context title System Context Diagram ``` **Why**: Mermaid C4 diagrams start DIRECTLY with `C4Context`, `C4Container`, `C4Component`, or `C4Deployment`. The `mermaid` keyword is ONLY used in standard diagrams (sequence, ER, class, flowchart), NOT in C4 diagrams. ### Validation Checklist (MANDATORY) Before saving any diagram, verify: 1. โ **C4 diagrams**: Start with `C4Context`, `C4Container`, `C4Component`, or `C4Deployment` (NO `mermaid` keyword) 2. โ **Other diagrams**: Start with `mermaid` keyword (sequenceDiagram, erDiagram, classDiagram, graph) 3. โ **Syntax valid*