d2

D2 Diagram Skill

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:

• Architecture diagrams with nested components (D2's container nesting is excellent)
• Clean, modern aesthetic without manual positioning
• User has d2 installed or prefers it
• Network/infrastructure diagrams
• Deployment diagrams with hierarchical grouping

When another format is better:

• Maximum visual customization (SVG)
• Diagrams in GitHub/GitLab markdown (Mermaid -- D2 doesn't render natively)
• Whiteboard/sketch aesthetic (Excalidraw)
• ER diagrams, Gantt charts (Mermaid has better support)

Consult the design-system skill for color, composition, and quality rules.

Syntax Quick Reference

Basic Connections

server -> database: query
database -> server: results
client -> server: HTTPS

Arrow types:

• -> directed (default)
• <-> bidirectional
• -- undirected

Shapes and Labels

# 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.

Containers (Nested)

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
  }
}

Sequence Diagrams

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