Dominar el Diagrama como Código: Un Tutorial Completo de VPasCode para Equipos de Desarrollo Modernos

graph TD
    A[El usuario ingresa credenciales] --> B{¿Formato válido?}
    B -->|No| C[Mostrar error de validación]
    B -->|Sí| D[Enviar al servicio de autenticación]
    C --> A
    D --> E{¿Coinciden las credenciales?}
    E -->|No| F[Devolver 401 No autorizado]
    E -->|Sí| G[Generar token JWT]
    G --> H[Almacenar token en cookie HttpOnly]
    H --> I[Redirigir al panel de control]
    F --> A
    
    style A fill:#e1f5ff,stroke:#0066cc
    style I fill:#d4edda,stroke:#28a745
    style F fill:#f8d7da,stroke:#dc3545

graph LR
    subgraph Client["Capa de cliente"]
        Web[Aplicación web<br/>React]
        Mobile[Aplicación móvil<br/>Flutter]
    end
    
    subgraph API["API Gateway"]
        Gateway[ Kong Gateway ]
        Auth[Servicio de autenticación]
        Rate[Límite de tasa]
    end
    
    subgraph Services["Servicios empresariales"]
        User[Servicio de usuario]
        Order[Servicio de pedidos]
        Product[Servicio de productos]
        Payment[Servicio de pagos]
    end
    
    subgraph Data["Capa de datos"]
        UserDB[(Base de datos de usuario<br/>PostgreSQL)]
        OrderDB[(Base de datos de pedidos<br/>MongoDB)]
        ProductDB[(Base de datos de productos<br/>PostgreSQL)]
        Cache[(Caché Redis)]
    end
    
    Web --> Gateway
    Mobile --> Gateway
    Gateway --> Auth
    Gateway --> Rate
    Rate --> User
    Rate --> Order
    Rate --> Product
    User --> UserDB
    User --> Cache
    Order --> OrderDB
    Order --> Payment
    Product --> ProductDB
    Payment --> OrderDB
    
    style Gateway fill:#ff6b6b,stroke:#c92a2a,color:white
    style UserDB fill:#4ecdc4,stroke:#087f5b
    style OrderDB fill:#4ecdc4,stroke:#087f5b
    style ProductDB fill:#4ecdc4,stroke:#087f5b
    style Cache fill:#ffe66d,stroke:#f08c00

sequenceDiagram
    autonumber
    participant C as Cliente
    participant W as Aplicación Web
    participant O as Servicio de Pedidos
    participant P as Servicio de Pagos
    participant I as Servicio de Inventario
    participant N as Servicio de Notificaciones
    
    C->>W: Agregar artículos al carrito
    C->>W: Hacer clic en "Finalizar compra"
    W->>O: POST /pedidos {artículos, envío}
    O->>I: Reservar inventario
    I-->>O: Reserva confirmada
    O->>P: Procesar pago
    P-->>O: Pago exitoso
    O->>O: Crear registro de pedido
    O->>N: Enviar confirmación de pedido
    N-->>C: Confirmación por correo electrónico
    O-->>W: 201 Creado {orderId}
    W-->>C: Mostrar página de éxito
    
    Note over O,P: Sección crítica<br/>debe ser transaccional
    rect rgba(200, 200, 0, 0.2)
        O->>P: Cobrar tarjeta
        P-->>O: ID de transacción
    end

gantt
    título Sprint 24 - Módulo de Autenticación
    formatoFecha  YYYY-MM-DD
    formatoEje  %m/%d
    
    sección Backend
    Diseño de contratos de API       :terminado,    des1, 2024-06-01, 2d
    Implementación del servicio JWT      :activo,  des2, 2024-06-03, 3d
    Migración de base de datos         :         des3, después de des2, 2d
    Pruebas unitarias              :         des4, después de des3, 2d
    
    sección Frontend
    Componente de inicio de sesión           :         front1, 2024-06-03, 3d
    Gestión de tokens          :         front2, después de front1, 2d
    Rutas protegidas          :         front3, después de front2, 2d
    
    sección Integración
    Integración de API           :         int1, después de des4, 2d
    Pruebas E2E              :         int2, después de int1, 3d
    Auditoría de seguridad           :         int3, después de int2, 2d

@startuml
!theme plain
skinparam backgroundColor #FFFFFF
skinparam componentStyle uml2

título "Plataforma de comercio electrónico - Arquitectura de componentes"

paquete "Capa de presentación" {
    [Frontend web] como Web
    [Aplicación móvil] como Mobile
    [Panel de administración] como Admin
}

paquete "Capa de API" {
    [Pasarela de API] como Gateway
    [Autenticación] como Auth
    [Limitador de tasa] como RateLimit
}

paquete "Servicios empresariales" {
    [Servicio de catálogo] como Catalog
    [Servicio de pedidos] como Order
    [Servicio de pago] como Payment
    [Servicio de envío] como Shipping
    [Servicio de notificaciones] como Notify
}

paquete "Capa de datos" {
    base de datos "Base de datos de productos" como ProdDB
    base de datos "Base de datos de pedidos" como OrderDB
    base de datos "Base de datos de usuarios" como UserDB
    cola "Cola de mensajes" como MQ
}

Web --> Gateway
Mobile --> Gateway
Admin --> Gateway

Gateway --> Auth
Gateway --> RateLimit
Gateway --> Catalog
Gateway --> Order

Order --> Payment
Order --> Shipping
Order --> Notify

Catalog --> ProdDB
Order --> OrderDB
Auth --> UserDB

Payment ..> MQ : publicar eventos
Shipping ..> MQ : suscribirse a eventos
Notify ..> MQ : suscribirse a eventos

@enduml

@startuml
|Cliente|
inicio
:Navegar por productos;
:Añadir al carrito;
:Proceder al pago;

|Sistema|
:Validar artículos del carrito;
:Calcular total;
si (¿Artículos disponibles?) entonces (sí)
  :Reservar inventario;
sino (no)
  :Mostrar agotado;
  detener
endif

|Cliente|
:Ingresar dirección de envío;
:Seleccionar método de pago;

|Sistema|
:Procesar pago;
si (¿Pago exitoso?) entonces (sí)
  :Crear pedido;
  :Enviar correo de confirmación;
  :Actualizar inventario;
sino (no)
  :Mostrar error de pago;
  desvincular
endif

:Enviar pedido;
:Actualizar estado del pedido;
detener

partición "Trabajos en segundo plano" {
  :Generar factura;
  :Notificar almacén;
}

@enduml

digraph MicroservicesDependencies {
    rankdir=TB;
    node [shape=box, style="rounded,filled", fontname="Arial"];
    edge [fontname="Arial", fontsize=10];
    
    // Definición de nodos con colores
    node [fillcolor="#e3f2fd"];
    "API Gateway" [fillcolor="#ffcdd2"];
    "Service Mesh" [fillcolor="#fff9c4"];
    
    // Servicios principales
    "User Service";
    "Auth Service";
    "Order Service";
    "Payment Service";
    "Inventory Service";
    "Notification Service";
    "Analytics Service";
    
    // Bases de datos
    node [shape=cylinder, fillcolor="#c8e6c9"];
    "User DB";
    "Order DB";
    "Product DB";
    "Analytics DB";
    
    // Servicios externos
    node [shape=box, fillcolor="#f3e5f5", style="dashed,filled"];
    "Payment Gateway";
    "Email Service";
    "SMS Service";
    
    // Relaciones
    "API Gateway" -> "Service Mesh";
    "Service Mesh" -> "User Service";
    "Service Mesh" -> "Auth Service";
    "Service Mesh" -> "Order Service";
    "Service Mesh" -> "Payment Service";
    "Service Mesh" -> "Inventory Service";
    
    "User Service" -> "User DB";
    "Auth Service" -> "User DB";
    "Order Service" -> "Order DB";
    "Order Service" -> "Inventory Service";
    "Order Service" -> "Payment Service";
    "Inventory Service" -> "Product DB";
    "Payment Service" -> "Payment Gateway";
    "Notification Service" -> "Email Service";
    "Notification Service" -> "SMS Service";
    "Analytics Service" -> "Analytics DB";
    
    "Order Service" -> "Notification Service" [style=dashed];
    "Payment Service" -> "Notification Service" [style=dashed];
    
    // Subgrafos para agrupación
    {
        rank=same;
        "User Service";
        "Auth Service";
    }
    
    {
        rank=same;
        "Order Service";
        "Payment Service";
        "Inventory Service";
    }
}

digraph OrgChart {
    rankdir=TB;
    node [shape=box, style="rounded,filled", fontname="Helvetica"];
    edge [fontname="Helvetica", arrowsize=0.7];
    
    // Nivel ejecutivo
    CEO [label="CEOnJohn Smith", fillcolor="#1976d2", fontcolor="white"];
    
    // Nivel C
    subgraph cluster_exec {
        label="Equipo ejecutivo";
        style=dashed;
        color="#90caf9";
        
        CTO [label="CTOnSarah Johnson", fillcolor="#42a5f5"];
        CFO [label="CFOnMichael Brown", fillcolor="#42a5f5"];
        COO [label="COOnEmily Davis", fillcolor="#42a5f5"];
        CPO [label="CPOnDavid Wilson", fillcolor="#42a5f5"];
    }
    
    // Ingeniería
    subgraph cluster_eng {
        label="Ingeniería";
        style=filled;
        color="#e3f2fd";
        
        VP_Eng [label="VP de Ingeniería", fillcolor="#64b5f6"];
        
        subgraph cluster_eng_teams {
            label="Equipos";
            style=dotted;
            
            Backend [label="Equipo Backendn(12 ingenieros)", fillcolor="#bbdefb"];
            Frontend [label="Equipo Frontendn(8 ingenieros)", fillcolor="#bbdefb"];
            DevOps [label="Equipo DevOpsn(5 ingenieros)", fillcolor="#bbdefb"];
            QA [label="Equipo QAn(6 ingenieros)", fillcolor="#bbdefb"];
        }
    }
    
    // Producto
    subgraph cluster_product {
        label="Producto";
        style=filled;
        color="#fff3e0";
        
        VP_Product [label="VP de Producto", fillcolor="#ffb74d"];
        PM1 [label="Gerente de ProductonPlataforma", fillcolor="#ffcc80"];
        PM2 [label="Gerente de ProductonMóvil", fillcolor="#ffcc80"];
        PM3 [label="Gerente de ProductonAnalítica", fillcolor="#ffcc80"];
    }
    
    // Relaciones
    CEO -> CTO;
    CEO -> CFO;
    CEO -> COO;
    CEO -> CPO;
    
    CTO -> VP_Eng;
    VP_Eng -> Backend;
    VP_Eng -> Frontend;
    VP_Eng -> DevOps;
    VP_Eng -> QA;
    
    CPO -> VP_Product;
    VP_Product -> PM1;
    VP_Product -> PM2;
    VP_Product -> PM3;
    
    // Líneas punteadas para colaboración
    PM1 -> Backend [style=dotted, color="#757575"];
    PM2 -> Frontend [style=dotted, color="#757575"];
    PM3 -> Backend [style=dotted, color="#757575"];
}

digraph DataFlow {
    rankdir=LR;
    nodesep=1.0;
    node [shape=ellipse, style="filled", fontname="Arial"];
    edge [fontname="Arial", fontsize=9];
    
    // Entidades externas
    node [fillcolor="#ffccbc", shape=box];
    Customer [label="Cliente"];
    Vendor [label="Proveedor"];
    Bank [label="Sistema bancario"];
    
    // Procesos
    node [fillcolor="#c5cae9", shape=circle];
    P1 [label="Realizar pedido"];
    P2 [label="Procesar pago"];
    P3 [label="Actualizar inventario"];
    P4 [label="Generar factura"];
    P5 [label="Enviar pedido"];
    P6 [label="Enviar notificación"];
    
    // Almacenes de datos
    node [fillcolor="#c8e6c9", shape=box3d];
    D1 [label="Base de datos de pedidos"];
    D2 [label="Base de datos de inventario"];
    D3 [label="Base de datos de clientes"];
    D4 [label="Registros de facturas"];
    
    // Flujos de datos
    Customer -> P1 [label="Solicitud de pedido"];
    P1 -> D1 [label="Almacenar pedido"];
    P1 -> D3 [label="Actualizar cliente"];
    P1 -> P2 [label="Detalles de pago"];
    
    P2 -> Bank [label="Solicitud de pago"];
    Bank -> P2 [label="Confirmación de pago"];
    P2 -> P3 [label="Pago exitoso"];
    
    P3 -> D2 [label="Disminuir stock"];
    P3 -> P4 [label="Pedido confirmado"];
    
    P4 -> D4 [label="Guardar factura"];
    P4 -> P6 [label="Datos de factura"];
    
    P3 -> P5 [label="Solicitud de envío"];
    P5 -> Vendor [label="Etiqueta de envío"];
    P5 -> P6 [label="Información de seguimiento"];
    
    P6 -> Customer [label="Confirmación de pedidon+ Seguimiento"];
    
    // Líneas punteadas para consultas
    D1 -> P5 [label="Obtener detalles del pedido", style=dashed];
    D2 -> P1 [label="Verificar disponibilidad", style=dashed];
    D3 -> P1 [label="Obtener información del cliente", style=dashed];
}

graph LR
    subgraph Source["Control de Origen"]
        Git[Repositorio GitHub]
        PR[Solicitud de Extracción]
    end
    
    subgraph CI["Integración Continua"]
        Lint[Análisis de Código]
        Test[Pruebas Unitarias]
        Build[Artefactos de Construcción]
        Scan[Escanear Seguridad]
    end
    
    subgraph CD["Despliegue Continuo"]
        Dev[Desplegar en Desarrollo]
        Stage[Desplegar en Entorno de Pruebas]
        E2E[Pruebas de Extremo a Extremo]
        Prod[Desplegar en Producción]
    end
    
    subgraph Monitor["Monitoreo"]
        Logs[Agregación de Registros]
        Metrics[Panel de Métricas]
        Alerts[Sistema de Alertas]
    end
    
    Git --> PR
    PR --> Lint
    Lint --> Test
    Test --> Build
    Build --> Scan
    Scan --> Dev
    Dev --> Stage
    Stage --> E2E
    E2E --> Prod
    Prod --> Logs
    Prod --> Metrics
    Metrics --> Alerts
    
    style Git fill:#f0f0f0,stroke:#333
    style Prod fill:#d4edda,stroke:#28a745,color:black
    style Alerts fill:#f8d7da,stroke:#dc3545,color:black

@startuml
!define TABLE(name) entity name << (T,#FFAAAA) >>
!define PK(x) x <<PK>>
!define FK(x) x <<FK>>

TABLE(Usuarios) {
    PK(user_id) : INT
    --
    email : VARCHAR(255)
    password_hash : VARCHAR(255)
    created_at : TIMESTAMP
    last_login : TIMESTAMP
    status : ENUM
}

TABLE(Productos) {
    PK(product_id) : INT
    --
    sku : VARCHAR(50)
    name : VARCHAR(255)
    description : TEXT
    price : DECIMAL(10,2)
    stock_quantity : INT
    category_id : INT
}

TABLE(Categorias) {
    PK(category_id) : INT
    --
    name : VARCHAR(100)
    parent_id : INT
}

TABLE(Pedidos) {
    PK(order_id) : INT
    --
    FK(user_id) : INT
    order_date : TIMESTAMP
    total_amount : DECIMAL(10,2)
    status : ENUM
    shipping_address : TEXT
}

TABLE(ItemsPedido) {
    PK(item_id) : INT
    --
    FK(order_id) : INT
    FK(product_id) : INT
    quantity : INT
    unit_price : DECIMAL(10,2)
}

TABLE(Pagos) {
    PK(payment_id) : INT
    --
    FK(order_id) : INT
    payment_method : ENUM
    transaction_id : VARCHAR(255)
    amount : DECIMAL(10,2)
    status : ENUM
    processed_at : TIMESTAMP
}

Usuarios ||--o{ Pedidos : realiza
Pedidos }o--|{ Usuarios : pertenece_a
Pedidos ||--|{ ItemsPedido : contiene
ItemsPedido }o--|| Productos : referencia
Productos }o--|| Categorias : categorizado_en
Pedidos ||--o{ Pagos : pagado_por

note right of Usuarios
  Almacena cuentas de clientes
  y datos de autenticación
end note

note left of Pedidos
  Registro principal de transacción
  con detalles de envío
end note

@enduml

graph TB
    subgraph AWS["Infraestructura en la Nube AWS"]
        direction TB
        
        subgraph Networking["Redes"]
            VPC[VPC 10.0.0.0/16]
            IGW[Gateway de Internet]
            NAT[Gateway NAT]
            
            subgraph Public["Subredes Públicas"]
                ALB[Balanceador de Carga de Aplicaciones]
                Bastion[Host Bastión]
            end
            
            subgraph Private["Subredes Privadas"]
                subgraph AppTier["Capa de Aplicación"]
                    ECS1[Tarea ECS 1]
                    ECS2[Tarea ECS 2]
                    ECS3[Tarea ECS 3]
                end
                
                subgraph DataTier["Capa de Datos"]
                    RDS[RDS PostgreSQL<br/>Multi-AZ]
                    Redis[ElastiCache Redis]
                end
            end
        end
        
        subgraph Storage["Almacenamiento"]
            S3[Buckets S3<br/>Activos y Copias de Seguridad]
            EFS[Almacenamiento Compartido EFS]
        end
        
        subgraph Security["Seguridad"]
            WAF[Reglas WAF]
            SG[Grupos de Seguridad]
            IAM[Rol IAM]
        end
        
        subgraph Monitoring["Monitoreo y Registro"]
            CW[CloudWatch]
            XRay[AWS X-Ray]
            SNS[Notificaciones SNS]
        end
    end
    
    Usuario[Usuarios Finales] --> CloudFront[CloudFront CDN]
    CloudFront --> WAF
    WAF --> ALB
    ALB --> ECS1
    ALB --> ECS2
    ALB --> ECS3
    
    ECS1 --> RDS
    ECS2 --> RDS
    ECS3 --> RDS
    
    ECS1 --> Redis
    ECS2 --> Redis
    ECS3 --> Redis
    
    ECS1 --> S3
    ECS2 --> S3
    ECS3 --> S3
    
    ECS1 --> EFS
    ECS2 --> EFS
    ECS3 --> EFS
    
    ECS1 --> CW
    ECS2 --> CW
    ECS3 --> CW
    
    RDS --> CW
    Redis --> CW
    
    CW --> SNS
    
    style VPC fill:#f9f9f9,stroke:#333,stroke-width:2px
    style ALB fill:#ff9900,stroke:#cc7a00,color:white
    style RDS fill:#2e73b8,stroke:#1a4d80,color:white
    style Usuario fill:#95a5a6,stroke:#7f8c8d

%%{init: {'theme':'base', 'themeVariables': {
    'primaryColor': '#4CAF50',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#388E3C',
    'lineColor': '#757575',
    'secondaryColor': '#FFC107',
    'tertiaryColor': '#fff'
}}}%%

graph TD
    A[Inicio] --> B{Decisión}
    B -->|Sí| C[Proceso A]
    B -->|No| D[Proceso B]
    C --> E[Fin]
    D --> E
    
    style A fill:#2196F3,stroke:#1976D2,color:white
    style E fill:#F44336,stroke:#D32F2F,color:white

@startuml
' Estilos globales
skinparam backgroundColor #FFFFFF
skinparam shadowing false
skinparam roundcorner 10
skinparam linetype ortho

' Estilos de componentes
skinparam component {
    BackgroundColor #E3F2FD
    BorderColor #1976D2
    ArrowColor #1976D2
}

' Estilos de paquetes
skinparam package {
    BackgroundColor #FFF3E0
    BorderColor #F57C00
    FontSize 14
}

' Estilos de notas
skinparam note {
    BackgroundColor #F1F8E9
    BorderColor #689F38
    FontColor #33691E
}

package "Frontend" {
    component [Aplicación React]
    component [Almacén Redux]
}

package "Backend" {
    component [API Node.js]
    component [Servidor Express]
    database [MongoDB]
}

[Aplicación React] --> [Almacén Redux]
[Almacén Redux] --> [API Node.js]
[API Node.js] --> [Servidor Express]
[Servidor Express] --> [MongoDB]

note right of [Almacén Redux]
  Gestión centralizada del estado
  para toda la aplicación
end note

@enduml

digraph AdvancedStyling {
    // Atributos globales del gráfico
    graph [
        bgcolor="#f8f9fa"
        fontname="Helvetica"
        fontsize=16
        label="Arquitectura de sistema empresarialnEntorno de producción"
        labelloc="t"
        pad=0.5
        ranksep=1.5
        nodesep=1.0
    ];
    
    // Atributos de nodo por defecto
    node [
        fontname="Helvetica"
        fontsize=11
        style="filled,rounded"
        penwidth=2
    ];
    
    // Atributos de arista por defecto
    edge [
        fontname="Helvetica"
        fontsize=9
        penwidth=1.5
        arrowsize=0.8
    ];
    
    // Agrupaciones de nodos con estilo personalizado
    subgraph cluster_presentation {
        label="Capa de presentación";
        style=filled;
        color="#e3f2fd";
        fontcolor="#1565c0";
        
        Web [label="Aplicación web<br/>React 18", fillcolor="#64b5f6", fontcolor="white"];
        Mobile [label="Aplicación móvil<br/>Flutter", fillcolor="#64b5f6", fontcolor="white"];
    }
    
    subgraph cluster_business {
        label="Capa de lógica de negocio";
        style=filled;
        color="#fff3e0";
        fontcolor="#e65100";
        
        API [label="API REST<br/>Node.js", fillcolor="#ffb74d", fontcolor="black"];
        GraphQL [label="Pasarela GraphQL", fillcolor="#ffb74d", fontcolor="black"];
    }
    
    subgraph cluster_data {
        label="Capa de datos";
        style=filled;
        color="#e8f5e9";
        fontcolor="#2e7d32";
        
        Primary [label="Base de datos principal<br/>PostgreSQL 14", shape=cylinder, fillcolor="#a5d6a7"];
        Replica [label Réplica de lectura<br/>PostgreSQL 14", shape=cylinder, fillcolor="#c8e6c9"];
        Cache [label="Caché Redis<br/>Modo clúster", shape=cylinder, fillcolor="#c8e6c9"];
    }
    
    // Aristas con estilo personalizado
    Web -> API [label="HTTPS/REST", color="#1976d2", fontcolor="#1976d2"];
    Mobile -> API [label="HTTPS/REST", color="#1976d2", fontcolor="#1976d2"];
    Web -> GraphQL [label="WebSocket", color="#1976d2", fontcolor="#1976d2", style=dashed];
    
    API -> Primary [label="Lectura/Escritura", color="#388e3c", fontcolor="#388e3c"];
    API -> Cache [label="Caché", color="#f57c00", fontcolor="#f57c00", style=dashed];
    GraphQL -> Replica [label="Solo lectura", color="#388e3c", fontcolor="#388e3c"];
    
    Primary -> Replica [label="Replicación en streaming", color="#757575", style=dotted];
}