Mermaid Diagram Editor

Código Mermaid

Plantillas

Vista Previa

Guía de Sintaxis Mermaid

📊 Flowchart (Diagrama de Flujo)

graph TD
    A[Cuadrado] --> B(Redondeado)
    B --> C{Diamante}
    C -->|Sí| D[Resultado 1]
    C -->|No| E[Resultado 2]

graph TD - Flujo de arriba a abajo
graph LR - Flujo de izquierda a derecha
[ ] - Nodo rectangular
( ) - Nodo redondeado
{ } - Nodo de decisión (diamante)
--> - Flecha simple
-->|texto| - Flecha con etiqueta

🔄 Sequence (Diagrama de Secuencia)

sequenceDiagram
    Usuario->>Sistema: Solicitud
    Sistema->>BD: Consulta
    BD-->>Sistema: Datos
    Sistema-->>Usuario: Respuesta

participant - Definir participante
->> - Mensaje síncrono
-->> - Mensaje de respuesta
-x - Mensaje asíncrono
Note - Agregar nota
activate/deactivate - Control de activación

📦 Class (Diagrama de Clases)

classDiagram
    class Animal {
        +String nombre
        +int edad
        +comer()
    }
    Animal <|-- Perro

+ - Público
- - Privado
# - Protegido
<|-- - Herencia
*-- - Composición
o-- - Agregación

🔀 State (Diagrama de Estado)

stateDiagram-v2
    [*] --> Estado1
    Estado1 --> Estado2: transición
    Estado2 --> [*]

[*] - Estado inicial/final
--> - Transición
: texto - Etiqueta de transición
state - Definir estado compuesto
note - Agregar nota

🗃️ ER Diagram (Entidad-Relación)

erDiagram
    CLIENTE ||--o{PEDIDO} : realiza
    PEDIDO {
        int id
        string fecha
    }

||--|| - Uno a uno
||--o{} - Uno a muchos
}o--o{} - Muchos a muchos
{ } - Definir atributos

📅 Gantt (Diagrama de Gantt)

gantt
    title Proyecto
    dateFormat YYYY-MM-DD
    section Fase 1
    Tarea 1 :a1, 2024-01-01, 30d
    Tarea 2 :after a1, 20d

title - Título del diagrama
dateFormat - Formato de fecha
section - Agrupar tareas
:id, fecha, duración - Definir tarea
after id - Tarea dependiente

🥧 Pie Chart (Gráfico Circular)

pie title Ventas
    "Producto A" : 45
    "Producto B" : 25
    "Producto C" : 30

title - Título del gráfico
"nombre" : valor - Sección del gráfico
Los valores se convierten en porcentajes automáticamente

🚶 User Journey (Mapa de Usuario)

journey
    title Mi día
    section Mañana
      Desayuno: 5: Usuario
      Trabajo: 3: Usuario
    section Tarde
      Almuerzo: 4: Usuario

title - Título del journey
section - Fase del journey
tarea: score: actor - Definir acción
Score de 1-5 (satisfacción)

Sobre Mermaid Diagrams

Mermaid es una herramienta de diagramación basada en texto que permite crear diagramas y visualizaciones complejas usando una sintaxis simple. Perfecto para documentación técnica, presentaciones y diagramas de arquitectura.

Privacidad y Seguridad

Todo el procesamiento se realiza localmente en tu navegador. Tus diagramas nunca se envían a ningún servidor. Puedes trabajar offline sin problemas.

Tipos de Diagramas

Flowcharts (Diagramas de flujo)
Sequence Diagrams (Diagramas de secuencia)
Class Diagrams (Diagramas de clases)
State Diagrams (Diagramas de estado)
ER Diagrams (Entidad-Relación)
Gantt Charts (Diagramas de Gantt)
Pie Charts (Gráficos circulares)
User Journey Maps