Read this post in: de_DEen_USes_ESfr_FRhi_INid_IDjapl_PLru_RUvizh_CNzh_TW

Guia de Referência do Playbook VPASCode PlantUML

Uma lista selecionada de artigos do Playbook VPASCode PlantUML, com guias de sintaxe para fluxos de trabalho de diagramas como código, tanto UML quanto não-UML.

Fundamentos do PlantUML e Sintaxe Básica

  1. Básicos da Sintaxe do PlantUML: Domine a sintaxe fundamental do PlantUML, incluindo a declaração de diagramas com @startuml/@enduml, definições de entidades, operadores de relacionamento, diretivas de estilização e palavras-chave comuns. Aprenda a estruturar scripts PlantUML limpos e legíveis que geram diagramas profissionais automaticamente. [[34]]

  2. Guia de Sintaxe de Diagramas de Caso de Uso do PlantUML: Aprenda a modelar requisitos funcionais e interações de atores usando diagramas de caso de uso do PlantUML. Aborda atores, casos de uso, limites do sistema, relacionamentos include/extend e padrões de generalização para documentação de requisitos e mapeamento de histórias de usuário.

  3. Guia de Sintaxe de Diagramas de Classes do PlantUML: Projete estruturas estáticas do sistema com diagramas de classes do PlantUML. Domine declarações de classe/atributo/método, modificadores de visibilidade, herança (<|--), composição (*--), agregação (o--), e relacionamentos de associação para documentação de arquitetura orientada a objetos. [[49]]

  4. Guia de Sintaxe de Diagramas de Sequência do PlantUML: Modele fluxos de mensagens e interações temporais entre componentes do sistema. Aprenda declarações de participantes, mensagens síncronas/assíncronas (->, -->), barras de ativação, laços, blocos alt/else e sintaxe de criação/desativação para design de APIs e diagramas de comunicação de microsserviços. [[51]]

  5. Guia de Sintaxe de Diagramas de Atividades do PlantUML: Visualize processos de negócios e fluxos algorítmicos usando a sintaxe de diagramas de atividades do PlantUML. Aborda nós de início/fim, ações, ramificações condicionais (if/then/else), laços (repeat/while), ramos paralelos e faixas de partição para documentação de lógica procedural. [[46]]

  6. Guia de Sintaxe de Diagrama de Estados PlantUML: Modele máquinas de estados finitos e transições do ciclo de vida de objetos. Aprenda declarações de estado, setas de transição (-->), ações de entrada/saída, estados compostos e regiões concorrentes para design de sistemas orientados a eventos e especificação comportamental. [[36]]

  7. Guia de Sintaxe de Diagrama de Objetos PlantUML: Ilustre instâncias concretas de objetos e suas relações em tempo de execução em um momento específico. Domine a nomenclatura de objetos, atribuições de valores de atributos, sintaxe de links e associações em nível de instância para depuração e visualização de cenários de teste. [[15]]

  8. Guia de Sintaxe de Diagrama de Componentes PlantUML: Mapeie arquiteturas de software modulares com componentes, interfaces e dependências. Aprenda declarações de componentes, interfaces fornecidas/necessárias (<>), setas de dependência e agrupamento de pacotes para documentação de sistemas de microsserviços e baseados em plug-ins. [[35]]

Tipos Avançados de Diagramas PlantUML

  1. Guia de Sintaxe de Diagrama de Implantação PlantUML: Modele infraestrutura física e topologia de implantação em tempo de execução. Domine nó, nuvem, quadro, banco de dados, e artefato elementos, sintaxe de contêineres aninhados e rotulagem de protocolos de rede para livros de procedimentos DevOps e diagramas de arquitetura em nuvem. [[31]]

@startuml
skinparam shadowing false
skinparam defaultFontName "Arial"

' Definir estilos
skinparam node {
BackgroundColor #F1F8FF
BorderColor #005CC5
FontColor #032F62
}

skinparam database {
BackgroundColor #FFF5E6
BorderColor #D96F00
FontColor #5C3000
}

skinparam artifact {
BackgroundColor #E6FFF1
BorderColor #008670
FontColor #004D40
}

esquerda para direita direction

' Zonas de Rede / Nós
node "Rede de Entrega de Conteúdo" as cdn <<CDN>> {
artifact "Ativos Estáticos em Cache" as static
}

node "Balanceador de Carga" as lb <<F5 / HAProxy>>

node "Servidor de Aplicação" as appServer <<Ubuntu Linux>> {
node "Contêiner Docker" as docker {
artifact "app.war" as artifactApp
}
}

node "Servidor de Banco de Dados" as dbServer <<Cluster>> {
database "Banco de Dados de Produção" as db <<PostgreSQL>>
}

' Conexões com Rótulos de Protocolo
cdn --> lb : HTTP/HTTPS (Porta 443)
lb --> artifactApp : HTTP (Porta 8080)
artifactApp --> db : JDBC / SQL (Porta 5432)

@enduml

Exemplo: Arquitetura clássica em três camadas que mostra CDN, balanceador de carga, servidor de aplicação com artefato aninhado e camada de banco de dados com conexões rotuladas por protocolo. [[1]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

skinparam linetype ortho

' Definições de Estilo

skinparam rectangle {

    BackgroundColor #F4F6F9

    BorderColor #A0AAB2

    FontColor #232F3E

}

skinparam node {

    BackgroundColor #E2F3FC

    BorderColor #4A90E2

    FontColor #111111

}

skinparam database {

    BackgroundColor #FFF2E6

    BorderColor #FF9900

    FontColor #232F3E

}

' Ponto de Entrada da Infraestrutura

node "AWS Route 53" as dns

node "Balanceador de Carga de Aplicação AWS" as alb

dns --> alb : Encaminhar Tráfego

' Perímetro Global em Nuvem

rectangle "Região da Nuvem AWS" {

   

    ' Limite do Cluster Kubernetes Cross-AZ

    rectangle "Cluster Amazon EKS" as eks {

       

        ' Zona de Disponibilidade 1

        rectangle "Zona de Disponibilidade us-east-1a" as az1 #line.dashed {

            node "Nó de Trabalho EC2 (AZ1)" as node1 {

                rectangle "Pod Frontend" as podWeb1 <<Pod K8s>> {

                    artifact "Contêiner Nginx" as containerWeb1

                }

                rectangle "Pod API Backend" as podApi1 <<Pod K8s>> {

                    artifact "Contêiner de Aplicativo Go" as containerApi1

                }

            }

        }

        ' Zona de Disponibilidade 2

        rectangle "Zona de Disponibilidade us-east-1b" as az2 #line.dashed {

            node "Nó de Trabalho EC2 (AZ2)" as node2 {

                rectangle "Pod Frontend" as podWeb2 <<Pod K8s>> {

                    artifact "Contêiner Nginx" as containerWeb2

                }

                rectangle "Pod API Backend" as podApi2 <<Pod K8s>> {

                    artifact "Contêiner de Aplicativo Go" as containerApi2

                }

            }

        }

    }

    ' Camada de Banco de Dados Compartilhado

    rectangle "Motor de Armazenamento Amazon Aurora" as storage {

        database "Aurora Primário (Escritor)" as dbMaster

        database "Aurora Replica (Leitor)" as dbReplica

    }

}

' Roteamento e Matriz de Tráfego

alb --> podWeb1 : HTTP/S (Porta 80/443)

alb --> podWeb2 : HTTP/S (Porta 80/443)

podWeb1 --> podApi1 : gRPC (Porta 50051)

podWeb2 --> podApi2 : gRPC (Porta 50051)

podApi1 --> dbMaster : TCP (Porta 5432)

podApi2 --> dbMaster : TCP (Porta 5432)

dbMaster .right.> dbReplica : Replicação Automática de Armazenamento

@enduml

Exemplo: Implantação nativa em nuvem do Kubernetes em zonas de disponibilidade da AWS com roteamento por balanceador de carga, aninhamento de pods e cluster de banco de dados compartilhado. [[1]]

  1. Guia de Sintaxe de Diagrama de Temporização do PlantUML: Visualize durações precisas de estados e restrições temporais ao longo de linhas do tempo lineares. Aprenda robusto/conciso estilos de participantes, @ponto de tempo atribuições de estado, relógio geração de ondas, e <-> anotações de restrição para sistemas embarcados e especificação de protocolos. [[30]]

@startuml
skinparam handwritten false
skinparam shadowing false
skinparam defaultFontName "Arial"

' Título do diagrama de temporização
title Linha do Tempo de Sincronização do Registro da Barramento de Dados

' Defina uma onda de relógio periódica (período de 10 unidades, alto por 5 unidades)
clock "Relógio do Sistema" como CLK com período 10 pulso 5

' Defina o participante robusto do Barramento de Dados
robusto "Registro do Barramento de Dados" como BUS

' Tempo 0: Estado inicial do registro
@0
BUS está Vazio

' Tempo 10: O barramento de dados muda para Leitura
@10
BUS está Lendo

' Tempo 20: O barramento de dados muda para Escrita
@20
BUS está Escrevendo

' Tempo 22: Exiba a etiqueta de texto personalizada na linha do tempo
@22
note top of BUS : T_ESCRITA

' Tempo 30: O barramento de dados torna-se Trancado
@30
BUS está Trancado

' Tempo 35: Exiba a etiqueta de texto personalizada na linha do tempo
@35
note top of BUS : T_TRANCADO

' Tempo 40: O barramento de dados retorna ao estado Vazio
@40
BUS está Vazio

' Adicione anotações de restrição temporal usando pontos numéricos explícitos
@22 <-> @35 : {13 TU Duração}

@enduml

Exemplo: Linha do tempo concisa mostrando os estados do registro do barramento de dados (Vazio → Leitura → Escrita → Trancado) sincronizados com uma onda de relógio periódica do sistema. [[12]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

' Título do diagrama de temporização multi-fio

title Sincronização da Thread do Cliente Web e da Thread de Trabalho de Autenticação

' Declare as linhas do tempo usando o estilo de participante robusto

robusto "Thread do Cliente Web" como CLIENTE

robusto "Thread de Trabalho de Autenticação" como AUTH

' Tempo 0ms: Estados Iniciais Ociosos

@0

CLIENTE está Ocioso

AUTH está Ocioso

' Tempo 10ms: Cliente dispara uma solicitação de autenticação

@10

CLIENTE está "Aguardando Autenticação"

AUTH está "Verificando Credenciais"

' Tempo 25ms: Cliente envia carga adicional / Autenticação começa a geração do token

@25

AUTH está "Gerando Token JWT"

' Tempo 40ms: Autenticação conclui a geração do token e responde ao cliente

@40

AUTH está Ocioso

CLIENTE está "Autenticado"

' Tempo 55ms: Cliente retorna ao estado padrão

@55

CLIENTE está Ocioso

' Anotação de Janela de Restrição Temporal de 30ms (de @10 a @40)

@10 <-> @40 : {Janela de Geração de 30ms}

@enduml

Exemplo: Linha do tempo robusta multi-fio mapeando os estados do cliente web e do trabalhador de autenticação com uma anotação de restrição de janela de geração de 30ms. [[12]]

  1. Guia de Sintaxe de Diagrama ER do PlantUML: Projete diagramas de entidade-relacionamento para documentação de esquemas de banco de dados. Domine declarações de entidades, tipagem de atributos, notação de chaves primárias/estrangeiras e relações de cardinalidade (1|o--o{) para modelagem de dados e planejamento de migração SQL.

  2. Guia de Sintaxe de Diagrama ArchiMate do PlantUML: Modele camadas de arquitetura empresarial usando a especificação ArchiMate. Aprenda elementos de camadas de negócios/aplicação/tecnologia, conceitos de motivação e tipos de relacionamento para planejamento estratégico de TI e documentação de governança.

  3. Guia de Sintaxe do Modelo C4 do PlantUML: Implemente o modelo C4 para visualização de arquitetura de software em quatro níveis de abstração: Contexto, Container, Componente e Código. Domine Pessoa, Sistema, Contêiner, e Componente estereótipos com contêineres de limite e estilização de relacionamentos para comunicação arquitetônica alinhada aos interessados.

Nota sobre Diagramas Incorporados: Todos os exemplos de código PlantUML na documentação do VPASCode são renderizados como diagramas interativos e editáveis diretamente no navegador. Os links das imagens PNG acima mostram visualizações estáticas dos diagramas de exemplo; para interatividade total, incluindo edição em tempo real, validação de sintaxe e exportação para PNG/SVG, visite diretamente cada URL do artigo em vpascode.com/docs. [[54]]

Recursos do Editor VPasCode: Cada artigo inclui botões de “Editar PlantUML no VPasCode” que abrem o exemplo de código no editor gratuito baseado em navegador do VPasCode — sem necessidade de login ou instalação. As alterações são visualizadas instantaneamente com renderização em tempo real. [[54]]

Referência compilada da documentação do VPASCode. O VPasCode é um editor gratuito, online e baseado em navegador para diagramas PlantUML, Mermaid e Graphviz, que não exige login ou instalação. [[54]]

Leave a Reply