1. Diagramas de Flujo (graph o flowchart)

Los diagramas de flujo se componen de nodos (formas geométricas) y bordes (flechas o líneas). El código de sirena define cómo se hacen los nodos y los bordes y se adapta a diferentes tipos de flechas, flechas multidireccionales y cualquier enlace hacia y desde los subgrafos. Son los más comunes. Se definen con la palabra clave flowchart (o graph) seguida de la dirección del flujo:

  • TD o TB: De arriba a abajo (Top-Down / Top-Bottom).
  • BT: De abajo a arriba (Bottom-Top).
  • LR: De izquierda a derecha (Left-Right).
  • RL: De derecha a izquierda (Right-Left).

Formas de los Nodos y Flechas

La forma del nodo se define con diferentes tipos de paréntesis:

  • id[Texto] → Rectángulo (por defecto)
  • id(Texto) → Rectángulo con bordes redondeados
  • id([Texto]) → Estadio / Óvalo
  • id{Texto} → Rombo de decisión
  • id((Texto)) → Círculo
  • id[[Texto]] → Forma Sub-Rutina
  • id[(Texto)] → Cilindro
  • id>Texto] → Asimétrico
  • id{{Texto}} → Hexagonal
  • id[/Texto/] o id[\Texto\] → Paralelogramo
  • id[/Texto\] o id[\Texto/] → Trapezoide
  • id(((Texto))) → Doble Circulo

Las conexiones se hacen con --> para flechas, --- para líneas sin flecha, y puedes añadir texto usando -->|texto| o -- texto -->.

  • A-.->B Enlace punteado
  • A-. text .-> B Punteado con texto
  • A ==> B Grueso
  • A == text ==> B Grueso con Texto

Encadenamiento de enlaces

Es posible declarar varios enlaces en la misma línea, como se muestra a continuación: A -- text --> B -- text2 --> C

flowchart LR
   A -- text --> B -- text2 --> C

También es posible declarar enlaces de varios nodos en la misma línea, como se muestra a continuación: a --> b & c--> d

flowchart LR
   a --> b & c--> d

De esta forma, puedes describir las dependencias de una manera muy expresiva. Como en la siguiente línea:

Código:

A & B--> C & D

flowchart TB
    A & B--> C & D

Si describes el mismo diagrama usando la sintaxis básica, ocupará cuatro líneas. Una advertencia: se podría exagerar con esto, lo que dificultaría la lectura del diagrama de flujo en formato Markdown. La palabra sueca lagomMe viene a la mente. Significa ni demasiado ni demasiado poco. Esto también se aplica a las sintaxis expresivas.

flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D

flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D

Nuevos tipos de flechas

Se admiten nuevos tipos de flechas:

  • A --o B borde circular
  • A --x B borde cruzado

Flechas multidireccionales

Existe la posibilidad de utilizar flechas multidireccionales.

  • A o--o B
  • `B <--> C
  • C x--x D
flowchart LR
    A o--o B
    B <--> C
    C x--x D
Código:

Ejemplo de Diagrama de Flujo

Fragmento de código

flowchart TD
    A[Inicio del proceso] --> B{¿Tiene cuenta?}
    B -- Sí --> C[Iniciar Sesión]
    B -- No --> D[Registrarse]
    C --> E([Pantalla Principal])
    D --> E

Ejemplo:

flowchart TD
    A[Inicio del proceso] --> B{¿Tiene cuenta?}
    B -- Sí --> C[Iniciar Sesión]
    B -- No --> D[Registrarse]
    C --> E([Pantalla Principal])
    D --> E

2. Diagramas de Secuencia (sequenceDiagram)

Ideales para modelar la interacción entre diferentes componentes o sistemas a lo largo del tiempo.

  • actor: Representa a un usuario o entidad externa.
  • participant: Representa un sistema, módulo o clase.
  • ->>: Flecha sólida (llamada sincrónica/asincrónica).
  • -->>: Flecha punteada (respuesta/retorno).
  • activate y deactivate: Muestran el tiempo de vida o ejecución de un proceso.

Ejemplo de Diagrama de Secuencia

Fragmento de código

sequenceDiagram
    actor Cliente
    participant App as Aplicación Móvil
    participant API as Servidor API

    Cliente->>App: Presiona "Pagar"
    activate App
    App->>API: Enviar petición de cobro ($)
    activate API
    API-->>App: Confirmación de pago exitoso
    deactivate API
    App-->>Cliente: Mostrar pantalla de éxito
    deactivate App

Ejemplo:

sequenceDiagram
    actor Cliente
    participant App as Aplicación Móvil
    participant API as Servidor API

    Cliente->>App: Presiona "Pagar"
    activate App
    App->>API: Enviar petición de cobro ($)
    activate API
    API-->>App: Confirmación de pago exitoso
    deactivate API
    App-->>Cliente: Mostrar pantalla de éxito
    deactivate App

3. Diagramas de Clases (classDiagram)

Muy utilizados en el desarrollo de software orientado a objetos para representar la estructura del sistema.

  • Para definir miembros: tipo nombreVariable o nombreMetodo(parametros).

  • Relaciones:

    • Inherencia (Herencia): <|--
    • Composición: *--
    • Agregación: o--
    • Asociación: -->

Ejemplo de Diagrama de Clases

Fragmento de código

classDiagram
    class Animal {
        +String nombre
        +int edad
        +comer()
        +dormir()
    }
    class Perro {
        +String raza
        +ladrar()
    }
    class Dueno {
        +String nombre
        +mascotas List~Animal~
    }

    Animal <|-- Perro : Es un
    Dueno "1" o-- "many" Animal : Posee

Ejemplo:

classDiagram
    class Animal {
        +String nombre
        +int edad
        +comer()
        +dormir()
    }
    class Perro {
        +String raza
        +ladrar()
    }
    class Dueno {
        +String nombre
        +mascotas List~Animal~
    }

    Animal <|-- Perro : Es un
    Dueno "1" o-- "many" Animal : Posee

4. Diagramas de Estado (stateDiagram-v2)

Muestran los diferentes estados por los que pasa un objeto y las transiciones entre ellos.

  • [*]: Representa el estado inicial o final.
  • state "Nombre Largo" as id: Para crear estados con descripciones detalladas.

Ejemplo de Diagrama de Estado

"Un diagrama de estados es un tipo de diagrama utilizado en informática y campos relacionados para describir el comportamiento de los sistemas. Los diagramas de estados requieren que el sistema descrito esté compuesto por un número finito de estados; a veces, esto es cierto, mientras que en otras ocasiones se trata de una abstracción razonable." Wikipedia

Estados

Un estado puede declararse de varias maneras. La forma más sencilla es definir un estado con solo un identificador:

stateDiagram-v2
    stateId


stateDiagram-v2
    stateId

Otra forma es utilizando la palabra clave "estado" con una descripción como la siguiente:

stateDiagram-v2
    state "This is a state description" as s2

stateDiagram-v2
    state "This is a state description" as s2

Otra forma de definir un estado con una descripción es definir el ID del estado seguido de dos puntos y la descripción:

stateDiagram-v2
    s2 : This is a state description

stateDiagram-v2
    s2 : This is a state description

Transiciones

Las transiciones son rutas/bordes que indican el paso de un estado a otro. Esto se representa mediante una flecha de texto, "-->".

Cuando se define una transición entre dos estados y estos no están definidos previamente, los estados no definidos se definen con el ID de la transición. Posteriormente, se pueden añadir descripciones a los estados definidos de esta manera.

stateDiagram-v2
    s1 --> s2

stateDiagram-v2
    s1 --> s2

Es posible añadir texto a una transición para describir lo que representa:

stateDiagram-v2
    s1 --> s2: A transition

stateDiagram-v2
    s1 --> s2: A transition

Inicio y Fin

Existen dos estados especiales que indican el inicio y el final del diagrama. Estos se escriben con la sintaxis [*] y la dirección de la transición hacia ellos define si se trata de un estado de inicio o de un estado de finalización.

stateDiagram-v2
    [*] --> s1
    s1 --> [*]

stateDiagram-v2
    [*] --> s1
    s1 --> [*]

Fragmento de código

stateDiagram-v2
    [*] --> Reposo
    Reposo --> Reproduciendo : Presionar Play
    Reproduciendo --> Pausado : Presionar Pause
    Pausado --> Reproduciendo : Presionar Play
    Reproduciendo --> Reposo : Detener / Fin canción
    Reposo --> [*]

Ejemplo:

stateDiagram-v2
    [*] --> Reposo
    Reposo --> Reproduciendo : Presionar Play
    Reproduciendo --> Pausado : Presionar Pause
    Pausado --> Reproduciendo : Presionar Play
    Reproduciendo --> Reposo : Detener / Fin canción
    Reposo --> [*]

5. Diagramas de Gantt (gantt)

Perfectos para la gestión de proyectos y hojas de ruta (roadmaps).

  • title: Define el título del gráfico.
  • dateFormat: El formato de fecha que usarás (ej. YYYY-MM-DD).
  • section: Organiza las tareas en grupos.
  • Etiquetas de tareas: active, done, crit (crítico), after [id] (dependencia).

Ejemplo de Diagrama de Gantt

Fragmento de código

gantt
    title Plan de Lanzamiento de Software
    dateFormat  YYYY-MM-DD
    section Desarrollo
    Diseño de Arquitectura   :done,    des1, 2026-06-01, 2026-06-05
    Desarrollo del Backend   :active,  des2, after des1, 10d
    Desarrollo del Frontend  :         des3, after des1, 12d
    section Pruebas
    Pruebas QA               :         qa1, after des3, 5d
    Lanzamiento Beta         :crit,    beta, after qa1, 2d

Ejemplo:

gantt
    title Plan de Lanzamiento de Software
    dateFormat  YYYY-MM-DD
    section Desarrollo
    Diseño de Arquitectura   :done,    des1, 2026-06-01, 2026-06-05
    Desarrollo del Backend   :active,  des2, after des1, 10d
    Desarrollo del Frontend  :         des3, after des1, 12d
    section Pruebas
    Pruebas QA               :         qa1, after des3, 5d
    Lanzamiento Beta         :crit,    beta, after qa1, 2d

6. Diagramas de Relación de Entidades / ERD (erDiagram)

Se usan para modelar bases de datos relacionales (tablas, llaves y cardinalidades).

  • Cardinalidades:

    • || : Uno y solo uno
    • |o : Uno o cero
    • o{ : Cero o muchos
    • }{ : Muchos a muchos

Ejemplo de Diagrama ERD

Fragmento de código

erDiagram
    USUARIO {
        int id PK
        string nombre
        string email
    }
    PEDIDO {
        int id PK
        int usuario_id FK
        date fecha
        float total
    }

    USUARIO ||--o{ PEDIDO : "hace"

Ejemplo:

erDiagram
    USUARIO {
        int id PK
        string nombre
        string email
    }
    PEDIDO {
        int id PK
        int usuario_id FK
        date fecha
        float total
    }

    USUARIO ||--o{ PEDIDO : "hace"

Otro Fragmento de codigo:

erDiagram
    %% --- ENTIDADES Y ATRIBUTOS ---
    
    CLIENTE {
        int id_cliente PK
        string nombre
        string email
        string telefono
        string direccion
    }

    PEDIDO {
        int id_pedido PK
        int id_cliente FK
        date fecha_pedido
        string estado
        float total
    }

    PRODUCTO {
        int id_producto PK
        string nombre_prod
        string descripcion
        float precio
        int stock
    }

    DETALLE_PEDIDO {
        int id_detalle PK
        int id_pedido FK
        int id_producto FK
        int cantidad
        float precio_unitario
    }

    %% --- RELACIONES Y CARDINALIDADES ---
    
    %% Un cliente puede hacer cero o muchos pedidos. Un pedido pertenece a un solo cliente.
    CLIENTE ||--o{ PEDIDO : "realiza"

    %% Un pedido tiene uno o muchos detalles. Un detalle pertenece a un solo pedido.
    PEDIDO ||--|{ DETALLE_PEDIDO : "contiene"

    %% Un producto puede estar en cero o muchos detalles de pedido. Un detalle corresponde a un solo producto.
    PRODUCTO ||--o{ DETALLE_PEDIDO : "se incluye en"

Ejemplo:

erDiagram
    %% --- ENTIDADES Y ATRIBUTOS ---
    
    CLIENTE {
        int id_cliente PK
        string nombre
        string email
        string telefono
        string direccion
    }

    PEDIDO {
        int id_pedido PK
        int id_cliente FK
        date fecha_pedido
        string estado
        float total
    }

    PRODUCTO {
        int id_producto PK
        string nombre_prod
        string descripcion
        float precio
        int stock
    }

    DETALLE_PEDIDO {
        int id_detalle PK
        int id_pedido FK
        int id_producto FK
        int cantidad
        float precio_unitario
    }

    %% --- RELACIONES Y CARDINALIDADES ---
    
    %% Un cliente puede hacer cero o muchos pedidos. Un pedido pertenece a un solo cliente.
    CLIENTE ||--o{ PEDIDO : "realiza"

    %% Un pedido tiene uno o muchos detalles. Un detalle pertenece a un solo pedido.
    PEDIDO ||--|{ DETALLE_PEDIDO : "contiene"

    %% Un producto puede estar en cero o muchos detalles de pedido. Un detalle corresponde a un solo producto.
    PRODUCTO ||--o{ DETALLE_PEDIDO : "se incluye en"

7. Gráficos XY

Los gráficos XY (también conocidos como diagramas de dispersión o Scatter Plots en inglés) se introdujeron en las versiones recientes de Mermaid. Son herramientas excelentes cuando necesitas visualizar la relación o correlación entre dos variables numéricas directamente en tu documentación, sin salir de Obsidian. A continuación, un ejemplo completo basado en un escenario del mundo real: la relación entre las horas de estudio de un grupo de estudiantes y la calificación que obtuvieron en un examen. Codigo:

xychart-beta
    title "Relación: Horas de Estudio vs. Calificación Examen"
    %% Configuración del Eje X (Variable Independiente)
    x-axis "Horas de Estudio" [2, 4, 6, 8, 10, 12, 14, 16]
    
    %% Configuración del Eje Y (Variable Dependiente) 
    y-axis "Calificación (0 - 100)" 0 --> 100
    
    %% Renderizado de los datos (Gráfico XY)
    bar [45, 52, 65, 70, 82, 88, 95, 98]
    line [45, 52, 65, 70, 82, 88, 95, 98]

Ejemplo:

xychart-beta
    title "Relación: Horas de Estudio vs. Calificación Examen"
    %% Configuración del Eje X (Variable Independiente)
    x-axis "Horas de Estudio" [2, 4, 6, 8, 10, 12, 14, 16]
    
    %% Configuración del Eje Y (Variable Dependiente) 
    y-axis "Calificación (0 - 100)" 0 --> 100
    
    %% Renderizado de los datos (Gráfico XY)
    bar [45, 52, 65, 70, 82, 88, 95, 98]
    line [45, 52, 65, 70, 82, 88, 95, 98]