Diagramas y Gráficos como Código

El enfoque de Diagramas como Código (Diagrams-as-Code) permite generar diagramas de flujo, diagramas de arquitectura, secuencias UML y cronogramas directamente a partir de texto plano en Markdown, versionables mediante Git.

Las dos herramientas líderes en este ámbito son Mermaid.js (soportada de forma nativa en GitHub, GitLab, Notion y Obsidian) y PlantUML.

1. Mermaid.js: El Estándar Integrado en la Web #

Mermaid renderiza diagramas vectoriales SVG a partir de bloques de código vallados con el identificador mermaid.

A. Diagramas de Flujo (Flowcharts) #

Permite definir flujos lógicos con nodos rectangulares [texto], redondeados (texto) o de decisión {condición}:

1```mermaid
2flowchart TD
3    A[Inicio: Petición HTTP] --> B{¿Usuario Autenticado?}
4    B -- Sí --> C[Procesar Controlador y Base de Datos]
5    B -- No --> D[Retornar Error HTTP 401 Unauthorized]
6    C --> E[Enviar Respuesta JSON 200 OK]
7```

B. Diagramas de Secuencia (Sequence Diagrams) #

Modela la interacción temporal y mensajes entre diferentes componentes o microservicios:

1```mermaid
2sequenceDiagram
3    autonumber
4    actor Cliente as Navegador Web
5    participant API as Backend Gateway
6    participant DB as PostgreSQL
7
8    Cliente->>API: POST /api/login {email, password}
9    API->>DB: SELECT * FROM usuarios WHERE email = ?
10    DB-->>API: Datos del usuario y password hash
11    API-->>Cliente: HTTP 200 OK + JWT Token
12```

C. Diagramas de Clases y Entidad-Relación (Class Diagrams) #

1```mermaid
2classDiagram
3    class Usuario {
4        +int id
5        +string email
6        +login(password) bool
7    }
8    class Pedido {
9        +int idPedido
10        +float total
11        +calcularIVA() float
12    }
13    Usuario "1" --> "*" Pedido : realiza
14```

D. Diagramas de Gantt para Cronogramas #

1```mermaid
2gantt
3    title Cronograma del Sprint de Desarrollo
4    dateFormat  YYYY-MM-DD
5    section Backend
6    Diseño de Esquema DB :done, a1, 2026-09-01, 3d
7    Endpoints REST       :active, a2, after a1, 5d
8    section Frontend
9    Vistas en React      :a3, 2026-09-04, 6d
10```

2. PlantUML: Arquitectura y Modelado UML Avanzado #

PlantUML es una herramienta madura basada en Java, idónea para diagramas arquitectónicos de gran escala. Requiere extensiones de VS Code (como PlantUML o Markdown Preview Enhanced) o integración con servidores de renderizado:

1```plantuml
2@startuml
3skinparam style strictuml
4actor Usuario
5participant "Servidor Web" as Web
6database "Base de Datos" as BD
7
8Usuario -> Web: Consultar catálogo
9Web -> BD: Consulta SQL
10BD --> Web: Resultados
11Web --> Usuario: Renderizar catálogo
12@enduml
13```