Editor Mermaid en vivo con vista previa instantánea
El editor Mermaid en vivo te permite escribir diagramas como texto plano usando la sintaxis de Mermaid.js y verlos renderizarse en cuanto escribes. Un diseño de paneles divididos coloca tu código de un lado y una vista previa en vivo del otro, así pasas de la idea al diagrama terminado sin salir de la página.
Está pensado para desarrolladores, redactores técnicos y cualquiera que prefiera describir un diagrama con código antes que arrastrar cajas a mano. Elige entre nueve tipos de diagrama —de flujo, secuencia, clases, estados, ER, Gantt, circulares, mapas mentales y grafos de Git— y exporta el resultado como un SVG o PNG nítido.
Cómo usar el editor Mermaid
Elige un punto de partida
El editor abre con un diagrama de flujo de ejemplo. Sigue editándolo o abre el menú de Plantillas y elige uno de los nueve diagramas listos para empezar.
Escribe tu código
Escribe la sintaxis de Mermaid en el panel izquierdo. Los números de línea siguen tu estructura, y Tab / Shift+Tab añaden o quitan una sangría de cuatro espacios mientras avanzas.
Mira la vista previa en vivo
La vista previa se vuelve a renderizar automáticamente un instante después de que dejas de escribir. Si la sintaxis falla, aparece un mensaje de error claro bajo el editor para que lo corrijas.
Exporta o copia
Descarga el diagrama como SVG o PNG, o copia el código SVG directamente al portapapeles para pegarlo en otro documento o herramienta.
Funciones
Vista previa en vivo
Tu diagrama se vuelve a renderizar automáticamente mientras escribes, con respuesta visual instantánea gracias a Mermaid.js.
9 tipos de diagrama
Crea diagramas de flujo, secuencia, clases, estados, ER, Gantt, circulares, mapas mentales y grafos de Git a partir de texto.
Plantillas integradas
Empieza rápido con un ejemplo funcional para cada tipo de diagrama y ajusta luego la sintaxis a tu gusto.
Editor de código con números de línea
Los números de línea junto con la sangría de Tab y Shift+Tab mantienen el código del diagrama ordenado y legible.
Aviso de errores en tiempo real
Los problemas de sintaxis se muestran con claridad bajo el editor para que sepas exactamente qué corregir.
Exportar a SVG y PNG
Guarda un SVG escalable para la web y documentos, o un PNG de alta resolución renderizado a escala 2x.
Copiar SVG al portapapeles
Copia el código SVG renderizado con un clic para pegarlo directamente en otra app o base de código.
Zoom del 25% al 300%
Acerca la vista previa con los botones +/− o con Ctrl + rueda del ratón, y vuelve al 100% cuando quieras.
Panel dividido ajustable
Arrastra el divisor para reequilibrar el editor y la vista previa, con diseño apilado en pantallas pequeñas.
Guardado automático
Tu código se guarda en el navegador automáticamente y se restaura justo donde lo dejaste.
Modo oscuro
Cambia de tema y el tema del diagrama Mermaid lo sigue, así los diagramas siempre combinan con la página.
Totalmente local
Todo el renderizado ocurre en tu navegador: sin subidas, sin cuentas y sin rastreo de tu código.
Preguntas frecuentes
¿Qué es un diagrama Mermaid?
Mermaid es una biblioteca de JavaScript de código abierto que convierte definiciones en texto en diagramas. En lugar de dibujar formas a mano, escribes una descripción breve y parecida a markdown de la estructura y Mermaid la renderiza como un diagrama visual terminado.
¿Cómo escribo la sintaxis de Mermaid?
La forma más rápida de aprender es abrir el menú de Plantillas y cargar un ejemplo funcional del tipo de diagrama que quieras. Observa cómo se escriben los nodos, las flechas y las etiquetas, luego edita el código y mira cómo se actualiza la vista previa en vivo. Cada tipo de diagrama —de flujo, secuencia, clases, etc.— tiene su propia palabra clave sencilla para la primera línea.
¿Qué tipos de diagrama admite este editor?
Nueve tipos en total: diagramas de flujo, de secuencia, de clases, de estados, ER (entidad-relación), diagramas de Gantt, gráficos circulares, mapas mentales y grafos de Git. Cada uno tiene una plantilla integrada para empezar.
¿Cómo exporto un diagrama Mermaid a PNG o SVG?
Usa los botones de la barra de herramientas. SVG descarga un archivo vectorial escalable que se mantiene nítido a cualquier tamaño, ideal para documentos y la web. PNG descarga una imagen de mapa de bits renderizada a escala 2x para verse nítida en pantallas de alta densidad. También puedes Copiar SVG para pegar el código en otro lugar.
¿Se guarda mi código si cierro la pestaña?
Sí. Tu código se guarda automáticamente en el almacenamiento local de tu navegador y se restaura cuando vuelves. Ten en cuenta que borrar los datos del navegador también eliminará el código guardado, ya que vive solo en tu dispositivo.
¿Por qué mi diagrama muestra un error de sintaxis?
Cada tipo de diagrama Mermaid tiene sus propias reglas de sintaxis. Los fallos más comunes son una flecha que falta (-->), una palabra clave de apertura equivocada o corchetes sin pareja. Lee el mensaje de error que aparece bajo el editor: señala la línea o el token que necesita atención.
¿Puedo usar el editor en el móvil?
Sí. En pantallas estrechas el diseño se apila en vertical, con el editor arriba y la vista previa abajo, y puedes arrastrar el divisor para ajustar sus alturas. Todas las funciones siguen disponibles.
Aún no hay comentarios. ¡Sé el primero en comentar!