📊 Vista Previa Mermaid
Escribe sintaxis Mermaid y renderiza SVG en vivo. Soporta flowchart, sequence, class, state, gantt, pie, mindmap, gitGraph y journey. Copia, descarga SVG o PNG, cambia tema.
🔒 Mermaid se carga desde CDN y renderiza en el navegador. La fuente nunca se envia.
📝 Entrada Mermaid
👁 Vista previa
📖 Dónde se suele tropezar
Escribe sintaxis Mermaid y el diagrama se dibuja al instante, con temas conmutables y exportación a SVG o PNG. El renderizado lo hace en el navegador Mermaid cargado desde una CDN, y la fuente nunca se sube. Sólo se comprueba la sintaxis; nada mira si el diagrama es correcto: una flecha suelta o un flujo sin sentido se dibujan en silencio mientras se analice bien. Hay una distancia entre que se dibuje y que comunique.
| Caso | Qué ocurre | Qué hacer |
|---|---|---|
| Los paréntesis o signos en una etiqueta dan error de sintaxis | Escribe A[paso (1)] y el analizador lee el ) como el final de una forma de nodo y ahí se rompe. Lo mismo ocurre con #, :, ;, { y ". Lo incómodo es cómo falla: Mermaid rara vez te dice qué línea o columna tiene la culpa, así que o desaparece el diagrama entero o recibes un mensaje que apunta a otro sitio. Y acabas buscando un carácter entre cincuenta líneas. |
Envuelve las etiquetas en comillas dobles: A["paso (1)"] trata el contenido como cadena y paréntesis y signos salen intactos. Para incluir unas " reales en la etiqueta, usa la entidad propia de Mermaid #quot;, y <br/> para un salto de línea. Para diagnosticar, sospecha de la línea que acabas de añadir: si un diagrama que funcionaba se rompió tras una línea nueva, casi seguro es esa. Al construir algo grande, vuelve a renderizar cada cinco líneas: escribir cincuenta y descubrir entonces que está roto es donde se va la tarde. |
| Al exportar a PNG cambia la fuente o falta texto | La exportación a PNG funciona pintando sobre un lienzo el SVG ya renderizado. Por el camino, las fuentes web a las que apunta el SVG no se resuelven en el lienzo y caen a una fuente del sistema, y por eso una tabla que tenías alineada en monoespaciada sale desigual. Peor: cuando Mermaid dibuja etiquetas como HTML dentro de un foreignObject, algunos navegadores producen etiquetas en blanco al llegar al lienzo: la pantalla se ve bien y sólo el PNG exportado se queda sin texto. |
Usa el SVG siempre que puedas. Los README de GitHub, Zenn, Notion y la mayoría de gestores de contenido aceptan SVG directamente, y el SVG escala sin pérdida y sigue siendo texto seleccionable. Cuando el PNG sea imprescindible —pegar en Slack, una imagen de tarjeta social—, orienta la fuente del diagrama hacia algo que exista con seguridad, como sans-serif o system-ui. Abre siempre el archivo exportado y míralo: hasta que lo hagas, una etiqueta en blanco es indistinguible de una exportación correcta. |
| El diagrama se estira a lo ancho y no se puede leer | Un flowchart TD (de arriba abajo) se ensancha conforme se multiplican las ramas, y LR (de izquierda a derecha) se alarga conforme se acumulan los pasos. En ambos casos el motor de composición coloca todo automáticamente y tú no controlas el ancho. Pegado en un README de GitHub, se escala al contenedor, así que pasados unos quince nodos las etiquetas dejan de leerse. En móvil es aún peor —muchos contextos no permiten desplazamiento horizontal— y en la práctica no se transmite nada. |
Deja de meterlo todo en un solo diagrama. La razón principal de que un diagrama sea ilegible no es el motor de composición sino el intento de explicar el sistema entero en una sola imagen. Dibuja la panorámica con unos siete nodos y separa cada parte en su propio diagrama y ambos pasan a leerse. Agrupar con subgraph crea bloques visuales y contiene el ancho. Elige la dirección según el propósito: LR se lee bien para secuencias de pasos y TD para ramas de decisión. Comprueba siempre al ancho real del sitio donde lo vas a pegar: la vista previa de aquí es ancha, así que legible aquí no significa legible en un README. |
La sintaxis de Mermaid cambia entre versiones. Entre las ramas 8.x y 11.x, graph quedó sustituido por flowchart, y también cambiaron el formato de fecha de gantt y la notación de classDiagram. Esta página usa Mermaid 11.x, pero GitHub, GitLab, Notion y los distintos gestores de contenido usan cada uno su versión, y algunos no publican cuál: así que renderizar bien aquí nunca garantiza renderizar en el destino. Cuando eches mano de sintaxis nueva, como los mapas mentales o las formas recientes, confirma cómo se ve donde lo vayas a pegar. Además: Mermaid usa por defecto securityLevel: strict, que desactiva el HTML en etiquetas y los eventos de clic. Existen ajustes para relajarlo, pero no lo relajes nunca en un servicio que renderice Mermaid enviado por usuarios: las etiquetas son una puerta de entrada para XSS.
📖 Cómo usar
-
1
Escribe sintaxisEscribe en el editor izquierdo. Usa botones de ejemplo.
-
2
Elige temadefault / dark / forest / neutral.
-
3
ExportarCopia SVG o descarga SVG / PNG.
❓ Preguntas frecuentes
Que tipos se admiten?
Como funciona la descarga PNG?
Se envia la fuente Mermaid?
🔗 Herramientas relacionadas
🐛 ¿Encontró un problema con esta herramienta?
Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.
¡Gracias por tu reporte!
Tu reporte llegó al operador y se usará para mejorar.