Notre avis

Génère des diagrammes à l'aide du langage D2, prenant en charge diverses formes, conteneurs, diagrammes de classes UML et tables SQL.

Points forts

Prise en charge d'une large gamme de formes et de conteneurs
Intégration de diagrammes UML et de tables SQL
Inclusion de blocs Markdown et de code
Options de rendu multiples (SVG, PNG) avec contrôle de la mise en page et des thèmes

Limites

Nécessite l'installation du CLI D2
Les diagrammes complexes peuvent nécessiter un moteur de mise en page non défaut
Limité à la syntaxe et aux capacités de D2

Quand l'utiliser

Utilisez cette compétence lorsque vous avez besoin de créer des diagrammes clairs et structurés pour l'architecture, les modèles de données ou la documentation.

Quand l'éviter

Évitez lorsque vous avez besoin de diagrammes hautement personnalisés ou interactifs, ou si D2 n'est pas disponible dans l'environnement.

Exemples

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

Générateur de diagrammes D2

Recommandé pour