Read this post in: de_DEen_USfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Guía de referencia del Playbook VPASCode PlantUML

Una lista de artículos seleccionados del Playbook VPASCode PlantUML que incluye guías de sintaxis para flujos de trabajo de diagramas como código, tanto UML como no UML.

Fundamentos y sintaxis básicos de PlantUML

  1. Fundamentos de la sintaxis de PlantUML: Domine la sintaxis fundamental de PlantUML, incluyendo la declaración de diagramas con @startuml/@enduml, definiciones de entidades, operadores de relaciones, directivas de estilo y palabras clave comunes. Aprenda a estructurar scripts de PlantUML limpios y legibles que generen diagramas profesionales automáticamente. [[34]]

  2. Guía de sintaxis de diagramas de casos de uso de PlantUML: Aprenda a modelar requisitos funcionales e interacciones de actores utilizando diagramas de casos de uso de PlantUML. Cubre actores, casos de uso, límites del sistema, relaciones include/extend y patrones de generalización para la documentación de requisitos y el mapeo de historias de usuario.

  3. Guía de sintaxis de diagramas de clases de PlantUML: Diseñe estructuras estáticas del sistema con diagramas de clases de PlantUML. Domine las declaraciones de clase/atributo/método, modificadores de visibilidad, herencia (<|--), composición (*--), agregación (o--), y relaciones de asociación para la documentación de arquitecturas orientadas a objetos. [[49]]

  4. Guía de sintaxis de diagramas de secuencia de PlantUML: Modele flujos de mensajes e interacciones temporales entre componentes del sistema. Aprenda las declaraciones de participantes, mensajes síncronos/asíncronos (->, -->), barras de activación, bucles, bloques alt/else y la sintaxis de creación/desactivación para el diseño de APIs y diagramas de comunicación entre microservicios. [[51]]

  5. Guía de sintaxis de diagramas de actividad de PlantUML: Visualice procesos de negocio y flujos algorítmicos utilizando la sintaxis de diagramas de actividad de PlantUML. Cubre nodos de inicio/fin, acciones, ramificaciones condicionales (if/then/else), bucles (repeat/while), bifurcaciones paralelas y carriles de partición para la documentación de lógica procedimental. [[46]]

  6. Guía de sintaxis de diagramas de estado de PlantUML: Modelar máquinas de estados finitos y transiciones del ciclo de vida de objetos. Aprender declaraciones de estado, flechas de transición (-->), acciones de entrada/salida, estados compuestos y regiones concurrentes para el diseño de sistemas orientados a eventos y especificación de comportamiento. [[36]]

  7. Guía de sintaxis de diagramas de objetos de PlantUML: Ilustrar instancias concretas de objetos y sus relaciones en tiempo de ejecución en un momento específico. Dominar la nomenclatura de objetos, asignaciones de valores de atributos, sintaxis de enlaces y asociaciones a nivel de instancia para depuración y visualización de escenarios de prueba. [[15]]

  8. Guía de sintaxis de diagramas de componentes de PlantUML: Representar arquitecturas de software modulares con componentes, interfaces y dependencias. Aprender declaraciones de componentes, interfaces proporcionadas/requeridas (<>), flechas de dependencia y agrupación de paquetes para la documentación de sistemas de microservicios y basados en complementos. [[35]]

Tipos avanzados de diagramas de PlantUML

  1. Guía de sintaxis de diagramas de despliegue de PlantUML: Modelar infraestructura física y topología de despliegue en tiempo de ejecución. Dominar nodo, nube, marco, base de datos, y artefacto elementos, sintaxis de contenedores anidados y etiquetado de protocolos de red para guías de operaciones DevOps y diagramas de arquitectura en la nube. [[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
}

izquierda a derecha direction

' Zonas de red / Nodos
nodo "Red de entrega de contenido" as cdn <<CDN>> {
artefacto "Recursos estáticos en caché" as static
}

nodo "Balanceador de carga" as lb <<F5 / HAProxy>>

nodo "Servidor de aplicaciones" as appServer <<Ubuntu Linux>> {
nodo "Contenedor Docker" as docker {
artefacto "app.war" as artifactApp
}
}

nodo "Servidor de base de datos" as dbServer <<Cluster>> {
database "Base de datos de producción" as db <<PostgreSQL>>
}

' Conexiones con etiquetas de protocolo
cdn --> lb : HTTP/HTTPS (Puerto 443)
lb --> artifactApp : HTTP (Puerto 8080)
artifactApp --> db : JDBC / SQL (Puerto 5432)

@enduml

Ejemplo: Arquitectura clásica de tres niveles que muestra CDN, balanceador de carga, servidor de aplicaciones con artefacto anidado y nivel de base de datos con conexiones etiquetadas por protocolo. [[1]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

skinparam linetype ortho

' Definiciones 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

}

' Punto de entrada de infraestructura

nodo "AWS Route 53" as dns

nodo "Balanceador de carga de aplicaciones de AWS" as alb

dns --> alb : Enrutar tráfico

' Perímetro de nube global

rectángulo "Región de nube de AWS" {

   

    ' Límite del clúster de Kubernetes entre zonas de disponibilidad

    rectángulo "Clúster de Amazon EKS" as eks {

       

        ' Zona de disponibilidad 1

        rectángulo "Zona de disponibilidad us-east-1a" as az1 #line.dashed {

            nodo "Nodo de trabajo EC2 (AZ1)" as node1 {

                rectángulo "Pod Frontend" as podWeb1 <<Pod K8s>> {

                    artefacto "Contenedor Nginx" as containerWeb1

                }

                rectángulo "Pod API de backend" as podApi1 <<Pod K8s>> {

                    artefacto "Contenedor de aplicación Go" as containerApi1

                }

            }

        }

        ' Zona de disponibilidad 2

        rectángulo "Zona de disponibilidad us-east-1b" as az2 #line.dashed {

            nodo "Nodo de trabajo EC2 (AZ2)" as node2 {

                rectángulo "Pod Frontend" as podWeb2 <<Pod K8s>> {

                    artefacto "Contenedor Nginx" as containerWeb2

                }

                rectángulo "Pod API de backend" as podApi2 <<Pod K8s>> {

                    artefacto "Contenedor de aplicación Go" as containerApi2

                }

            }

        }

    }

    ' Nivel de base de datos compartida

    rectángulo "Motor de almacenamiento de Amazon Aurora" as storage {

        base de datos "Aurora Primaria (Escritor)" as dbMaster

        base de datos "Aurora Replicada (Lector)" as dbReplica

    }

}

' Ruteo y matriz de tráfico

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

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

podWeb1 --> podApi1 : gRPC (Puerto 50051)

podWeb2 --> podApi2 : gRPC (Puerto 50051)

podApi1 --> dbMaster : TCP (Puerto 5432)

podApi2 --> dbMaster : TCP (Puerto 5432)

dbMaster .right.> dbReplica : Replicación automática de almacenamiento

@enduml

Ejemplo: Despliegue de Kubernetes nativo en la nube a través de zonas de disponibilidad de AWS con enrutamiento mediante balanceador de carga, anidamiento de pods y clúster de base de datos compartido. [[1]]

  1. Guía de sintaxis de diagramas de tiempo de PlantUML: Visualiza duraciones precisas de estados y restricciones temporales a lo largo de líneas de tiempo lineales. Aprende robusto/conciso estilos de participantes, @puntoTiempo asignaciones de estado, reloj generación de ondas, y <-> anotaciones de restricción para sistemas embebidos y especificación de protocolos. [[30]]

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

' Título del diagrama de tiempo
title Cronograma de sincronización del registro de bus de datos

' Define una onda de reloj periódica (periodo 10 unidades, alto 5 unidades)
clock "Reloj del sistema" como CLK con periodo 10 pulso 5

' Define al participante robusto del bus de datos
robusto "Registro del bus de datos" como BUS

' Tiempo 0: Estado inicial del registro
@0
BUS está Vacío

' Tiempo 10: El bus de datos cambia a Lectura
@10
BUS está Leyendo

' Tiempo 20: El bus de datos cambia a Escritura
@20
BUS está Escribiendo

' Tiempo 22: Muestra la etiqueta de texto personalizada en la línea de tiempo
@22
nota arriba de BUS : T_ESCRIBIR

' Tiempo 30: El bus de datos se convierte en Bloqueado
@30
BUS está Bloqueado

' Tiempo 35: Muestra la etiqueta de texto personalizada en la línea de tiempo
@35
nota arriba de BUS : T_BLOQUEO

' Tiempo 40: El bus de datos vuelve a estar Vacío
@40
BUS está Vacío

' Añade anotaciones de restricción temporal usando puntos numéricos explícitos
@22 <-> @35 : {13 TU Duración}

@enduml

Ejemplo: cronograma conciso que muestra los estados del registro del bus de datos (Vacío → Lectura → Escritura → Bloqueado) sincronizados con una onda de reloj del sistema periódica. [[12]]

@startuml

skinparam shadowing false

skinparam defaultFontName "Arial"

' Título del diagrama de tiempo multi-hilo

title Sincronización del hilo del cliente web y del hilo de trabajo de autenticación

' Declara las líneas de tiempo usando el estilo de participante robusto

robusto "Hilo del cliente web" como CLIENTE

robusto "Hilo de trabajo de autenticación" como AUTH

' Tiempo 0ms: Estados iniciales de espera

@0

CLIENTE está Inactivo

AUTH está Inactivo

' Tiempo 10ms: El cliente desencadena una solicitud de autenticación

@10

CLIENTE está "Esperando autenticación"

AUTH está "Verificando credenciales"

' Tiempo 25ms: El cliente envía carga adicional / La autenticación comienza la generación del token

@25

AUTH está "Generando token JWT"

' Tiempo 40ms: La autenticación finaliza la generación del token y responde al cliente

@40

AUTH está Inactivo

CLIENTE está "Autenticado"

' Tiempo 55ms: El cliente vuelve al estado predeterminado

@55

CLIENTE está Inactivo

' Anotación de ventana de restricción temporal de 30ms (Desde @10 hasta @40)

@10 <-> @40 : {Ventana de generación de 30ms}

@enduml

Ejemplo: cronograma robusto multi-hilo que representa los estados del cliente web y del trabajador de autenticación con una anotación de restricción de ventana de generación de 30ms. [[12]]

  1. Guía de sintaxis de diagramas ERD de PlantUML: Diseña diagramas entidad-relación para la documentación de esquemas de bases de datos. Domina las declaraciones de entidades, la tipificación de atributos, la notación de claves primarias/foráneas y las relaciones de cardinalidad (1|o--o{) para modelado de datos y planificación de migración SQL.

  2. Guía de sintaxis de diagramas ArchiMate de PlantUML: Modela capas de arquitectura empresarial usando la especificación ArchiMate. Aprende elementos de capas de negocio/aplicación/tecnología, conceptos de motivación y tipos de relaciones para la planificación estratégica de TI y la documentación de gobernanza.

  3. Guía de sintaxis del modelo C4 de PlantUML: Implementa el modelo C4 para la visualización de arquitectura de software en cuatro niveles de abstracción: Contexto, Contenedor, Componente y Código. Domina Persona, Sistema, Contenedor, y Componente esteriotipos con contenedores de límite y estilo de relaciones para la comunicación arquitectónica alineada con los interesados.

Nota sobre los diagramas incrustados: Todos los ejemplos de código PlantUML en la documentación de VPASCode se representan como diagramas interactivos y editables directamente en el navegador. Los enlaces de imágenes PNG anteriores muestran previas estáticas de los diagramas de ejemplo; para una interactividad completa, incluyendo edición en tiempo real, validación de sintaxis y exportación a PNG/SVG, visite directamente la URL de cada artículo en vpascode.com/docs. [[54]]

Características del editor VPasCode: Cada artículo incluye botones de «Editar PlantUML en VPasCode» que inician el ejemplo de código en el editor gratuito basado en navegador de VPasCode, sin necesidad de iniciar sesión ni instalar nada. Los cambios se previsualizan de inmediato con renderizado en tiempo real. [[54]]

Referencia compilada a partir de la documentación de VPASCode. VPasCode es un editor gratuito en línea basado en navegador para diagramas de PlantUML, Mermaid y Graphviz que no requiere inicio de sesión ni instalación. [[54]]

Dejar una contestacion