Agent skill

C4 Architecture

by davila7 in davila7/claude-code-templates

Generate architecture documentation using C4 model Mermaid diagrams.

MITAuto-check passedDevelopment

Install C4 Architecture

skills CLI

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

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install davila7/claude-code-templates c4-architecture --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cli-tool/components/skills/creative-design/c4-architecture .claude/skills/c4-architecture && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "c4-architecture" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/c4-architecture into .claude/skills/c4-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-architecture", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/c4-architecture

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add davila7/claude-code-templates --skill c4-architecture -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install davila7/claude-code-templates c4-architecture --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .agents/skills && cp -r skills-src/cli-tool/components/skills/creative-design/c4-architecture .agents/skills/c4-architecture && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "c4-architecture" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/c4-architecture into .agents/skills/c4-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-architecture", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add davila7/claude-code-templates --skill c4-architecture -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install davila7/claude-code-templates c4-architecture --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/cli-tool/components/skills/creative-design/c4-architecture .cursor/skills/c4-architecture && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "c4-architecture" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/c4-architecture into .cursor/skills/c4-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-architecture", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/davila7/claude-code-templates.git --path cli-tool/components/skills/creative-design/c4-architecture

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add davila7/claude-code-templates --skill c4-architecture -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install davila7/claude-code-templates c4-architecture --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/cli-tool/components/skills/creative-design/c4-architecture .gemini/skills/c4-architecture && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "c4-architecture" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/c4-architecture into .gemini/skills/c4-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-architecture", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install davila7/claude-code-templates c4-architecture

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add davila7/claude-code-templates --skill c4-architecture -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .github/skills && cp -r skills-src/cli-tool/components/skills/creative-design/c4-architecture .github/skills/c4-architecture && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "c4-architecture" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/c4-architecture into .github/skills/c4-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-architecture", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add davila7/claude-code-templates --skill c4-architecture -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install davila7/claude-code-templates c4-architecture --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/cli-tool/components/skills/creative-design/c4-architecture .opencode/skills/c4-architecture && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "c4-architecture" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/c4-architecture into .opencode/skills/c4-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-architecture", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: c4-architecture
GitHub stars: 33k
Used in: 3 other repos
Token cost: ~2.6k tokens
SKILL.md length: 475 words
Files: 5 (incl. references)
Skills in repo: 479
Repo updated: Oct 10, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Generate architecture documentation using C4 model Mermaid diagrams.

Works in 4 steps: Understand scope - Determine which C4… → Analyze codebase - Explore the system to… → Generate diagrams - Create Mermaid C4… → …
Asked to create architecture diagrams
SKILL.md covers Workflow, C4 Diagram Levels, Quick Start Examples and Element Syntax, plus 5 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

C4 Architecture is an agent skill from davila7/claude-code-templates. 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", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".

Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `README.md`, `references/advanced-patterns.md` and `references/c4-syntax.md`).

It sits in Development, covering Diagrams. The repository describes itself as: CLI tool for configuring and monitoring Claude Code. The licence is MIT.

When your agent uses it

Asked to create architecture diagrams
Document system architecture
Visualize software structure
Create C4 diagrams

Example prompts

“architecture diagram”
“C4 diagram”
“system context”
“/c4-architecture”

Requirements

Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit c0ca7da. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are mermaid).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

C4 Architecture loads about 2.6k tokens when it runs, and up to ~14k if it reads all its reference files. Until then it costs about 115 tokens; SKILL.md has 475 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~115
When it runs · the whole SKILL.md, loaded when a task matches: ~2.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~14k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from davila7/claude-code-templates at commit c0ca7da, republished under its MIT licence (© davila7). 475 words, ~2,644 tokens.

Download SKILL.mdSave it as .claude/skills/c4-architecture/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.

name: c4-architecture
description: 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", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".

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

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)

mermaid

C4Context
  title System Context - Workout Tracker

  Person(user, "User", "Tracks workouts and exercises")
  System(app, "Workout Tracker", "Vue PWA for tracking strength and CrossFit workouts")
  System_Ext(browser, "Web Browser", "Stores data in IndexedDB")

  Rel(user, app, "Uses")
  Rel(app, browser, "Persists data to", "IndexedDB")

Container Diagram (Level 2)

mermaid

C4Container
  title Container Diagram - Workout Tracker

  Person(user, "User", "Tracks workouts")

  Container_Boundary(app, "Workout Tracker PWA") {
    Container(spa, "SPA", "Vue 3, TypeScript", "Single-page application")
    Container(pinia, "State Management", "Pinia", "Manages application state")
    ContainerDb(indexeddb, "IndexedDB", "Dexie", "Local workout storage")
  }

  Rel(user, spa, "Uses")
  Rel(spa, pinia, "Reads/writes state")
  Rel(pinia, indexeddb, "Persists", "Dexie ORM")

Component Diagram (Level 3)

mermaid

C4Component
  title Component Diagram - Workout Feature

  Container(views, "Views", "Vue Router pages")

  Container_Boundary(workout, "Workout Feature") {
    Component(useWorkout, "useWorkout", "Composable", "Workout execution state")
    Component(useTimer, "useTimer", "Composable", "Timer state machine")
    Component(workoutRepo, "WorkoutRepository", "Dexie", "Workout persistence")
  }

  Rel(views, useWorkout, "Uses")
  Rel(useWorkout, useTimer, "Controls")
  Rel(useWorkout, workoutRepo, "Saves to")

Dynamic Diagram (Request Flow)

mermaid

C4Dynamic
  title Dynamic Diagram - User Sign In Flow

  ContainerDb(db, "Database", "PostgreSQL", "User credentials")
  Container(spa, "Single-Page App", "React", "Banking UI")

  Container_Boundary(api, "API Application") {
    Component(signIn, "Sign In Controller", "Express", "Auth endpoint")
    Component(security, "Security Service", "JWT", "Validates credentials")
  }

  Rel(spa, signIn, "1. Submit credentials", "JSON/HTTPS")
  Rel(signIn, security, "2. Validate")
  Rel(security, db, "3. Query user", "SQL")

  UpdateRelStyle(spa, signIn, $textColor="blue", $offsetY="-30")

Deployment Diagram

mermaid

C4Deployment
  title Deployment Diagram - Production

  Deployment_Node(browser, "Customer Browser", "Chrome/Firefox") {
    Container(spa, "SPA", "React", "Web application")
  }

  Deployment_Node(aws, "AWS Cloud", "us-east-1") {
    Deployment_Node(ecs, "ECS Cluster", "Fargate") {
      Container(api, "API Service", "Node.js", "REST API")
    }
    Deployment_Node(rds, "RDS", "db.r5.large") {
      ContainerDb(db, "Database", "PostgreSQL", "Application data")
    }
  }

  Rel(spa, api, "API calls", "HTTPS")
  Rel(api, db, "Reads/writes", "JDBC")

Element Syntax

People and Systems

Person(alias, "Label", "Description")
Person_Ext(alias, "Label", "Description")       # External person
System(alias, "Label", "Description")
System_Ext(alias, "Label", "Description")       # External system
SystemDb(alias, "Label", "Description")         # Database system
SystemQueue(alias, "Label", "Description")      # Queue system

Containers

Container(alias, "Label", "Technology", "Description")
Container_Ext(alias, "Label", "Technology", "Description")
ContainerDb(alias, "Label", "Technology", "Description")
ContainerQueue(alias, "Label", "Technology", "Description")

Components

Component(alias, "Label", "Technology", "Description")
Component_Ext(alias, "Label", "Technology", "Description")
ComponentDb(alias, "Label", "Technology", "Description")

Boundaries

Enterprise_Boundary(alias, "Label") { ... }
System_Boundary(alias, "Label") { ... }
Container_Boundary(alias, "Label") { ... }
Boundary(alias, "Label", "type") { ... }

Relationships

Rel(from, to, "Label")
Rel(from, to, "Label", "Technology")
BiRel(from, to, "Label")                        # Bidirectional
Rel_U(from, to, "Label")                        # Upward
Rel_D(from, to, "Label")                        # Downward
Rel_L(from, to, "Label")                        # Leftward
Rel_R(from, to, "Label")                        # Rightward

Deployment Nodes

Deployment_Node(alias, "Label", "Type", "Description") { ... }
Node(alias, "Label", "Type", "Description") { ... }  # Shorthand

Styling and Layout

Layout Configuration

UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

$c4ShapeInRow - Number of shapes per row (default: 4)
$c4BoundaryInRow - Number of boundaries per row (default: 2)

Element Styling

UpdateElementStyle(alias, $fontColor="red", $bgColor="grey", $borderColor="red")

Relationship Styling

UpdateRelStyle(from, to, $textColor="blue", $lineColor="blue", $offsetX="5", $offsetY="-10")

Use $offsetX and $offsetY to fix overlapping relationship labels.

Best Practices

Essential Rules

Every element must have: Name, Type, Technology (where applicable), and Description
Use unidirectional arrows only - Bidirectional arrows create ambiguity
Label arrows with action verbs - "Sends email using", "Reads from", not just "uses"
Include technology labels - "JSON/HTTPS", "JDBC", "gRPC"
Stay under 20 elements per diagram - Split complex systems into multiple diagrams

Show full SKILL.md (208 more words)Show less

Clarity Guidelines

Start at Level 1 - Context diagrams help frame the system scope
One diagram per file - Keep diagrams focused on a single abstraction level
Meaningful aliases - Use descriptive aliases (e.g., orderService not s1)
Concise descriptions - Keep descriptions under 50 characters when possible
Always include a title - "System Context diagram for [System Name]"

What to Avoid

See 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):

mermaid

C4Container
  title Microservices - Single Team

  System_Boundary(platform, "E-commerce Platform") {
    Container(orderApi, "Order Service", "Spring Boot", "Order processing")
    ContainerDb(orderDb, "Order DB", "PostgreSQL", "Order data")
    Container(inventoryApi, "Inventory Service", "Node.js", "Stock management")
    ContainerDb(inventoryDb, "Inventory DB", "MongoDB", "Stock data")
  }

Multi-Team Ownership

Promote microservices to software systems when owned by separate teams:

mermaid

C4Context
  title Microservices - Multi-Team

  Person(customer, "Customer", "Places orders")
  System(orderSystem, "Order System", "Team Alpha")
  System(inventorySystem, "Inventory System", "Team Beta")
  System(paymentSystem, "Payment System", "Team Gamma")

  Rel(customer, orderSystem, "Places orders")
  Rel(orderSystem, inventorySystem, "Checks stock")
  Rel(orderSystem, paymentSystem, "Processes payment")

Event-Driven Architecture

Show individual topics/queues as containers, NOT a single "Kafka" box:

mermaid

C4Container
  title Event-Driven Architecture

  Container(orderService, "Order Service", "Java", "Creates orders")
  Container(stockService, "Stock Service", "Java", "Manages inventory")
  ContainerQueue(orderTopic, "order.created", "Kafka", "Order events")
  ContainerQueue(stockTopic, "stock.reserved", "Kafka", "Stock events")

  Rel(orderService, orderTopic, "Publishes to")
  Rel(stockService, orderTopic, "Subscribes to")
  Rel(stockService, stockTopic, "Publishes to")
  Rel(orderService, stockTopic, "Subscribes to")

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 - Complete Mermaid C4 syntax
references/common-mistakes.md - Anti-patterns to avoid
references/advanced-patterns.md - Microservices, event-driven, deployment

Files

SKILL.md and 4 other files (references) in cli-tool/components/skills/creative-design/c4-architecture of davila7/claude-code-templates.

SKILL.md
README.md
references/advanced-patterns.md
references/c4-syntax.md
references/common-mistakes.md

Open the folder on GitHubat commit c0ca7da

Used in 3 other repositories

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in davila7/claude-code-templates, which our catalogue first saw on October 7, 2026.

Compare with similar skills

C4 Architecture next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

C4 Architecture compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
C4 Architecture this skilldavila7/claude-code-templates	33k	3 repos	~2.6k	Automated safety check: Pass	MIT	today
Archify Diagramstt-a1i/archify	81k	—	~2.9k	Automated safety check: Pass	MIT	today
JSON Canvasheyitsnoah/claudesidian	2.6k	18 repos	~3.5k	Automated safety check: Pass	MIT	6 mo ago
Diagram Designcathrynlavery/diagram-design	48k	1 repos	~7.6k	Automated safety check: Pass	MIT	today
Fireworks Tech Graphtisfeng/Easydict	15k	1 repos	~1.4k	Automated safety check: Pass	MIT	4 days ago
Excalidraw Diagramcoleam00/excalidraw-diagram-skill	5k	2 repos	~6.1k	Automated safety check: Pass	None	7 mo ago

Similar skills

Archify Diagrams
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
81k GitHub stars~2.9k tokensUpdated today
DevelopmentAuto-check passed
JSON Canvas
heyitsnoah/claudesidian
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections.
2.6k GitHub starsUsed in 18 repos~3.5k tokens
DevelopmentAuto-check passed
Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
48k GitHub starsUsed in 1 repo~7.6k tokens
DevelopmentAuto-check passed
Fireworks Tech Graph
tisfeng/Easydict
Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF.
15k GitHub starsUsed in 1 repo~1.4k tokens
DevelopmentAuto-check passed
Excalidraw Diagram
coleam00/excalidraw-diagram-skill
Create Excalidraw diagram JSON files that make visual arguments.
5k GitHub starsUsed in 2 repos~6.1k tokens
DevelopmentAuto-check passed
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
10k GitHub stars~2.4k tokensUpdated 8 days ago
DevelopmentAuto-check: notes

Questions about C4 Architecture

What does C4 Architecture do?

Generate architecture documentation using C4 model Mermaid diagrams. C4 Architecture is an agent skill from davila7/claude-code-templates. Generate architecture documentation using C4 model Mermaid diagrams.

When should I use C4 Architecture?

C4 Architecture fits situations like: asked to create architecture diagrams; document system architecture; visualize software structure; create C4 diagrams.

How do I install C4 Architecture in Claude Code?

Run `npx skills add davila7/claude-code-templates --skill c4-architecture -a claude-code`. Or copy the skill folder (cli-tool/components/skills/creative-design/c4-architecture in davila7/claude-code-templates) into .claude/skills/c4-architecture in your project. Claude Code loads it when a task matches its description.

How do I install C4 Architecture in Codex?

Run `npx skills add davila7/claude-code-templates --skill c4-architecture -a codex`. Or copy the skill folder (cli-tool/components/skills/creative-design/c4-architecture in davila7/claude-code-templates) into .agents/skills/c4-architecture in your project. Codex loads it when a task matches its description.

Can I use C4 Architecture in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add davila7/claude-code-templates --skill c4-architecture -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/c4-architecture, .gemini/skills/c4-architecture, .github/skills/c4-architecture and .opencode/skills/c4-architecture in your project.

What does C4 Architecture need to run?

SKILL.md names no scripts, command-line tools or credentials: C4 Architecture is instructions for the agent only. Our summary lists: Node.js.

Does C4 Architecture access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is C4 Architecture safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does C4 Architecture use?

C4 Architecture is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does C4 Architecture use?

About 2.6k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.

What are the alternatives to C4 Architecture?

Skills that share tags, products or a category with C4 Architecture: Archify Diagrams (tt-a1i/archify, 81k stars), JSON Canvas (heyitsnoah/claudesidian, 2.6k stars), Diagram Design (cathrynlavery/diagram-design, 48k stars) and Fireworks Tech Graph (tisfeng/Easydict, 15k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains C4 Architecture?

davila7 (a GitHub user) maintains it in davila7/claude-code-templates, which has 32,512 GitHub stars. The repository holds 479 skills in this directory. The repository was last updated on October 10, 2026.

Source: davila7/claude-code-templates on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install C4 Architecture

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

C4 Architecture Documentation

Workflow

C4 Diagram Levels

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

Element Styling

Relationship Styling

Best Practices

Essential Rules

Clarity Guidelines

What to Avoid

Microservices Guidelines

Single Team Ownership

Multi-Team Ownership

Event-Driven Architecture

Output Location

Audience-Appropriate Detail

References

Files

Used in 3 other repositories

Compare with similar skills

Similar skills

More from davila7/claude-code-templates

Related

Questions about C4 Architecture