Editor de Diagramas Mermaid

Editor de Diagramas Mermaid: Crea Diagramas como Código

Mermaid es un lenguaje de creación de diagramas que convierte definiciones de texto en diagramas SVG. Escribe un diagrama de flujo, diagrama de secuencia o diagrama ER como texto plano y ve el resultado renderizado en tiempo real. Este editor analiza tu sintaxis Mermaid del lado del cliente usando la biblioteca oficial Mermaid.js y la muestra como una vista previa SVG desplazable y ampliable.

Qué es Mermaid?

Mermaid es una herramienta de creación de diagramas y gráficos basada en JavaScript que utiliza definiciones basadas en texto para crear diagramas. En lugar de dibujar diagramas manualmente en una herramienta de interfaz gráfica, escribes una descripción de texto simple y Mermaid la renderiza como una imagen SVG. Fue creado por Knut Sveidqvist y ahora es mantenido por la comunidad de código abierto. Mermaid se usa ampliamente en documentación (GitHub, GitLab, Notion), archivos README y documentación técnica. Soporta diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de entidad-relación, diagramas de Gantt y muchos otros tipos de diagramas. La sintaxis es intencionalmente simple para que las partes interesadas no técnicas puedan leer y entender las definiciones de diagramas sin capacitación especial.

Como Usarlo

1. Escribe sintaxis Mermaid en el editor (con números de línea y coincidencia de paréntesis) o haz clic en un boton de plantilla para cargar un punto de partida
2. La vista previa se actualiza mientras escribes con una breve demora
3. Arrastra el separador entre el editor y la vista previa para redimensionar los paneles
4. Haz clic y arrastra en la vista previa para desplazarte, desplazate para ampliar
5. Selecciona un tema de diagrama del menu desplegable (Default, Dark, Forest, Neutral)
6. Exporta con los botones de descarga SVG/PNG o usa Copiar PNG para pegar en otras aplicaciones
7. Haz clic en Compartir para crear un enlace que codifica tu diagrama y tema en el hash

Tipos de Diagramas Soportados

Diagramas de Flujo

El diagrama Mermaid más comun. Define la dirección con TD (arriba a abajo), LR (izquierda a derecha), RL o BT. Los nodos usan paréntesis para las formas: [rectangulo], (redondeado), {rombo}, ([estadio]). Conecta nodos con flechas: -->, -.->, ==>.

Diagramas de Secuencia

Modela interacciones entre participantes a lo largo del tiempo. Las flechas muestran mensajes sincronos (->>) y asincronos (-->>). Agrega bloques activate/deactivate, condiciones alt/else y secciones loop para representar flujos complejos.

Diagramas de Entidad Relación

Define esquemas de base de datos con entidades y relaciones. Usa la notación estándar de cardinalidad: ||--o{ (uno a muchos), }|--|{ (muchos a muchos). Agrega atributos con tipos directamente dentro de los bloques de entidad.

Diagramas de Clases

Diagramas de clases UML con herencia (<|--), composición (*--) y agregación (o--). Define métodos y atributos con modificadores de visibilidad (+ público, - privado, # protegido).

Diagramas de Estado

Modela maquinas de estado con transiciones. Usa [*] para estados inicial y final. Agrega condiciones, estados anidados y notas para documentar flujos de trabajo complejos.

Diagramas Gantt, Graficos Circulares, Mapas Mentales, Graficos Git

Mermaid también soporta cronogramas de proyectos (Gantt), distribución de datos (circular), lluvia de ideas jerarquica (mindmap) y visualización de ramas (gitGraph). Haz clic en los botones de plantilla sobre el editor para ver ejemplos funcionales.

Consejos

La sintaxis Mermaid es sensible a los espacios en blanco en algunos contextos. La indentación importa dentro de subgraph y estructuras anidadas. Si un diagrama no se renderiza, verifica si faltan paréntesis de cierre, comillas sin coincidir o palabras clave reservadas usadas como ID de nodo.

Trabajas en documentación? Previsualiza tu Markdown completo con Previsualización Markdown. Necesitas limpiar fragmentos de código dentro de tus diagramas? Usa el Formateador de Código.