Specialized skill for generating C4 model architecture diagrams. Supports Structurizr DSL, PlantUML, and Mermaid formats with multi-level abstraction (Context, Container, Component, Code).
Generates C4 model architecture diagrams in Structurizr, PlantUML, and Mermaid formats across multiple abstraction levels.
npx claudepluginhub a5c-ai/babysitterThis skill is limited to using the following tools:
README.mdYou are c4-diagram-generator - a specialized skill for generating C4 model architecture diagrams following Simon Brown's methodology. This skill enables AI-powered architecture visualization at multiple abstraction levels.
This skill enables comprehensive C4 model diagram generation including:
Generate C4 diagrams using Structurizr DSL:
workspace "System Name" "Description" {
model {
user = person "User" "A user of the system"
softwareSystem = softwareSystem "Software System" "Description" {
webapp = container "Web Application" "Delivers the static content" "React"
api = container "API Application" "Provides functionality via REST API" "Node.js"
database = container "Database" "Stores data" "PostgreSQL" "Database"
}
user -> webapp "Uses"
webapp -> api "Makes API calls to" "HTTPS/JSON"
api -> database "Reads from and writes to" "SQL/TCP"
}
views {
systemContext softwareSystem "SystemContext" {
include *
autoLayout
}
container softwareSystem "Containers" {
include *
autoLayout
}
styles {
element "Software System" {
background #1168bd
color #ffffff
}
element "Container" {
background #438dd5
color #ffffff
}
element "Database" {
shape Cylinder
}
element "Person" {
shape Person
background #08427b
color #ffffff
}
}
}
}
Generate C4 diagrams using PlantUML C4 library:
@startuml C4_Context
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_WITH_LEGEND()
title System Context diagram for Internet Banking System
Person(customer, "Personal Banking Customer", "A customer of the bank")
System(banking_system, "Internet Banking System", "Allows customers to view accounts and make payments")
System_Ext(mail_system, "E-mail System", "Microsoft Exchange")
System_Ext(mainframe, "Mainframe Banking System", "Stores core banking data")
Rel(customer, banking_system, "Uses")
Rel(banking_system, mail_system, "Sends e-mail", "SMTP")
Rel(banking_system, mainframe, "Uses")
Rel(mail_system, customer, "Sends e-mails to")
@enduml
Generate C4 diagrams using Mermaid:
C4Context
title System Context diagram for Internet Banking System
Person(customer, "Personal Banking Customer", "A customer of the bank")
System(banking_system, "Internet Banking System", "Allows customers to view accounts and make payments")
System_Ext(mail_system, "E-mail System", "Microsoft Exchange")
System_Ext(mainframe, "Mainframe Banking System", "Stores core banking data")
Rel(customer, banking_system, "Uses")
Rel(banking_system, mail_system, "Sends e-mail", "SMTP")
Rel(banking_system, mainframe, "Uses")
// Context diagram configuration
const contextDiagram = {
level: 'context',
scope: 'system',
elements: {
people: ['Customer', 'Admin'],
systems: ['Our System'],
externalSystems: ['Payment Provider', 'Email Service']
},
relationships: [
{ from: 'Customer', to: 'Our System', description: 'Uses' },
{ from: 'Our System', to: 'Payment Provider', description: 'Processes payments' }
]
};
// Container diagram configuration
const containerDiagram = {
level: 'container',
scope: 'Our System',
containers: [
{ name: 'Web App', technology: 'React', description: 'Frontend SPA' },
{ name: 'API Gateway', technology: 'Kong', description: 'Routes requests' },
{ name: 'User Service', technology: 'Node.js', description: 'User management' },
{ name: 'Database', technology: 'PostgreSQL', description: 'Stores data' }
]
};
// Component diagram configuration
const componentDiagram = {
level: 'component',
scope: 'User Service',
components: [
{ name: 'User Controller', description: 'REST endpoints' },
{ name: 'User Service', description: 'Business logic' },
{ name: 'User Repository', description: 'Data access' },
{ name: 'Auth Middleware', description: 'JWT validation' }
]
};
// Code diagram configuration (UML class diagram)
const codeDiagram = {
level: 'code',
scope: 'User Repository',
classes: [
{
name: 'UserRepository',
methods: ['findById()', 'save()', 'delete()'],
dependencies: ['DatabaseConnection', 'UserMapper']
}
]
};
# Using Structurizr CLI
structurizr-cli export -workspace workspace.dsl -format plantuml -output ./diagrams
# Using PlantUML
java -jar plantuml.jar -tsvg diagram.puml
# Using Mermaid CLI
mmdc -i diagram.mmd -o diagram.svg -t neutral
# Using Kroki (cloud service)
curl -X POST https://kroki.io/plantuml/svg --data-binary @diagram.puml -o diagram.svg
This skill can leverage the following MCP servers:
| Server | Description | Installation |
|---|---|---|
| UML-MCP Server | PlantUML, Mermaid, D2 diagram generation | GitHub |
| Mermaid MCP Server | 50+ pre-built templates, 22+ diagram types | mcpservers.org |
| Claude Mermaid | Preview diagrams in Claude | GitHub |
| MCP Kroki Server | Multi-format rendering via Kroki.io | Glama |
# C4 Color Scheme
colors:
person: "#08427b"
software_system: "#1168bd"
container: "#438dd5"
component: "#85bbf0"
external_system: "#999999"
database: "#438dd5"
This skill integrates with the following processes:
c4-model-documentation.js - Primary diagram generationsystem-design-review.js - Architecture visualizationmicroservices-decomposition.js - Service boundary diagramscloud-architecture-design.js - Infrastructure visualizationWhen generating diagrams, provide structured output:
{
"operation": "generate",
"level": "container",
"format": "structurizr",
"status": "success",
"diagrams": [
{
"name": "Container-SystemName",
"level": "container",
"format": "svg",
"path": "./docs/diagrams/container.svg"
}
],
"elements": {
"containers": 5,
"relationships": 8
},
"artifacts": ["workspace.dsl", "container.svg", "container.png"],
"warnings": [],
"errors": []
}
| Error | Cause | Resolution |
|---|---|---|
Invalid DSL syntax | Malformed Structurizr DSL | Validate syntax with CLI |
Circular dependency | Circular relationship in model | Review and fix relationships |
Missing element reference | Referencing undefined element | Define all elements before use |
Rendering timeout | Complex diagram or server issues | Simplify diagram or use local renderer |
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.