Editor Mermaid
Esperando entrada
¿Qué es el Editor de Diagramas Mermaid?
Mermaid es una herramienta de dibujo de diagramas basada en JavaScript que utiliza una sintaxis de texto similar a Markdown para generar diversos diagramas. Sin necesidad de arrastrar formas manualmente, basta con escribir descripciones de texto simples para generar automáticamente diagramas de flujo, diagramas de secuencia, diagrama de clases y más. Esta herramienta proporciona un entorno de edición Mermaid en línea con previsualización en tiempo real, arrastrar y hacer zoom, y funciones de exportación, ayudando a los desarrolladores a crear y compartir diagramas rápidamente. En datos o bases de código productivas, el resultado debe revisarse después con parser, pruebas o reglas del proyecto.
Cómo usar
Cómo usar
- Escribe la sintaxis de Mermaid en el editor de la izquierda
- El panel de la derecha muestra el diagrama en tiempo real
- Usa el ratón para arrastrar y la rueda de scroll para hacer zoom
- Pulsa los botones de exportación para guardar como PNG o SVG
Verificaciones de diagramas
- Renderiza tras cada cambio importante; los errores en Mermaid suelen deberse a la indentación, signos sin escapar o sintaxis no compatible con el tipo de diagrama elegido.
- Antes de exportar, asegúrate de que las etiquetas, flechas y saltos de línea se vean legibles al tamaño final del diagrama.
Casos de uso
Principio técnico
Mermaid es una biblioteca de código abierto para renderizado de diagramas iniciada por Knut Sveidqvist en 2014. Su idea central es tomar un DSL legible por humanos (lenguaje específico de dominio) y, mediante un parser, convertirlo en un gráfico SVG. El pipeline completo tiene tres pasos: un léxico/parser (generado por jison) analiza el código fuente en una estructura de datos interna; un algoritmo de disposición específico del tipo de diagrama calcula las coordenadas de nodos y aristas; finalmente, d3 renderiza la disposición como elementos SVG. Los distintos diagramas usan diferentes motores de disposición: flowchart usa por defecto dagre (disposición en capas de grafos dirigidos) y desde v10 también soporta ELK (más potente pero más pesado); sequenceDiagram usa una disposición temporal personalizada que coloca participantes horizontalmente y apila mensajes verticalmente; gantt distribuye tareas manualmente en un eje temporal con dependencias; classDiagram y stateDiagram también se apoyan en dagre. El algoritmo de disposición es lo que determina la legibilidad: dagre sigue el marco Sugiyama para asignar niveles, minimizar cruces de aristas y ajustar espaciado, lo que funciona bien para diagramas de flujo de tamaño general. Comparado con Graphviz, la sintaxis de Mermaid está más cerca del lenguaje natural (por ejemplo, A --> B) y renderiza nativamente en el navegador con vista previa en vivo. El lenguaje DOT de Graphviz es de más bajo nivel y sus motores de disposición (fdp, neato, ...) están más maduros, pero necesita instalación local y su estilo por defecto parece anticuado. Mermaid actualmente soporta más de 15 tipos de diagramas: flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, etc., cubriendo la gran mayoría de necesidades de dibujo en ingeniería de software.
- Parsing: un parser generado por jison convierte el texto DSL en un AST interno; cada tipo de diagrama tiene su propio archivo de gramática.
- Algoritmo de disposición: flowchart usa dagre para disposición en capas de grafos dirigidos y puede cambiar a ELK; los diagramas de secuencia y Gantt usan su propia lógica de disposición dedicada.
- Motor de renderizado: el SVG se dibuja con d3; los nodos usan elementos g/rect/path/text y las flechas se definen mediante marcadores.
- Tipos de diagrama: soporta flowchart, sequence, class, state, ER, gantt, pie, journey, gitGraph, mindmap y una docena más.
- Comparación con Graphviz: Mermaid tiene sintaxis más amigable y soporte web nativo; Graphviz tiene disposición más fina, adecuada para grafos grandes y complejos.
- Temas: cambia entre los temas integrados default, dark, forest, neutral y otros mediante la configuración de themeVariables o la directiva init.
Ejemplos
Diagrama de flujo
flowchart TD
A[Inicio] --> B{¿Sesión iniciada?}
B -- Sí --> C[Página principal]
B -- No --> D[Página de inicio de sesión]
D --> E[Introducir credenciales]
E --> C
C --> F[Fin]Diagrama de secuencia
sequenceDiagram
participant Browser
participant Server
participant Database
Browser->>Server: GET /api/user
Server->>Database: SELECT * FROM users
Database-->>Server: Datos del usuario
Server-->>Browser: Respuesta JSONDiagrama de Gantt
gantt
title Plan del proyecto
dateFormat YYYY-MM-DD
section Diseño
Requisitos :a1, 2026-06-01, 7d
Diseño UI :a2, after a1, 10d
section Desarrollo
Frontend :b1, after a2, 20d
Backend :b2, after a2, 18d
section Pruebas
Integración :c1, after b1, 7dPreguntas frecuentes
¿Qué tipos de diagramas admite Mermaid?
Mermaid abarca diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de estado, diagramas entidad-relación, diagramas de Gantt, gráficos circulares, mapas de viaje del usuario, gráficos de Git, mapas mentales y gráficos de cuadrante. La primera línea de tu código declara el tipo (por ejemplo, 'flowchart TD' o 'sequenceDiagram').
¿Por qué mi diagrama muestra un error de sintaxis?
Las causas más habituales son la falta de punto y coma o de operadores de flecha, los corchetes desemparejados en las etiquetas de nodo (usa comillas para texto con caracteres especiales: A["Hello (world)"]), una sintaxis de flecha equivocada para el tipo de diagrama (--> para flowchart, ->> para sequence) y problemas de indentación en los subgrafos. El panel de error suele indicar la línea donde se detuvo el análisis.
¿Cómo exporto el diagrama como imagen?
Usa los botones de exportación para guardar como SVG (vectorial, escalable, recomendado para diapositivas y documentación) o PNG (rasterizado, listo para chats y correos). Copia el marcado SVG si quieres incrustarlo directamente en HTML o seguir editándolo en Figma o Illustrator.
¿Puedo personalizar colores y estilos?
Sí. Usa 'classDef' para definir un estilo similar a CSS y aplícalo con 'class A,B,C myStyle'. Las anulaciones en línea como 'style A fill:#f9f,stroke:#333' funcionan para cambios puntuales. Para temas globales, pon %%{init: {'theme':'forest'}}%% en la primera línea: los temas integrados son default, forest, dark, neutral y base.
¿Hay límites de longitud o complejidad?
Mermaid renderiza sin problema hasta cientos de nodos, pero el tiempo de diseño crece de forma no lineal a partir de ahí. Si un diagrama va lento o resulta ilegible, divídelo en varios diagramas enlazados o usa subgrafos para agrupar nodos relacionados; el diseño automático elige peores posiciones cuando se cruzan demasiadas aristas.
¿Cómo añado hiperenlaces o controladores de clic a los nodos?
Usa 'click NodeId "https://example.com"' para convertir un nodo en enlace, o 'click NodeId callback "tooltip"' para disparar una función JavaScript registrada con mermaid.parseError. Los enlaces funcionan en el SVG exportado mientras la página que lo incrusta no los elimine.
¿Dónde más puedo renderizar el mismo código Mermaid?
GitHub Markdown, GitLab, Notion, Obsidian, Typora, VS Code (con extensiones) y la mayoría de las herramientas de documentación modernas renderizan los bloques de código Mermaid de forma nativa. Pega el mismo código allí y se renderizará con el tema elegido por cada plataforma.