From diagrams
Generate diagrams using D2 (Terrastruct) -- a modern, clean diagram scripting language with excellent auto-layout. Use when the diagram-router selects D2, or when the user wants clean architecture diagrams, nested containers, or prefers D2's aesthetic. Requires the d2 CLI binary.
npx claudepluginhub zate/cc-plugins --plugin diagramsThis skill uses the workspace's default tool permissions.
Generate diagrams using D2's declarative syntax. D2 produces clean, modern-looking diagrams with excellent auto-layout, nested containers, and multiple layout engines.
Generate 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.
Share bugs, ideas, or general feedback.
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 extension