Dominando Diagramas como Código: Um Tutorial Completo do VPasCode para Equipes de Desenvolvimento Modernas

graph TD
    A[Usuário Inscreve Credenciais] --> B{Formato Válido?}
    B -->|Não| C[Mostrar Erro de Validação]
    B -->|Sim| D[Enviar para Serviço de Autenticação]
    C --> A
    D --> E{Credenciais Coincidem?}
    E -->|Não| F[Retornar 401 Não Autorizado]
    E -->|Sim| G[Gerar Token JWT]
    G --> H[Armazenar Token em Cookie HttpOnly]
    H --> I[Redirecionar para o Painel]
    F --> A
    
    style A fill:#e1f5ff,stroke:#0066cc
    style I fill:#d4edda,stroke:#28a745
    style F fill:#f8d7da,stroke:#dc3545

graph LR
    subgraph Client["Camada de Cliente"]
        Web[Aplicativo Web<br/>React]
        Mobile[Aplicativo Móvel<br/>Flutter]
    end
    
    subgraph API["API Gateway"]
        Gateway[ Kong Gateway ]
        Auth[Serviço de Autenticação]
        Rate[Limitador de Taxa]
    end
    
    subgraph Services["Serviços de Negócio"]
        User[Serviço de Usuário]
        Order[Serviço de Pedidos]
        Product[Serviço de Produtos]
        Payment[Serviço de Pagamento]
    end
    
    subgraph Data["Camada de Dados"]
        UserDB[(Banco de Dados de Usuário<br/>PostgreSQL)]
        OrderDB[(Banco de Dados de Pedidos<br/>MongoDB)]
        ProductDB[(Banco de Dados de Produtos<br/>PostgreSQL)]
        Cache[(Cache 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 Aplicativo Web
    participant O as Serviço de Pedidos
    participant P as Serviço de Pagamento
    participant I as Serviço de Inventário
    participant N as Serviço de Notificação
    
    C->>W: Adicionar itens ao carrinho
    C->>W: Clicar em "Finalizar compra"
    W->>O: POST /orders {itens, envio}
    O->>I: Reservar inventário
    I-->>O: Reserva confirmada
    O->>P: Processar pagamento
    P-->>O: Pagamento bem-sucedido
    O->>O: Criar registro de pedido
    O->>N: Enviar confirmação de pedido
    N-->>C: Confirmação por e-mail
    O-->>W: 201 Created {orderId}
    W-->>C: Exibir página de sucesso
    
    Note over O,P: Seção crítica<br/>deve ser transacional
    rect rgba(200, 200, 0, 0.2)
        O->>P: Cobrar cartão
        P-->>O: ID da transação
    end

gantt
    título Sprint 24 - Módulo de Autenticação
    formatoData  YYYY-MM-DD
    formatoEixo  %m/%d
    
    seção Backend
    Contratos de API Design       :concluído,    des1, 2024-06-01, 2d
    Implementar serviço JWT      :ativo,  des2, 2024-06-03, 3d
    Migração de banco de dados         :         des3, após des2, 2d
    Testes unitários              :         des4, após des3, 2d
    
    seção Frontend
    Componente de login           :         front1, 2024-06-03, 3d
    Gerenciamento de tokens          :         front2, após front1, 2d
    Rotas protegidas          :         front3, após front2, 2d
    
    seção Integração
    Integração de API           :         int1, após des4, 2d
    Testes E2E              :         int2, após int1, 3d
    Auditoria de segurança           :         int3, após int2, 2d

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

título "Plataforma de E-Commerce - Arquitetura de Componentes"

pacote "Camada de Apresentação" {
    [Frontend Web] as Web
    [Aplicativo Móvel] as Mobile
    [Painel Administrativo] as Admin
}

pacote "Camada de API" {
    [Gateway de API] as Gateway
    [Autenticação] as Auth
    [Limitador de Taxa] as RateLimit
}

pacote "Serviços de Negócio" {
    [Serviço de Catálogo] as Catalog
    [Serviço de Pedidos] as Order
    [Serviço de Pagamento] as Payment
    [Serviço de Envio] as Shipping
    [Serviço de Notificação] as Notify
}

pacote "Camada de Dados" {
    banco de dados "Banco de Dados de Produtos" as ProdDB
    banco de dados "Banco de Dados de Pedidos" as OrderDB
    banco de dados "Banco de Dados de Usuários" as UserDB
    fila "Fila de Mensagens" as 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 : assinar eventos
Notify ..> MQ : assinar eventos

@enduml

@startuml
|Cliente|
início
:Explorar Produtos;
:Adicionar ao Carrinho;
:Prosseguir para o Checkout;

|Sistema|
:Validar Itens do Carrinho;
:Calcular Total;
se (Itens Disponíveis?) então (sim)
  :Reservar Estoque;
senão (não)
  :Mostrar Indisponível;
  fim
endif

|Cliente|
:Inserir Endereço de Entrega;
:Selecionar Método de Pagamento;

|Sistema|
:Processar Pagamento;
se (Pagamento Bem-sucedido?) então (sim)
  :Criar Pedido;
  :Enviar E-mail de Confirmação;
  :Atualizar Estoque;
senão (não)
  :Mostrar Erro de Pagamento;
  desanexar
endif

:Enviar Pedido;
:Atualizar Status do Pedido;
fim

partição "Tarefas em Segundo Plano" {
  :Gerar Fatura;
  :Notificar Armazém;
}

@enduml

digraph MicroservicesDependencies {
    rankdir=TB;
    node [shape=box, style="rounded,filled", fontname="Arial"];
    edge [fontname="Arial", fontsize=10];
    
    // Definições de nós com cores
    node [fillcolor="#e3f2fd"];
    "API Gateway" [fillcolor="#ffcdd2"];
    "Service Mesh" [fillcolor="#fff9c4"];
    
    // Serviços principais
    "User Service";
    "Auth Service";
    "Order Service";
    "Payment Service";
    "Inventory Service";
    "Notification Service";
    "Analytics Service";
    
    // Bancos de dados
    node [shape=cylinder, fillcolor="#c8e6c9"];
    "User DB";
    "Order DB";
    "Product DB";
    "Analytics DB";
    
    // Serviços externos
    node [shape=box, fillcolor="#f3e5f5", style="dashed,filled"];
    "Payment Gateway";
    "Email Service";
    "SMS Service";
    
    // Relacionamentos
    "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 agrupamento
    {
        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];
    
    // Nível executivo
    CEO [label="CEOnJohn Smith", fillcolor="#1976d2", fontcolor="white"];
    
    // Nível C-Level
    subgraph cluster_exec {
        label="Equipe Executiva";
        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"];
    }
    
    // Engenharia
    subgraph cluster_eng {
        label="Engenharia";
        style=filled;
        color="#e3f2fd";
        
        VP_Eng [label="VP de Engenharia", fillcolor="#64b5f6"];
        
        subgraph cluster_eng_teams {
            label="Equipes";
            style=dotted;
            
            Backend [label="Equipe Backendn(12 engenheiros)", fillcolor="#bbdefb"];
            Frontend [label="Equipe Frontendn(8 engenheiros)", fillcolor="#bbdefb"];
            DevOps [label="Equipe DevOpsn(5 engenheiros)", fillcolor="#bbdefb"];
            QA [label="Equipe QAn(6 engenheiros)", fillcolor="#bbdefb"];
        }
    }
    
    // Produto
    subgraph cluster_product {
        label="Produto";
        style=filled;
        color="#fff3e0";
        
        VP_Product [label="VP de Produto", fillcolor="#ffb74d"];
        PM1 [label="Gerente de ProdutonPlataforma", fillcolor="#ffcc80"];
        PM2 [label="Gerente de ProdutonMobile", fillcolor="#ffcc80"];
        PM3 [label="Gerente de ProdutonAnalytics", fillcolor="#ffcc80"];
    }
    
    // Relacionamentos
    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;
    
    // Linhas pontilhadas para colaboração
    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="Fornecedor"];
    Bank [label="Sistema Bancário"];
    
    // Processos
    node [fillcolor="#c5cae9", shape=circle];
    P1 [label="Realizar Pedido"];
    P2 [label="Processar Pagamento"];
    P3 [label="Atualizar Estoque"];
    P4 [label="Gerar Fatura"];
    P5 [label="Enviar Pedido"];
    P6 [label="Enviar Notificação"];
    
    // Armazenamentos de dados
    node [fillcolor="#c8e6c9", shape=box3d];
    D1 [label="Banco de Dados de Pedidos"];
    D2 [label="Banco de Dados de Estoque"];
    D3 [label="Banco de Dados de Clientes"];
    D4 [label="Registros de Faturas"];
    
    // Fluxos de dados
    Customer -> P1 [label="Solicitação de Pedido"];
    P1 -> D1 [label="Armazenar Pedido"];
    P1 -> D3 [label="Atualizar Cliente"];
    P1 -> P2 [label="Detalhes do Pagamento"];
    
    P2 -> Bank [label="Solicitação de Pagamento"];
    Bank -> P2 [label="Confirmação de Pagamento"];
    P2 -> P3 [label="Pagamento Bem-sucedido"];
    
    P3 -> D2 [label="Reduzir Estoque"];
    P3 -> P4 [label="Pedido Confirmado"];
    
    P4 -> D4 [label="Salvar Fatura"];
    P4 -> P6 [label="Dados da Fatura"];
    
    P3 -> P5 [label="Solicitação de Envio"];
    P5 -> Vendor [label="Rótulo de Envio"];
    P5 -> P6 [label="Informações de Rastreamento"];
    
    P6 -> Customer [label="Confirmação do Pedidon+ Rastreamento"];
    
    // Linhas tracejadas para consultas
    D1 -> P5 [label="Obter Detalhes do Pedido", style=dashed];
    D2 -> P1 [label="Verificar Disponibilidade", style=dashed];
    D3 -> P1 [label="Obter Informações do Cliente", style=dashed];
}

graph LR
    subgraph Source["Controle de Origem"]
        Git[Repositório GitHub]
        PR[Pull Request]
    end
    
    subgraph CI["Integração Contínua"]
        Lint[Verificação de Código]
        Test[Testes Unitários]
        Build[Artefatos de Compilação]
        Scan[Varredura de Segurança]
    end
    
    subgraph CD["Implantação Contínua"]
        Dev[Implantar em Dev]
        Stage[Implantar em Staging]
        E2E[Testes E2E]
        Prod[Implantar em Produção]
    end
    
    subgraph Monitor["Monitoramento"]
        Logs[Agregação de Logs]
        Metrics[Dashboard 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(Users) {
    PK(user_id) : INT
    --
    email : VARCHAR(255)
    password_hash : VARCHAR(255)
    created_at : TIMESTAMP
    last_login : TIMESTAMP
    status : ENUM
}

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

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

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

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

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

Users ||--o{ Orders : places
Orders }o--|{ Users : belongs_to
Orders ||--|{ OrderItems : contains
OrderItems }o--|| Products : references
Products }o--|| Categories : categorized_in
Orders ||--o{ Payments : paid_by

note right of Users
  Armazena contas de clientes
  e dados de autenticação
end note

note left of Orders
  Registro principal de transação
  com detalhes de envio
end note

@enduml

graph TB
    subgraph AWS["Infraestrutura em Nuvem AWS"]
        direction TB
        
        subgraph Networking["Rede"]
            VPC[VPC 10.0.0.0/16]
            IGW[Internet Gateway]
            NAT[NAT Gateway]
            
            subgraph Public["Subnets Públicas"]
                ALB[Application Load Balancer]
                Bastion[Bastion Host]
            end
            
            subgraph Private["Subnets Privadas"]
                subgraph AppTier["Camada de Aplicação"]
                    ECS1[ECS Task 1]
                    ECS2[ECS Task 2]
                    ECS3[ECS Task 3]
                end
                
                subgraph DataTier["Camada de Dados"]
                    RDS[RDS PostgreSQL<br/>Multi-AZ]
                    Redis[ElastiCache Redis]
                end
            end
        end
        
        subgraph Storage["Armazenamento"]
            S3[S3 Buckets<br/>Ativos & Backups]
            EFS[EFS Armazenamento Compartilhado]
        end
        
        subgraph Security["Segurança"]
            WAF[WAF Rules]
            SG[Security Groups]
            IAM[IAM Roles]
        end
        
        subgraph Monitoring["Monitoramento & Logs"]
            CW[CloudWatch]
            XRay[AWS X-Ray]
            SNS[SNS Notifications]
        end
    end
    
    User[Usuários Finais] --> 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 User fill:#95a5a6,stroke:#7f8c8d

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

graph TD
    A[Início] --> B{Decisão}
    B -->|Sim| C[Processo A]
    B -->|Não| D[Processo B]
    C --> E[Fim]
    D --> E
    
    style A fill:#2196F3,stroke:#1976D2,color:white
    style E fill:#F44336,stroke:#D32F2F,color:white

@startuml
' Estilização global
skinparam backgroundColor #FFFFFF
skinparam shadowing false
skinparam roundcorner 10
skinparam linetype ortho

' Estilização de componentes
skinparam component {
    BackgroundColor #E3F2FD
    BorderColor #1976D2
    ArrowColor #1976D2
}

' Estilização de pacotes
skinparam package {
    BackgroundColor #FFF3E0
    BorderColor #F57C00
    FontSize 14
}

' Estilização de notas
skinparam note {
    BackgroundColor #F1F8E9
    BorderColor #689F38
    FontColor #33691E
}

package "Frontend" {
    component [Aplicativo React]
    component [Redux Store]
}

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

[Aplicativo React] --> [Redux Store]
[Redux Store] --> [API Node.js]
[API Node.js] --> [Servidor Express]
[Servidor Express] --> [MongoDB]

note right of [Redux Store]
  Gerenciamento de estado centralizado
  para toda a aplicação
end note

@enduml

digraph AdvancedStyling {
    // Atributos globais do gráfico
    graph [
        bgcolor="#f8f9fa"
        fontname="Helvetica"
        fontsize=16
        label="Arquitetura do Sistema EmpresarialnAmbiente de Produção"
        labelloc="t"
        pad=0.5
        ranksep=1.5
        nodesep=1.0
    ];
    
    // Atributos padrão dos nós
    node [
        fontname="Helvetica"
        fontsize=11
        style="filled,rounded"
        penwidth=2
    ];
    
    // Atributos padrão das arestas
    edge [
        fontname="Helvetica"
        fontsize=9
        penwidth=1.5
        arrowsize=0.8
    ];
    
    // Agrupamentos de nós com estilização personalizada
    subgraph cluster_presentation {
        label="Camada de Apresentação";
        style=filled;
        color="#e3f2fd";
        fontcolor="#1565c0";
        
        Web [label="Aplicativo Web<br/>React 18", fillcolor="#64b5f6", fontcolor="white"];
        Mobile [label="Aplicativo Móvel<br/>Flutter", fillcolor="#64b5f6", fontcolor="white"];
    }
    
    subgraph cluster_business {
        label="Camada de Lógica de Negócio";
        style=filled;
        color="#fff3e0";
        fontcolor="#e65100";
        
        API [label="API REST<br/>Node.js", fillcolor="#ffb74d", fontcolor="black"];
        GraphQL [label="Gateway GraphQL", fillcolor="#ffb74d", fontcolor="black"];
    }
    
    subgraph cluster_data {
        label="Camada de Dados";
        style=filled;
        color="#e8f5e9";
        fontcolor="#2e7d32";
        
        Primary [label="DB Primário<br/>PostgreSQL 14", shape=cylinder, fillcolor="#a5d6a7"];
        Replica [label="Réplica de Leitura<br/>PostgreSQL 14", shape=cylinder, fillcolor="#c8e6c9"];
        Cache [label="Cache Redis<br/>Modo Cluster", shape=cylinder, fillcolor="#c8e6c9"];
    }
    
    // Arestas com estilização personalizada
    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="Leitura/Escrita", color="#388e3c", fontcolor="#388e3c"];
    API -> Cache [label="Cache", color="#f57c00", fontcolor="#f57c00", style=dashed];
    GraphQL -> Replica [label="Apenas Leitura", color="#388e3c", fontcolor="#388e3c"];
    
    Primary -> Replica [label="Replicação em Streaming", color="#757575", style=dotted];
}