Editor Mermaid
Crea diagramas de flujo, secuencia, Gantt y más a partir de texto con el editor Mermaid. Renderiza, haz zoom y exporta SVG o PNG en tu navegador.
¿Qué es Mermaid?
Mermaid es un lenguaje de diagramación de código abierto que permite crear diagramas desde texto plano, similar a Markdown. Describes nodos y conexiones con una sintaxis simple y el renderizador dibuja el diagrama automáticamente.
¿Qué tipos de diagramas están soportados?
El editor incluye ejemplos de diagramas de flujo, secuencia, clases, estados, ER, Gantt, circulares, mapas mentales y líneas de tiempo. Mermaid 11 admite muchos más tipos que puedes escribir manualmente.
¿Cómo creo un diagrama?
Elige un ejemplo del desplegable o escribe tu código en el editor de la izquierda. La vista previa se vuelve a renderizar unos 350 ms después de dejar de escribir; si la sintaxis es inválida, un panel rojo muestra el error exacto.
¿Se envía mi código a algún sitio?
No. Todo se renderiza localmente en tu navegador con JavaScript. Tu código nunca sale de tu dispositivo.
¿Cómo exporto el diagrama?
Usa Descargar SVG para un vector escalable o Descargar PNG para una imagen al doble de resolución, con fondo transparente opcional. Copiar código pasa el fuente de Mermaid al portapapeles.
¿Por qué a veces falla la exportación PNG?
Algunas funciones de Mermaid se renderizan con foreignObject, que el navegador puede negarse a rasterizar. En ese caso el PNG muestra un error, pero la descarga SVG siempre funciona porque no necesita rasterizado.
¿Cómo funciona el zoom?
La vista previa admite de 0,5x a 2x. Los botones +/- avanzan del 10%, Ajustar dimensiona el diagrama al área de vista y 100% restaura el tamaño original.
¿Puedo usar Mermaid en mi documentación?
Sí. GitHub, GitLab y muchas herramientas de documentación renderizan bloques Mermaid de forma nativa: envuelve tu código en un bloque de código cercado mermaid y se dibuja automáticamente.
¿El editor soporta el modo oscuro?
Sí. El diagrama sigue el tema de la plataforma: al cambiar a modo oscuro se vuelve a renderizar automáticamente con el tema dark de Mermaid.
¿Algún consejo para diagramas legibles?
Usa etiquetas cortas, elige una dirección adecuada (TD vertical u LR horizontal), divide los grafos muy grandes en subgrafos y usa los ejemplos integrados como plantilla.
Cómo usar Editor Mermaid
Mermaid convierte texto plano en diagramas de flujo, secuencia, Gantt y más. Este editor en vivo vuelve a renderizar tu código mientras escribes, por completo en el navegador: nada sale de tu dispositivo.
- Elige un punto de partida en el desplegable «Ejemplo»: hay nueve diagramas listos (flujo, secuencia, clases, estados, ER, Gantt, circular, mapa mental y línea de tiempo) y al seleccionar uno su código se carga en el editor.
- Edita el código en el panel izquierdo; la vista previa de la derecha se renderiza de nuevo en cuanto dejas de escribir. Si aparece un error de sintaxis en el panel rojo, el último diagrama válido sigue visible mientras corriges.
- Amplía o reduce entre el 50 % y el 200 % con los botones de más y menos, pulsa «Ajustar» para escalar el diagrama a la caja de vista previa o «100%» para volver al tamaño real.
- Marca «Fondo transparente» si quieres el PNG sin fondo blanco y pulsa «Descargar SVG» o «Descargar PNG»; el PNG se exporta a doble resolución para que se vea nítido al incrustarlo.
- Pulsa «Copiar código» para llevar el código fuente Mermaid al portapapeles y pegarlo en documentación, wikis o repositorios.
Cuando un diagrama no renderiza, comenta las líneas que cambiaste últimamente para aislar el fallo: el mensaje de error indica la línea problemática y la vista previa conserva la última versión válida hasta que la sintaxis vuelva a ser correcta.
Herramientas relacionadas
- Código a Imagen Convierte fragmentos de código en imágenes compartibles con resaltado de sintaxis, temas personalizados y decoraciones de ventana. 100% privacidad, todo en tu navegador.
- Vista Previa Markdown Editor Markdown en línea gratuito con vista previa en vivo. Escriba, renderice y exporte Markdown con soporte GFM completo.
- Visor y Editor SVG Previsualice, edite y optimice archivos SVG en línea. Vista previa en tiempo real, edición de código y herramientas de optimización.
- Visor de árbol JSON Visualice datos JSON como un árbol colapsable interactivo. Busque claves y valores, rastree JSONPath al pasar el cursor y maneje archivos grandes con carga diferida. Soporta arrastrar y soltar archivos .json.
- Verificador de Hash Calcule y verifique hashes MD5, SHA-1, SHA-256, SHA-512 localmente
- Calculadora Chmod Calculadora chmod online gratuita para visualizar y calcular permisos de archivos Linux con casillas. Convierte instantáneamente entre notación numérica (755, 644) y simbólica (rwxr-xr-x). Soporta permisos especiales como setuid, setgid, sticky bit.
- Tabla ASCII Referencia completa de codificación de caracteres ASCII con códigos decimales, hexadecimales, octales, binarios, entidades HTML y descripciones. Búsqueda y filtro instantáneos.
- Visor Hexadecimal Vea el contenido de archivos en formato hexadecimal con búsqueda, navegación por desplazamiento y desplazamiento virtual