Mermaid real y listo para usar para cada tipo de diagrama común. Cada uno se renderiza en vivo abajo: abre cualquiera en el editor para ajustarlo, o copia el código directamente en tu documentación. No se sube nada.
Cajas para los pasos, rombos para las decisiones, flechas etiquetadas para las ramas: el diagrama de procesos de toda la vida.
flowchart TD
Start([User visits app]) --> A{Logged in?}
A -->|Yes| Home[Show dashboard]
A -->|No| Login[Show login form]
Login --> B{Credentials valid?}
B -->|No| Err[Show error] --> Login
B -->|Yes| Token[Issue session token] --> HomeQuién llama a qué y en qué orden. Las flechas sólidas son solicitudes, las flechas discontinuas son respuestas: ideal para flujos de API y de autenticación.
sequenceDiagram
participant C as Client
participant API
participant DB as Database
C->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order_id
API-->>C: 201 CreatedModela una base de datos con cardinalidad de pata de gallo. Se lee «un usuario escribe muchas publicaciones» directamente sobre la página.
erDiagram
USER ||--o{ POST : writes
POST ||--o{ COMMENT : has
USER ||--o{ COMMENT : makes
POST }o--o{ TAG : "tagged with"Clases, campos, métodos y relaciones. «<|--» es herencia; los marcadores de visibilidad (+/-) muestran la interfaz.
classDiagram
class Animal {
+String name
+move()
}
class Dog {
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- CatLos estados que algo puede ocupar y los eventos que lo mueven entre ellos: ciclos de vida de pedidos, flujos de aprobación, protocolos.
stateDiagram-v2
[*] --> Draft
Draft --> Submitted: submit
Submitted --> UnderReview: assigned
UnderReview --> Approved: approve
UnderReview --> Rejected: reject
Rejected --> Draft: revise
Approved --> [*]Una línea de tiempo con fechas a partir de unas pocas líneas de texto. Indica que una tarea empieza «after» otra y el diagrama las encadena por ti.
gantt
title Sprint 24
dateFormat YYYY-MM-DD
section Dev
Feature A :a, 2026-02-02, 5d
Feature B :b, after a, 4d
section QA
Test pass :after b, 3dPura sangría: la línea menos sangrada es el centro y cada nivel más profundo es una rama. Haz lluvia de ideas en texto plano.
mindmap
root((Blog ideas))
Tutorials
Mermaid tips
Git workflows
Opinion
Tooling rants
Lists
Best CLIsCada ejemplo aquí es texto Mermaid plano: la misma sintaxis que GitHub, GitLab y Obsidian renderizan de forma nativa. Abre uno en el editor, renombra los nodos con los tuyos y exporta un SVG o PNG.
Véase también: Editor de Mermaid · Incrustar en GitHub · Mermaid vs PlantUML
Sí. Copia, edita y reutiliza cualquier ejemplo libremente: no hay registro, ni cuenta, ni atribución requerida. Los diagramas se renderizan en tu navegador, así que no se sube nada.
Haz clic en «Abrir en el editor» en cualquier ejemplo. Carga el código Mermaid exacto en el editor en vivo, donde puedes modificarlo, verlo renderizar al instante y exportar un SVG o PNG.
Sí. Copia el código y pégalo en un bloque de código ```mermaid en un README, issue o pull request: GitHub y GitLab renderizan Mermaid de forma nativa, sin necesidad de imágenes.
Diagrama de flujo, secuencia, entidad-relación (base de datos), clases UML, estados, Gantt y mapa mental. Todos son tipos de diagrama estándar de Mermaid, y cada uno enlaza a un generador dedicado con más ejemplos y una chuleta de sintaxis.
Sí: abre cualquier ejemplo en el editor y luego usa los botones de exportación a SVG o PNG. El SVG se mantiene nítido a cualquier tamaño; el PNG resulta práctico para diapositivas y documentos.