skills.rest
zzafergok
zzafergokCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

c4-architecture

Generate C4 model architecture diagrams in Mermaid syntax from codebase analysis.

Updated Jan 3, 2026
Search Tags:#documentation#system design#mermaid#microservices#visualization#c4 model#architecture diagram
One-click install
npx skills add https://github.com/zzafergok/soonur --skill c4-architecture-zzafergok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: c4-architecture
Source: https://github.com/zzafergok/soonur/tree/main/.agent/skills/c4-architecture
Command: npx skills add https://github.com/zzafergok/soonur --skill c4-architecture-zzafergok

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing and maintaining software architecture documentation is time-consuming, and teams often struggle to produce consistent, audience-appropriate diagrams that accurately reflect their system's structure. ## Core Features & Use Cases - Multi-Level C4 Diagrams: Generate System Context, Container, Component, Deployment, and Dynamic diagrams using Mermaid C4 syntax. - Audience-Appropriate Output: Select the right abstraction level for executives, product managers, architects, developers, or DevOps. - Microservices & Event-Driven Modeling: Correctly model services, databases, and individual Kafka topics or queues as containers. - Use Case: Ask the AI to document your Next.js application's architecture, and receive a docs/architecture/c4-context.md and c4-containers.md with properly styled Mermaid diagrams showing actors, containers, and labeled relationships. ## Quick Start Generate C4 context and container diagrams for this codebase and write them to docs/architecture/.

Frequently Asked Questions about c4-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a C4 architecture diagram in Mermaid?▼

Use Mermaid's C4 syntax such as C4Context, C4Container, or C4Component blocks, defining elements with Person, System, Container, or Component and connecting them with Rel relationships. Each element needs a label, technology, and description.

What are the C4 model diagram levels?▼

The C4 model has four levels: System Context (system and external actors), Container (apps, databases, services), Component (internal components), and Deployment (infrastructure nodes). Context and Container diagrams are sufficient for most teams.

When should I create a C4 component diagram?▼

Create Component diagrams only when they genuinely add value, typically for developers needing internal structure detail. Context and Container diagrams cover most documentation needs for product managers, architects, and executives.

How do I model microservices in C4 diagrams?▼

Model each microservice as a container when one team owns it, or promote it to a software system when separate teams own different services. For event-driven systems, show individual Kafka topics or queues as containers rather than one broker box.

Why do my C4 diagram relationship labels overlap?▼

Overlapping labels happen with dense layouts. Use UpdateRelStyle with $offsetX and $offsetY parameters to reposition relationship labels, and UpdateLayoutConfig to control shapes and boundaries per row.

Related Skills

Explore More Software Engineering Skills→
cjenningscjennings

c4-analyze

Generate C4 architecture diagrams from codebases as draw.io files.

Community
Advanced
igot-aiigot-ai

create-architecture

Generate architecture documentation with ADRs, Mermaid diagrams, and tech-stack rationale.

Official
Advanced
cornmanwtfcornmanwtf

system-design-documentation

Generate system design documentation with C4 diagrams and ADRs.

Community
Advanced
TacuchiTacuchi

diagrams

Generate architecture diagrams from system models using C4, Structurizr DSL, Mermaid, and PlantUML.

Community
Advanced