From diagrams
Generates D2 diagrams for architecture with nested containers, sequences, SQL tables, classes, networks, and infrastructure. Uses declarative syntax with auto-layout, shapes, and styling. Requires d2 CLI.
How this skill is triggered — by the user, by Claude, or both
Slash command
/diagrams:d2The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate diagrams using D2's declarative syntax. D2 produces clean, modern-looking diagrams with excellent auto-layout, nested containers, and multiple layout engines.
Generate diagrams using D2's declarative syntax. D2 produces clean, modern-looking diagrams with excellent auto-layout, nested containers, and multiple layout engines.
When to use D2:
When another format is better:
Consult the design-system skill for color, composition, and quality rules.
server -> database: query
database -> server: results
client -> server: HTTPS
Arrow types:
-> directed (default)<-> bidirectional-- undirected# Named with label
api: API Gateway
# Shapes
db: Database {
shape: cylinder
}
user: User {
shape: person
}
decision: Route? {
shape: diamond
}
queue: Messages {
shape: queue
}
Available shapes: rectangle (default), square, page, parallelogram, document, cylinder, queue, package, step, callout, stored_data, person, diamond, oval, circle, hexagon, cloud.
D2's killer feature -- nested containers for hierarchy:
aws: AWS {
vpc: VPC {
public: Public Subnet {
alb: Load Balancer {
shape: hexagon
}
}
private: Private Subnet {
app: App Server
db: Database {
shape: cylinder
}
app -> db: SQL
}
public.alb -> private.app: HTTP
}
}
shape: sequence_diagram
client: Client
server: Server
db: Database
client -> server: POST /users
server -> db: INSERT INTO users
db -> server: OK
server -> client: 201 Created
users: Users {
shape: sql_table
id: int {constraint: primary_key}
name: varchar
email: varchar {constraint: unique}
}
orders: Orders {
shape: sql_table
id: int {constraint: primary_key}
user_id: int {constraint: foreign_key}
total: decimal
}
users -> orders: has many
classes: {
UserService: {
shape: class
+getUser(id): User
+createUser(data): User
-validateEmail(email): bool
}
}
server: Server {
style: {
fill: "#EFF6FF"
stroke: "#2563EB"
border-radius: 8
font-color: "#1E293B"
shadow: true
}
}
# Connection styling
server -> db: {
style: {
stroke: "#64748B"
stroke-dash: 4
}
}
D2 has built-in themes. Set at the top of the file:
vars: {
d2-config: {
theme-id: 200
}
}
Theme IDs: 0 (default), 1 (neutral grey), 3 (flagship terrastruct), 4 (cool classics), 100 (mixed berry blue), 200 (grape soda), 300 (aubergine). Dark themes: 200-302.
D2 supports multiple layout engines:
| Engine | Best For | Install |
|---|---|---|
| dagre (default) | General purpose, fast | Built-in |
| ELK | Complex hierarchies, wide graphs | Built-in |
| TALA | Architecture diagrams (proprietary) | Requires license |
Set via CLI flag: d2 --layout elk diagram.d2 output.svg
a: Label before a -> bserver: API Server not server API Server. for nested references: aws.vpc.app not aws/vpc/appserver: { style: { ... } }Save as .d2 file. Render to SVG or PNG:
# Render to SVG
d2 diagram.d2 diagram.svg
# Render to PNG
d2 --format png diagram.d2 diagram.png
# Watch mode (live preview)
d2 --watch diagram.d2 diagram.svg
Before generating D2, check if the user has it installed:
command -v d2 && d2 --version
If not installed, suggest:
# macOS
brew install d2
# Linux (script)
curl -fsSL https://d2lang.com/install.sh | sh -s --
# Go install
go install oss.terrastruct.com/d2@latest
Before presenting a D2 diagram:
.d2 extensionnpx claudepluginhub zate/cc-plugins --plugin diagramsGenerate architecture diagrams, flowcharts, decision trees, workflows, sequence flows, ERDs from declarative D2 text with automatic layouts, themes, and styling.
Generates D2 diagrams from textual descriptions for system architectures, flowcharts, network topologies, data flows, and component relationships.