C4 Architecture

Turns C4 model architecture diagrams into Mermaid syntax you can drop straight into your docs. Covers all four levels: context, container, component, and deployment, plus dynamic diagrams for request flows. The skill follows C4's core philosophy that context and container diagrams are enough for most teams, only going deeper when it actually adds value. Includes practical syntax for boundaries, relationships, and styling, with examples ranging from simple PWAs to microservices deployments. Good opinionated defaults about keeping diagrams under 20 elements and always labeling relationships with verbs and technology stacks. It will analyze your codebase first to understand what needs documenting.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 5
skills.sh installs: 4.3K
GitHub stars: 2.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add softaworks/agent-toolkit --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