Our review

Generates diagrams using the D2 language, supporting various shapes, containers, UML class diagrams, and SQL tables.

Strengths

Supports a wide range of shapes and containers
Integrates UML and SQL table diagrams
Allows markdown and code blocks
Multiple rendering options (SVG, PNG) with layout and theme control

Limitations

Requires the D2 CLI to be installed
Complex diagrams may need non-default layout engine
Limited to D2's syntax and capabilities

When to use it

Use this skill when you need to create clear, structured diagrams for architecture, data models, or documentation.

When not to use it

Avoid when you need highly customized or interactive diagrams, or if D2 is not available in the environment.

Examples

System architecture diagram

Create a system architecture diagram showing a web server, database, and client with D2.

UML class diagram

Generate a UML class diagram for a User and Organization model with D2.

ER diagram

Create an entity-relationship diagram using D2's sql_table shape for users and orders.

name: d2-diagram description: Generate diagrams using the D2 diagramming language. Use when the user requests diagrams.

D2 Diagram

Instructions

Generate D2 code following these guidelines.

Basic Syntax

# Nodes and labels
node1
node2: Custom Label

# Connections
a -> b: label     # directed arrow (left to right)
a <- b: label     # directed arrow (right to left)
a <-> b: label    # bidirectional arrow
a -- b: label     # line (no arrows)

# Chained connections
a -> b -> c -> d

Containers

# Dot notation (quick)
aws.ec2.instance

# Map syntax (structured)
aws: {
  ec2: {
    instance
  }
}

# Reference children with full path
aws.ec2.instance -> database

Shapes

Available shapes: rectangle, square, circle, oval, diamond, hexagon, parallelogram, cylinder, queue, package, step, page, document, callout, stored_data, person, cloud

server: Web Server {shape: cylinder}
user: {shape: person}
cdn: {shape: cloud}

UML Class Diagrams

MyClass: {
  shape: class
  +publicField: string
  -privateField: int
  #protectedField: bool
  +publicMethod(): void
  -privateMethod(arg: string): int
}

SQL Tables

users: {
  shape: sql_table
  id: int {constraint: primary_key}
  email: varchar {constraint: unique}
  org_id: int {constraint: foreign_key}
}

orgs: {
  shape: sql_table
  id: int {constraint: primary_key}
  name: varchar
}

users.org_id -> orgs.id

Markdown and Code Blocks

# Markdown content
readme: |`
# Title
- List item
- Another item
`|

# Code block with syntax highlighting
snippet: |`go
func main() {
    fmt.Println("Hello")
}
`|

Guidelines

Write D2 code to .d2 files
Use descriptive node IDs (e.g., web_server not ws)
Group related nodes in containers
Add labels to connections when they clarify relationships
Choose appropriate shapes for the domain (e.g., cylinder for databases, cloud for external services, person for users)
Render to PNG by default unless vector format is specifically requested

Rendering

Render diagrams using the d2 CLI. The output format is determined by the file extension.

# Render to SVG (vector)
d2 input.d2 output.svg

# Render to PNG (raster)
d2 input.d2 output.png

# Set layout engine (dagre is default, elk for complex diagrams)
d2 --layout=elk input.d2 output.png

# Set theme (0-8, or use theme name)
d2 --theme=3 input.d2 output.png

# Set padding around diagram
d2 --pad=50 input.d2 output.png

# Sketch mode (hand-drawn look)
d2 --sketch input.d2 output.png

D2 Diagram Generator

Recommended for