Contact Us
Webflow Premium Partner Ehab Fayez
Back to Agent Skills
Content & Documentation

D2 Declarative Diagrams

Create modern, declarative diagrams with D2 language for software architecture and system design.

Claude Code Cursor Copilot

Overview

D2 is a modern diagram scripting language that turns text into diagrams. Unlike traditional diagramming tools, D2 features automatic layout engines, themes, and a clean syntax optimized for software architecture diagrams.

AI coding agents can generate D2 diagrams for system architecture, network topology, database schemas, and code structure. D2's declarative syntax makes it natural for AI agents to produce, as it closely mirrors how engineers describe systems in prose.

D2 supports multiple layout engines (dagre, ELK, TALA), themes, animations, and interactive tooltips. The diagrams can be rendered as SVG, PNG, or embedded in web applications. Teams can maintain living architecture documentation that AI agents update as the system evolves.

Who Is This For?

  • Generate system architecture diagrams from code
  • Create network topology diagrams
  • Build database relationship diagrams
  • Produce cloud infrastructure diagrams

Installation

Setup for Claude Code
brew install d2

Configuration

# architecture.d2
direction: right

web: Web App {
  style.fill: "#e0e7ff"
}
api: API Server {
  style.fill: "#dbeafe"
}
db: Database {
  shape: cylinder
  style.fill: "#fef3c7"
}

web -> api: REST/GraphQL
api -> db: SQL queries