C4 Architecture

Generates C4 architecture diagrams using Mermaid syntax, covering all four levels plus dynamic flow diagrams. The workflow is straightforward: it analyzes your codebase, creates diagrams at the right abstraction level, and outputs markdown files with context. The guidance here is solid, especially the emphasis on stopping at container diagrams for most teams since component and deployment diagrams often add more noise than value. Includes practical syntax examples for people, systems, containers, components, boundaries, and relationships. The styling options help when labels overlap, which happens more often than you'd think. Good for documenting existing systems or designing new ones when stakeholders need visual artifacts.

skills.sh installs: 430
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill c4-architecture --agent claude-code

Installs into .claude/skills of the current project.

Files

C4 Architecture Documentation

Generate software architecture documentation using C4 model diagrams in Mermaid syntax.

Workflow

Understand scope - Determine which C4 level(s) are needed based on audience
Analyze codebase - Explore the system to identify components, containers, and relationships
Generate diagrams - Create Mermaid C4 diagrams at appropriate abstraction levels
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