# C4 Diagram

> >

- **Type:** Skill
- **Install:** `agentstack add skill-vijayjoshi24-ea-agent-skills-c4-diagram`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [vijayjoshi24](https://agentstack.voostack.com/s/vijayjoshi24)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [vijayjoshi24](https://github.com/vijayjoshi24)
- **Source:** https://github.com/vijayjoshi24/ea-agent-skills/tree/main/skills/c4-diagram

## Install

```sh
agentstack add skill-vijayjoshi24-ea-agent-skills-c4-diagram
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# C4 Diagram

Generate interactive C4 model diagrams at the right zoom level for your audience.
Read `references/notation.md` before rendering any diagram.

---

## The Four Levels

| Level | Audience | Shows |
|---|---|---|
| 1 — Context | Business, executives | The system + its users + external systems |
| 2 — Container | Architects, tech leads | Deployable units inside the system |
| 3 — Component | Engineering teams | Structural building blocks inside one container |
| 4 — Code | Developers | Class/interface level — skip unless explicitly requested |

---

## Step 1 — Determine Level and Extract Elements

If the user hasn't specified a level, default to **Context** first.

Extract from the user's description:

**Context:** system in scope · people/actors · external systems · relationships  
**Container:** containers (with technology) · external systems they call · relationships with protocols  
**Component:** which container to zoom into · components (with pattern/technology) · internal + external relationships  

State any assumptions you make (e.g. "Assumed: auth is delegated to the API Gateway").

---

## Step 2 — Render the Diagram

Use the `show_widget` visualiser. Follow `references/notation.md` exactly for:
- Shapes and colours per element type
- Label format: name · [type] · description (one sentence)
- Relationship arrows: one direction, labelled with intent + technology
- Title: `{Level} Diagram — {System Name}`
- Legend in bottom-right corner

Make every element clickable to drill down:
- Container in Context → `sendPrompt('Draw the Container diagram for {system}')`
- Container in Container → `sendPrompt('Draw the Component diagram for {container}')`
- External system → `sendPrompt('Explain the {system} integration')`

Max 10 elements per diagram. If more exist, scope to the most relevant and note omissions.

---

## Step 3 — Quality Gate

Before delivering, verify:
- [ ] Title present
- [ ] Every element: name + [type] + description
- [ ] Every relationship: directional arrow + intent label
- [ ] External systems visually distinct (grey)
- [ ] People distinct from systems
- [ ] Legend present
- [ ] ≤10 elements

---

## Step 4 — Offer Navigation

After Context → offer Container  
After Container → offer Component for a specific container  
After Component → offer Structurizr DSL export or ArchiMate equivalent

---

## Reference Files

- `references/notation.md` — canonical colours, shapes, label rules per level. Read before every render.
- `references/archetypes.md` — worked examples for FS, SaaS, agentic AI, microservices.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [vijayjoshi24](https://github.com/vijayjoshi24)
- **Source:** [vijayjoshi24/ea-agent-skills](https://github.com/vijayjoshi24/ea-agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-vijayjoshi24-ea-agent-skills-c4-diagram
- Seller: https://agentstack.voostack.com/s/vijayjoshi24
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.