Diagramas D2

Recurre a D2 cuando un diagrama necesite contenedores y límites anidados, un esquema de base de datos con claves primarias y foráneas, o un layout que puedas ajustar cambiando de motor. Convive con el soporte de Mermaid que ya existe en Jamdesk: sigue usando Mermaid para diagramas de flujo rápidos y pasa a D2 cuando la estructura se vuelva más arquitectónica. Ambos comparten el mismo lugar de autoría, un bloque de código delimitado en tu Markdown, así que elegir uno es una 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 mostrar la ruta de la solicitud 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 traza 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 se comunican los componentes a lo largo del tiempo. Establece shape: sequence_diagram en un contenedor y enumera los mensajes en orden para documentar un flujo de API o 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 enumera sus campos y métodos. Antepón + 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 traza 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 con 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 un 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 layout

D2 incluye varios motores de layout. El predeterminado es dagre. Para cambiar a ELK en grafos más densos, configúralo en el código fuente del diagrama usando el bloque de configuración nativo de D2. En esta versión no hay una prop de componente para esto; 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, así que un grafo denso se mantiene 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 quede clara de un vistazo.
• Agrupa los nodos relacionados en contenedores en lugar de un solo grafo plano.
• Cambia al motor de layout ELK para grafos densos con muchas conexiones.

D2 frente a Mermaid

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

• Elige D2 para diagramas de arquitectura e infraestructura, modelos SQL y ER, imágenes de estilo boceto, y cuando quieras poder elegir entre varios motores de layout.
• 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 D2 mantiene el resto de tu diagrama en un solo lenguaje. Mermaid está ampliamente adoptado y tiene un ecosistema extenso.

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

Más información

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

¿Qué sigue?