D2 Syntax Basics

D2 is a modern, text-based tool for creating clear, readable diagrams. It stands for “Declarative Diagramming.” In VPasCode, D2 allows software developers and solution architects to turn simple code text into clean visual models without having to draw shapes manually.

1. Basic Shapes & Connections

To create shapes, simply type their names. To link shapes, use an arrow (-> for one-way or <-> for two-way).

# Simple Connection
User -> Web Server: HTTP Request
Web Server -> Database: Fetch Data
Database -> Web Server: Return Results
Web Server <-> Cache: Read/Write Sync

2. Shape Types & Custom Labels

By default, shapes appear as standard boxes. You can easily change a shape’s icon type or set a custom label using the shape property.

# Defining Shape Types
Client: {
  shape: person
}

Cloud Services: {
  shape: cloud
}

Main DB: {
  shape: cylinder
  label: "Primary Database (PostgreSQL)"
}

Client -> Cloud Services -> Main DB

3. Class Definitions

D2 natively supports object-oriented structure design using the class shape.

CustomerAccount: {
  shape: class

  accountId: String
  emailAddress: String

  isActive(): Boolean
}

4. Nested Containers (Grouping)

D2 makes it easy to group items together inside containers using standard curly braces ({}). You can also link elements across different groups using dot notation.

# Grouping with Containers
Frontend Application: {
  React UI -> State Manager
}

Backend Infrastructure: {
  API Gateway -> Auth Microservice
  API Gateway -> Order Microservice
}

# Cross-group connection
Frontend Application.State Manager -> Backend Infrastructure.API Gateway: REST Call

5. Styling & Colors

Custom background colors, stroke colors, and font styles can be customized directly within the block using the style keyword.

Service A: {
  style: {
    fill: "#e0e7ff"
    stroke: "#4338ca"
    border-radius: 8
  }
}

Service B: {
  style: {
    fill: "#fef3c7"
    stroke: "#d97706"
  }
}

Service A -> Service B: Send Message

6. Quick Syntax Cheat Sheet