Diagramas D2

A continuación se muestran ejemplos listos para usar de diagramas de software comunes creados con D2 en VPasCode. Puedes copiar estos fragmentos de código directamente en el Editor en vivo de VPasCode para generar diagramas visuales limpios de forma instantánea.

Nota: Puedes establecer la dirección del diseño usando direction: right o direction: down en la parte superior de tu bloque de código D2.

1. Diagrama de arquitectura del sistema

Una arquitectura web en la nube de múltiples niveles que presenta servidores anidados y componentes de almacenamiento.

D2


Editar D2 en VPasCode
D2 Edit D2 in VPasCode 
direction: right

Usuario: {
  shape: person
}

Aplicación web: {
  CDN: {
    shape: cloud
  }
  
  Balanceador de carga
  
  Servidores de aplicación: {
    Servidor 1
    Servidor 2
  }
  
  Nivel de datos: {
    Base de datos PostgreSQL: {
      shape: cilindro
    }
    Caché Redis: {
      shape: cilindro
    }
  }
}

Usuario -> Aplicación web.CDN: Solicita página
Aplicación web.CDN -> Aplicación web.Balanceador de carga: Enrutar tráfico
Aplicación web.Balanceador de carga -> Aplicación web.Servidores de aplicación.Servidor 1
Aplicación web.Balanceador de carga -> Aplicación web.Servidores de aplicación.Servidor 2

Aplicación web.Servidores de aplicación.Servidor 1 -> Aplicación web.Nivel de datos.Caché Redis: Verificar caché
Aplicación web.Servidores de aplicación.Servidor 1 -> Aplicación web.Nivel de datos.Base de datos PostgreSQL: Consultar datos
Edit D2 in VPasCode



Editar D2 en VPasCode

D2 multi-tier cloud web system architecture featuring CDN, Load Balancer, App Servers, PostgreSQL, and Redis - Text to diagram editor - VPasCode

 

2. Esquema de base de datos (Diagrama de tabla SQL)

D2 ofrece soporte integrado para representar tablas SQL y relaciones de entidades de forma limpia usando el sql_table forma.

D2


Editar D2 en VPasCode
D2 Edit D2 in VPasCode 
usuarios: {
  shape: sql_table
  id: int {constraint: primary_key}
  nombre_usuario: varchar
  correo: varchar
  creado_en: timestamp
}

pedidos: {
  shape: sql_table
  id: int {constraint: primary_key}
  usuario_id: int {constraint: foreign_key}
  monto_total: decimal
  estado: varchar
}

items_pedido: {
  shape: sql_table
  id: int {constraint: primary_key}
  pedido_id: int {constraint: foreign_key}
  nombre_producto: varchar
  cantidad: int
}

usuarios.id -> pedidos.usuario_id: uno-a-muchos
pedidos.id -> items_pedido.pedido_id: uno-a-muchos
Edit D2 in VPasCode



Editar D2 en VPasCode

D2 SQL table ERD diagram showing 1-to-Many entity relationships between users, orders, and order_items - Text to diagram editor - VPasCode

 

3. Canalización de implementación automatizada (CI/CD)

Representa los pasos de implementación de software desde la confirmación del código hasta la liberación en producción.

D2


Editar D2 en VPasCode
D2 Edit D2 in VPasCode 
direction: right

Desarrollador -> GitHub: 1. Publicar código

GitHub Pipelines: {
  Paso de compilación -> Paso de prueba -> Imagen Docker
}

GitHub -> GitHub Pipelines: 2. Activar acción
GitHub Pipelines.Imagen Docker -> Registro Docker: 3. Almacenar compilación

Registro Docker -> Servidor de producción: 4. Desplegar contenedor
Edit D2 in VPasCode



Editar D2 en VPasCode

D2 CI/CD automated deployment workflow diagram mapping code push from GitHub to Docker Registry and Production Server - Text to diagram editor - VPasCode

 

Scroll al inicio