Solo Con Linux

02. Manual de Uso de Mermaid

Manuales 6 de sep. de 2026

Capítulo 2: Diagramas de Flujo Avanzados, Subgrafos y Estilos CSS

En el capítulo anterior aprendiste la sintaxis básica y cómo compilar tus primeros archivos .mmd. Ahora profundizaremos en el diseño de diagramas de flujo complejos, explorando la organización modular mediante subgrafos y la personalización estética utilizando estilos CSS y clases.

1. Conexiones Avanzadas y Encadenamiento

A medida que los flujos crecen, definir las conexiones línea por línea puede volverse repetitivo. Mermaid permite encadenar nodos y definir múltiples enlaces en una sola instrucción.

Encadenamiento en serie

Puedes conectar múltiples nodos de forma consecutiva en una sola línea:

flowchart LR
    A --> B --> C --> D

flowchart LR
    A --> B --> C --> D

Conexiones múltiples (uno a muchos / muchos a uno)

Para enviar o recibir flujos hacia/desde varios nodos simultáneamente, utiliza la sintaxis con &:

flowchart TD
    %% Uno a muchos
    Inicio --> A & B & C
    
    %% Muchos a uno
    A & B & C --> Fin


flowchart TD
    %% Uno a muchos
    Inicio --> A & B & C
    
    %% Muchos a uno
    A & B & C --> Fin

Cruzamiento de enlaces y direcciones inversas

Puedes combinar diferentes direcciones en los conectores para controlar la disposición en pantalla:

flowchart LR
    Paso1 --> Paso2
    Paso2 --> Paso3
    Paso3 -- Reintentar --> Paso2
    Paso3 -- Error grave --> Paso1


flowchart LR
    Paso1 --> Paso2
    Paso2 --> Paso3
    Paso3 -- Reintentar --> Paso2
    Paso3 -- Error grave --> Paso1

2. Agrupación y Estructuración con Subgrafos

Los subgrafos (subgraph) permiten dividir diagramas extensos en bloques lógicos o secciones funcionales (por ejemplo, frontend, backend, base de datos).

Sintaxis básica de un subgrafo

flowchart TB
    subgraph Frontend [Capa de Presentación]
        UI[Interfaz de Usuario]
        App[Aplicación Móvil]
    end

    subgraph Backend [Capa de Negocio]
        API[Servidor API]
        Auth[Servicio de Autenticación]
    end

    UI --> API
    App --> API
    API --> Auth

flowchart TB
    subgraph Frontend [Capa de Presentación]
        UI[Interfaz de Usuario]
        App[Aplicación Móvil]
    end

    subgraph Backend [Capa de Negocio]
        API[Servidor API]
        Auth[Servicio de Autenticación]
    end

    UI --> API
    App --> API
    API --> Auth

Subgrafos anidados y dirección interna

Es posible anidar subgrafos dentro de otros y definir una dirección de flujo independiente (direction) para el interior de cada subgrafo:

flowchart LR
    subgraph Sistema [Sistema Principal]
        direction TB
        
        subgraph ModuloA [Módulo de Entrada]
            direction LR
            A1[Captura] --> A2[Validación]
        end
        
        subgraph ModuloB [Módulo de Salida]
            direction LR
            B1[Procesamiento] --> B2[Generación Reporte]
        end
        
        ModuloA --> ModuloB
    end


flowchart LR
    subgraph Sistema [Sistema Principal]
        direction TB
        
        subgraph ModuloA [Módulo de Entrada]
            direction LR
            A1[Captura] --> A2[Validación]
        end
        
        subgraph ModuloB [Módulo de Salida]
            direction LR
            B1[Procesamiento] --> B2[Generación Reporte]
        end
        
        ModuloA --> ModuloB
    end

Enlaces entre subgrafos

Puedes conectar nodos individuales directamente entre subgrafos o vincular la estructura del subgrafo completo asignándole un ID:

flowchart LR
    subgraph Grupo1 [Origen]
        N1[Nodo 1]
    end
    
    subgraph Grupo2 [Destino]
        N2[Nodo 2]
    end

    Grupo1 --> Grupo2


flowchart LR
    subgraph Grupo1 [Origen]
        N1[Nodo 1]
    end
    
    subgraph Grupo2 [Destino]
        N2[Nodo 2]
    end

    Grupo1 --> Grupo2

3. Personalización Estética: Estilos CSS y Clases

Mermaid permite modificar los colores, bordes y fuentes de tus diagramas directamente en el archivo .mmd utilizando directivas style y classDef.

Estilos individuales con style

Aplica propiedades CSS estándar a un nodo específico mediante la palabra clave style:

flowchart LR
    A[Servicio Activo]
    B[Servicio Inactivo]
    
    style A fill:#2ecc71,stroke:#27ae60,stroke-width:2px,color:#fff
    style B fill:#e74c3c,stroke:#c0392b,stroke-width:2px,color:#fff


flowchart LR
    A[Servicio Activo]
    B[Servicio Inactivo]
    
    style A fill:#2ecc71,stroke:#27ae60,stroke-width:2px,color:#fff
    style B fill:#e74c3c,stroke:#c0392b,stroke-width:2px,color:#fff

Reutilización de estilos con classDef

Para mantener el código limpio y no repetir estilos, define clases con classDef y asígnalas a los nodos:

flowchart TD
    %% 1. Definición de clases reutilizables
    classDef exito fill:#2ecc71,stroke:#1abc9c,color:#fff,font-weight:bold;
    classDef alerta fill:#f39c12,stroke:#d35400,color:#fff;
    classDef error fill:#e74c3c,stroke:#c0392b,color:#fff;

    %% 2. Nodos del diagrama
    N1[Operación Correcta]
    N2[Advertencia de Espacio]
    N3[Fallo de Conexión]

    %% 3. Asignación de clases
    class N1 exito;
    class N2 alerta;
    class N3 error;


flowchart TD
    %% 1. Definición de clases reutilizables
    classDef exito fill:#2ecc71,stroke:#1abc9c,color:#fff,font-weight:bold;
    classDef alerta fill:#f39c12,stroke:#d35400,color:#fff;
    classDef error fill:#e74c3c,stroke:#c0392b,color:#fff;

    %% 2. Nodos del diagrama
    N1[Operación Correcta]
    N2[Advertencia de Espacio]
    N3[Fallo de Conexión]

    %% 3. Asignación de clases
    class N1 exito;
    class N2 alerta;
    class N3 error;

Sintaxis alternativa en línea: Puedes asignar una clase directamente al definir el nodo añadiendo :::nombreClase:

flowchart LR
    A[Ok]:::exito --> B[Warning]:::alerta


flowchart LR
    A[Ok]:::exito --> B[Warning]:::alerta

4. Ejemplo Complejo: Arquitectura de Microservicios

A continuación, combinamos encadenamiento, subgrafos anidados, direcciones internas y clases CSS en un único diagrama avanzado:

flowchart TB
    %% Definición de estilos
    classDef cliente fill:#3498db,stroke:#2980b9,color:#fff;
    classDef gateway fill:#9b59b6,stroke:#8e44ad,color:#fff;
    classDef microservicio fill:#1abc9c,stroke:#16a085,color:#fff;
    classDef db fill:#f1c40f,stroke:#f39c12,color:#333;

    %% Nodos de entrada
    Web[Cliente Web]:::cliente
    Mobile[App Móvil]:::cliente

    %% Api Gateway
    Gateway[API Gateway / Router]:::gateway

    Web & Mobile --> Gateway

    %% Infraestructura Backend
    subgraph Cloud [Infraestructura en la Nube]
        direction TB

        subgraph Servicios [Microservicios]
            direction LR
            Auth[Servicio Auth]:::microservicio
            Users[Servicio Usuarios]:::microservicio
            Orders[Servicio Pedidos]:::microservicio
        end

        subgraph Persistencia [Bases de Datos]
            direction LR
            DB_Auth[(Redis Cache)]:::db
            DB_Users[(PostgreSQL Users)]:::db
            DB_Orders[(MongoDB Orders)]:::db
        end
    end

    %% Conexiones entre capas
    Gateway --> Auth & Users & Orders
    
    Auth --> DB_Auth
    Users --> DB_Users
    Orders --> DB_Orders


flowchart TB
    %% Definición de estilos
    classDef cliente fill:#3498db,stroke:#2980b9,color:#fff;
    classDef gateway fill:#9b59b6,stroke:#8e44ad,color:#fff;
    classDef microservicio fill:#1abc9c,stroke:#16a085,color:#fff;
    classDef db fill:#f1c40f,stroke:#f39c12,color:#333;

    %% Nodos de entrada
    Web[Cliente Web]:::cliente
    Mobile[App Móvil]:::cliente

    %% Api Gateway
    Gateway[API Gateway / Router]:::gateway

    Web & Mobile --> Gateway

    %% Infraestructura Backend
    subgraph Cloud [Infraestructura en la Nube]
        direction TB

        subgraph Servicios [Microservicios]
            direction LR
            Auth[Servicio Auth]:::microservicio
            Users[Servicio Usuarios]:::microservicio
            Orders[Servicio Pedidos]:::microservicio
        end

        subgraph Persistencia [Bases de Datos]
            direction LR
            DB_Auth[(Redis Cache)]:::db
            DB_Users[(PostgreSQL Users)]:::db
            DB_Orders[(MongoDB Orders)]:::db
        end
    end

    %% Conexiones entre capas
    Gateway --> Auth & Users & Orders
    
    Auth --> DB_Auth
    Users --> DB_Users
    Orders --> DB_Orders

Compilación desde Debian

Para exportar este flujo complejo a una imagen vectorial de alta calidad con fondo transparente en Debian:

mmdc -i arquitectura.mmd -o arquitectura.svg -b transparent

Resumen del Capítulo

  1. Encadenamiento: Simplifica la sintaxis utilizando A & B --> C para conectar múltiples nodos simultáneamente.
  2. Subgrafos: Organiza diagramas complejos en módulos lógicos con subgraph e independiza sus direcciones con direction.
  3. Estilos CSS: Utiliza classDef para definir esquemas de color limpios, mantenibles y reutilizables en tus nodos.

Etiquetas

Luis GuLo

🐧 SysAdmin GNU/Linux - 🐳 Docker - 🖥️ Bash Scripting - 🐪 Perl - 🐬 MySQL - 👥 Formador de TI - 👥 Formador de SysAdmin's - 💢 Ansible - ☁️ Cloud Computing - ❤️ Debian GNU/Linux

Recomendado para ti