Diagramas D2

Usa D2 cuando un diagrama necesite contenedores anidados y límites, un esquema de base de datos con claves primarias y foráneas, o un diseño que puedas ajustar cambiando de motor. Convive junto al soporte de Mermaid ya disponible en Jamdesk: sigue usando Mermaid para flujos rápidos, y pasa a D2 cuando la estructura sea arquitectónica. Ambos comparten el mismo punto de autoría — un bloque de código delimitado en tu Markdown — así que elegir uno es cuestión de ajuste, no de flujo de trabajo.

Uso Básico

Usa un bloque de código delimitado con el identificador de lenguaje d2:

```d2
a -> b -> c
```

Tipos de Diagramas

Arquitectura

Los diagramas de arquitectura muestran cómo se conectan los servicios. Usa formas etiquetadas para representar el flujo de solicitudes a través de tu sistema.

```d2
Client: Web Client
API: API Server
Database: { shape: cylinder }

Client -> API: request
API -> Database: query
```

Contenedores

Los contenedores agrupan nodos relacionados. Anida formas dentro de { } para modelar límites como una cuenta en la nube o un despliegue, y luego dibuja conexiones que crucen esos límites.

```d2
cloud: Cloud {
  api: API
  worker: Worker
}

queue: Message Queue

cloud.api -> queue: publish
queue -> cloud.worker: consume
```

Diagramas de Secuencia

Los diagramas de secuencia muestran cómo los componentes se comunican a lo largo del tiempo. Establece shape: sequence_diagram en un contenedor y lista los mensajes en orden para documentar un API o un flujo de autenticación.

```d2
flow: {
  shape: sequence_diagram

  Client -> Server: request
  Server -> Database: query
  Database -> Server: results
  Server -> Client: response
}
```

Diagramas de Clases

Los diagramas de clases documentan la estructura de sistemas orientados a objetos. Establece shape: class en un nodo y lista sus campos y métodos. Prefija los miembros con + para público, - para privado, o # para protegido, y conecta las clases para mostrar sus relaciones.

```d2
User: {
  shape: class
  +name: string
  +email: string
  +login(): void
  +logout(): void
}

Order: {
  shape: class
  +id: int
  +created: date
  +addItem(): void
  +checkout(): void
}

Item: {
  shape: class
  +name: string
  +price: float
}

User -> Order: places
Order -> Item: contains
```

Diagramas de Estado

Los diagramas de estado modelan el ciclo de vida de un objeto o proceso. D2 no tiene una forma dedicada para diagramas de estado — modela los estados como óvalos o círculos, y luego dibuja transiciones etiquetadas entre ellos.

```d2
Draft: { shape: oval }
Review: { shape: oval }
Published: { shape: oval }
Archived: { shape: oval }

Draft -> Review: submit
Review -> Published: approve
Review -> Draft: request changes
Published -> Archived: archive
```

Tablas SQL

Las formas de tabla SQL documentan un esquema de base de datos con columnas y tipos. Marca una columna con { constraint: primary_key } o { constraint: foreign_key } para renderizar las insignias PK y FK, y luego conecta una clave foránea a su tabla referenciada para mostrar la relación.

```d2
users: {
  shape: sql_table
  id: int { constraint: primary_key }
  email: varchar
}

orders: {
  shape: sql_table
  id: int { constraint: primary_key }
  user_id: int { constraint: foreign_key }
  total: decimal
}

orders.user_id -> users.id
```

Formas

Establece una shape en cualquier nodo para cambiar cómo se renderiza:

Conexiones

Las conexiones definen la dirección y las relaciones entre nodos:

Elegir un Motor de Diseño

D2 incluye múltiples motores de diseño. El predeterminado es dagre. Para cambiar a ELK con grafos más densos, configúralo en el origen del diagrama usando el bloque de configuración nativo de D2. No hay una propiedad de componente para esto en esta versión; el motor se selecciona en el propio diagrama.

```d2
vars: {
  d2-config: {
    layout-engine: elk
  }
}

ingress -> service -> database
```

Los diagramas anchos se desplazan horizontalmente dentro de su contenedor, por lo que un grafo denso permanece legible sin desbordar la página.

Consejos de Estilo

Para diagramas efectivos:

• Mantén cada diagrama pequeño: divide un sistema grande en vistas enfocadas.
• Etiqueta las conexiones para que la relación sea clara de un vistazo.
• Agrupa nodos relacionados en contenedores en lugar de un grafo plano.
• Cambia al motor de diseño ELK para grafos densos con muchas conexiones.

D2 vs Mermaid

Ambos lenguajes se renderizan en tiempo de build, por lo que la elección depende del ajuste:

• Elige D2 para diagramas de arquitectura e infraestructura, modelos SQL y ER, visuales estilo boceto, y cuando quieras elegir el motor de diseño.
• Elige Mermaid para diagramas de flujo, diagramas de Gantt y grafos de Git. Ambos renderizan diagramas de secuencia; la sintaxis de secuencia de Mermaid es más rica en funciones, mientras que la de D2 mantiene el resto del diagrama en un solo lenguaje. Mermaid está ampliamente adoptado y tiene un ecosistema amplio.

Consulta la página Diagramas Mermaid para la sintaxis y ejemplos de Mermaid.

Más Información

Para la referencia completa de sintaxis D2, incluyendo estilos, clases y animaciones, consulta la documentación oficial de D2.

¿Qué Sigue?