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.
Tip: D2 syntax is built to be simple and easy to read. Shapes, connections, labels, and groups can all be written using basic text lines without complex setups.

1. Basic Shapes & Connections

To create shapes, simply type their names. To link shapes, use an arrow (-> for one-way or <-> for two-way).
D2 Edit D2 in VPasCode 
# Simple Connection
User -> Web Server: HTTP Request
Web Server -> Database: Fetch Data
Database -> Web Server: Return Results
Web Server <-> Cache: Read/Write Sync
Edit D2 in VPasCode

D2 simple connection diagram showing request and response flows between User, Web Server, Database, and Cache - Text to diagram editor - VPasCode

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.
D2 Edit D2 in VPasCode 
# Defining Shape Types
Client: {
  shape: person
}

Cloud Services: {
  shape: cloud
}

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

Client -> Cloud Services -> Main DB
Edit D2 in VPasCode

D2 custom shapes showing person, cloud, and database cylinder icons linked in sequence - Text to diagram editor - VPasCode

3. Class Definitions

D2 natively supports object-oriented structure design using the class shape.
D2 Edit D2 in VPasCode 
CustomerAccount: {
  shape: class

  accountId: String
  emailAddress: String

  isActive(): Boolean
}
Edit D2 in VPasCode

D2 class diagram displaying CustomerAccount properties and isActive method - Text to diagram editor - VPasCode

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.
D2 Edit D2 in VPasCode 
# 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
Edit D2 in VPasCode

D2 nested containers grouping Frontend Application and Backend Infrastructure modules - Text to diagram editor - VPasCode

5. Styling & Colors

Custom background colors, stroke colors, and font styles can be customized directly within the block using the style keyword.
D2 Edit D2 in VPasCode 
Service A: {
  style: {
    fill: "#e0e7ff"
    stroke: "#4338ca"
    border-radius: 8
  }
}

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

Service A -> Service B: Send Message
Edit D2 in VPasCode

D2 styled blocks showing custom background colors and border styles for Service A and Service B - Text to diagram editor - VPasCode

6. Quick Syntax Cheat Sheet

Concept Code Example What it Does
Directed Connection A -> B Draws an arrow pointing from A to B.
Line Label A -> B: Send Data Adds text on top of the connection arrow.
Bi-directional Arrow A <-> B Draws an arrow pointing both ways.
Containers / Groups Server: { ... } Groups multiple shapes into a single box.
Shape Selection shape: cylinder Changes standard box into a database icon, person, cloud, class, etc.
Comments # My comment Single-line comments ignored during rendering.
Scroll to Top