07. Manual de Uso de Mermaid
Apéndice Final: Guía de Referencia Rápida de Sintaxis Mermaid
Apéndice de Sintaxis Agrupada, usala como una hoja de trucos (cheatsheet) de rápida consulta.
1. Diagramas de Flujo (flowchart)
flowchart TD
%% 1. Formas de Nodos
A[Rectángulo estándar]
B(Esquinas redondeadas)
C([Forma de píldora])
D[[Subrutina]]
E[(Base de Datos)]
F((Círculo))
G>'Banderín']
H{Rombo de Decisión}
%% 2. Tipos de Conexiones
A --> B
A --- C
A -- "Texto" --> D
A -->|Texto alternativo| E
A -.- F
A -. "Texto" .-> G
A ==> H
A == "Texto" ==> B
%% 3. Enlaces Múltiples
A & B --> C & D
flowchart TD
%% 1. Formas de Nodos
A[Rectángulo estándar]
B(Esquinas redondeadas)
C([Forma de píldora])
D[[Subrutina]]
E[(Base de Datos)]
F((Círculo))
G>'Banderín']
H{Rombo de Decisión}
%% 2. Tipos de Conexiones
A --> B
A --- C
A -- "Texto" --> D
A -->|Texto alternativo| E
A -.- F
A -. "Texto" .-> G
A ==> H
A == "Texto" ==> B
%% 3. Enlaces Múltiples
A & B --> C & D
Subgrafos
flowchart LR
subgraph Grupo1 [Título de la Sección]
A --> B
end
subgraph Grupo2 [Otra Sección]
C --> D
end
Grupo1 --> Grupo2
flowchart LR
subgraph Grupo1 [Título de la Sección]
A --> B
end
subgraph Grupo2 [Otra Sección]
C --> D
end
Grupo1 --> Grupo2
2. Diagramas de Secuencia (sequenceDiagram)
sequenceDiagram
autonumber %% Numera las llamadas automáticamente
%% Declaración de Participantes y Actores
actor U as Usuario
participant A as Frontend
participant B as Backend (API)
%% Tipos de Mensajes
U ->> A: Petición sincrónica (Línea continua con flecha)
A -->> U: Respuesta sincrónica (Línea punteada con flecha)
A -x B: Llamada asincrónica (Con cruz)
A -) B: Llamada asincrónica (Flecha abierta)
%% Activación de barras de estado
A ->>+ B: Procesar (+)
Note over B: Trabajo interno...
B -->>- A: Finalizado (-)
%% Bloques de Control
alt Caso Éxito
B -->> U: 200 OK
else Caso Error
B -->> U: 500 Error
end
opt Paso Opcional
A ->> B: Log evento
end
loop Cada 5 segundos
A ->> B: Polling
end
par Tareas Paralelas
A ->> B: Tarea 1
and
A ->> B: Tarea 2
end
sequenceDiagram
autonumber %% Numera las llamadas automáticamente
%% Declaración de Participantes y Actores
actor U as Usuario
participant A as Frontend
participant B as Backend (API)
%% Tipos de Mensajes
U ->> A: Petición sincrónica (Línea continua con flecha)
A -->> U: Respuesta sincrónica (Línea punteada con flecha)
A -x B: Llamada asincrónica (Con cruz)
A -) B: Llamada asincrónica (Flecha abierta)
%% Activación de barras de estado
A ->>+ B: Procesar (+)
Note over B: Trabajo interno...
B -->>- A: Finalizado (-)
%% Bloques de Control
alt Caso Éxito
B -->> U: 200 OK
else Caso Error
B -->> U: 500 Error
end
opt Paso Opcional
A ->> B: Log evento
end
loop Cada 5 segundos
A ->> B: Polling
end
par Tareas Paralelas
A ->> B: Tarea 1
and
A ->> B: Tarea 2
end
3. Diagramas de Clases (classDiagram)
classDiagram
%% Definición de la clase Usuario
class Usuario {
+String nombre
-String password
#Boolean esAdmin
+autenticar(pass) Boolean
+metodoEstatico()$
+metodoAbstracto()*
}
%% Definición de interfaz con comillas dobles
class Autenticable {
<<"interface">>
+login()*
}
%% Relaciones entre clases
Padre <|-- Hijo
Cliente *-- Pedido
Empresa o-- Empleado
Servicio --> BD
Controlador ..> Modelo
Clase ..|> Autenticable
classDiagram
%% Definición de la clase Usuario
class Usuario {
+String nombre
-String password
#Boolean esAdmin
+autenticar(pass) Boolean
+metodoEstatico()$
+metodoAbstracto()*
}
%% Definición de interfaz con comillas dobles
class Autenticable {
<<"interface">>
+login()*
}
%% Relaciones entre clases
Padre <|-- Hijo
Cliente *-- Pedido
Empresa o-- Empleado
Servicio --> BD
Controlador ..> Modelo
Clase ..|> Autenticable
4. Diagramas Entidad-Relación (erDiagram)
erDiagram
%% Entidades y Atributos
USUARIO {
int id PK
string email
string password_hash
}
PEDIDO {
int id PK
int usuario_id FK
decimal total
}
%% Sintaxis de Cardinalidades:
%% ||--|| (1 a 1 exacto) ||--o| (1 a 0 o 1)
%% ||--|{ (1 a 1 o más) ||--o{ (1 a 0 o más)
%% }o--o{ (Muchos a Muchos)
USUARIO ||--o{ PEDIDO : "realiza"
erDiagram
%% Entidades y Atributos
USUARIO {
int id PK
string email
string password_hash
}
PEDIDO {
int id PK
int usuario_id FK
decimal total
}
%% Sintaxis de Cardinalidades:
%% ||--|| (1 a 1 exacto) ||--o| (1 a 0 o 1)
%% ||--|{ (1 a 1 o más) ||--o{ (1 a 0 o más)
%% }o--o{ (Muchos a Muchos)
USUARIO ||--o{ PEDIDO : "realiza"
5. Gitgraph (gitGraph) y Gantt (gantt)
Control de Versiones Git
gitGraph
commit id: "v1.0" tag: "v1.0"
branch feature
checkout feature
commit id: "Commit en feature" type: HIGHLIGHT
checkout main
merge feature id: "Merge a Main"
commit type: REVERSE id: "Fix / Revert"
gitGraph
commit id: "v1.0" tag: "v1.0"
branch feature
checkout feature
commit id: "Commit en feature" type: HIGHLIGHT
checkout main
merge feature id: "Merge a Main"
commit type: REVERSE id: "Fix / Revert"
Cronograma de Gantt
gantt
title Plan de Proyecto
dateFormat YYYY-MM-DD
axisFormat %b %d
section Fase 1
Análisis :done, t1, 2026-01-01, 5d
Aprobación :milestone, hito1, after t1, 0d
section Fase 2
Desarrollo Core :crit, active, t2, after hito1, 10d
Pruebas QA :active, t3, after t2, 5d
gantt
title Plan de Proyecto
dateFormat YYYY-MM-DD
axisFormat %b %d
section Fase 1
Análisis :done, t1, 2026-01-01, 5d
Aprobación :milestone, hito1, after t1, 0d
section Fase 2
Desarrollo Core :crit, active, t2, after hito1, 10d
Pruebas QA :active, t3, after t2, 5d
6. Personalización, Clases y Directiva %%{init}%%
Aplicación de Estilos CSS
flowchart LR
%% 1. Estilo individual directo
A[Nodo 1]
style A fill:#e74c3c,stroke:#c0392b,color:#fff,stroke-width:2px
%% 2. Definición de clase reutilizable
classDef exito fill:#2ecc71,color:#fff,font-weight:bold;
%% 3. Asignación de clase
B[Nodo 2]
class B exito;
C[Nodo 3]:::exito
flowchart LR
%% 1. Estilo individual directo
A[Nodo 1]
style A fill:#e74c3c,stroke:#c0392b,color:#fff,stroke-width:2px
%% 2. Definición de clase reutilizable
classDef exito fill:#2ecc71,color:#fff,font-weight:bold;
%% 3. Asignación de clase
B[Nodo 2]
class B exito;
C[Nodo 3]:::exito
Inyección de Configuración Global
%%{
init: {
'theme': 'dark',
'themeVariables': {
'fontFamily': 'Fira Code, monospace',
'primaryColor': '#1e293b',
'primaryTextColor': '#38bdf8',
'lineColor': '#f43f5e'
}
}
}%%
flowchart LR
A[Inicio] --> B[Fin]
%%{
init: {
'theme': 'dark',
'themeVariables': {
'fontFamily': 'Fira Code, monospace',
'primaryColor': '#1e293b',
'primaryTextColor': '#38bdf8',
'lineColor': '#f43f5e'
}
}
}%%
flowchart LR
A[Inicio] --> B[Fin]
