c4-architecture

Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "

By softaworks · 4,088 installs

npx skills add softaworks/agent-toolkit --skill c4-architecture

Source repository · Upstream listing

C4 Architecture Documentation Generate software architecture documentation using C4 model diagrams in Mermaid syntax. Workflow 1. Understand scope Determine which C4 level(s) are needed based on audience 2. Analyze codebase Explore the system to identify components, containers, and relationships 3. Generate diagrams Create Mermaid C4 diagrams at appropriate abstraction levels 4. Document Write diagrams to markdown files with explanatory context C4 Diagram Levels Select the appropriate level based on the documentation need: Level Diagram Type Audience Shows When to Create 1 C4Context Everyone System + external actors Always (required) 2 C4Container Technical Apps, databases, services Always (required) 3 C4Component Developers Internal components Only if adds value 4 C4Deployment DevOps Infrastructure nodes For production systems C4Dynamic Technical Request flows (numbered) For complex workflows Key Insight: "Context + Container diagrams are sufficient for most software development teams." Only create Component/Code diagrams when they genuinely add value. Quick Start Examples System Context (Level 1) Container Diagram (Level 2) Component Diagram (Level 3) Dynamic Diagram (Request Flow) Deployment Diagram Element Syntax People and Systems Containers Components Boundaries Relationships Deployment Nodes Styling and Layout Layout Configuration $c4ShapeInRow Number of shapes per row (default: 4) $c4BoundaryInRow Number of boundaries per row (default: 2) Element Styling Relationship Styling Use $offsetX and $offsetY to fix overlapping relationship labels. Best Practices Essential Rules 1. Every element must have : Name, Type, Technology (where applicable), and Description 2. Use unidirectional arrows only Bidirectional arrows create ambiguity 3. Label arrows with action verbs "Sends email using", "Reads from", not just "uses" 4. Include technology labels "JSON/HTTPS", "JDBC", "gRPC" 5. Stay under 20 elements per diagram Split complex systems into multiple diagrams Clarity Guidelines 1. Start at Level 1 Context diagrams help frame the system scope 2. One diagram per file Keep diagrams focused on a single abstraction level 3. Meaningful aliases Use descriptive aliases (e.g., orderService not s1 ) 4. Concise descriptions Keep descriptions under 50 characters when possible 5. Always include a title "System Context diagram for [System Name]" What to Avoid See [references/common mistakes.md](references/common mistakes.md) for detailed anti patterns: Confusing containers (deployable) vs components (non deployable) Modeling shared libraries as containers Showing message brokers as single containers instead of individual topics Adding undefined abstraction levels like "subcomponents" Removing type labels to "simplify" diagrams Microservices Guidelines Single Team Ownership Model each microservice as a container (or container group): Multi Team Ownership Promote microservices to software systems when owned by separate teams: Event Driven Architecture Show individual topics/queues as containers, NOT a single "Kafka" box: Output Location Write architecture documentation to docs/architecture/ with naming convention: c4 context.md System context diagram c4 containers.md Container diagram c4 components {feature}.md Component diagrams per feature c4 deployment.md Deployment diagram c4 dynamic {flow}.md Dynamic diagrams for specific flows Audience Appropriate Detail Audience Recommended Diagrams Executives System Context only Product Managers Context + Container Architects Context + Container + key Components Developers All levels as needed DevOps Container + Deployment References [references/c4 syntax.md](references/c4 syntax.md) Complete Mermaid C4 syntax [references/common mistakes.md](references/common mistakes.md) Anti patterns to avoid [references/advanced patterns.md](references/advanced patterns.md) Microservices, event driven, deployment