Mermaid Editor

Editor mermaid en vivo, visual y código en un mismo lugar

La mayoría de los editores mermaid te dan un cuadro de texto y una vista previa. Este también te da un lienzo: haz clic para añadir un bloque, arrastra una flecha, agrupa elementos en áreas — y el código mermaid se escribe solo. Cambia a la pestaña de código y edítalo a mano; el lienzo lo sigue.

  • Se renderiza mientras escribes

    El motor mermaid real, redibujado unos cientos de milisegundos después de tu última pulsación.

  • Código y lienzo sincronizados

    Edita cualquiera de los dos lados. El otro se actualiza — sin copiar y pegar entre dos herramientas.

  • 14 formas de nodo

    Rectángulo, redondeado, píldora, círculo, rombo, base de datos, hexágono y el resto, con un clic cada uno.

  • Gratis y sin registro

    Sin prueba ni marca de agua: el editor se abre al instante. Inicia sesión solo si quieres más de un diagrama.

Un lienzo, no solo un cuadro de texto

La pestaña visual es un editor real sobre el diagrama renderizado: haz clic en un nodo para seleccionarlo, doble clic para renombrarlo en el sitio, arrastra en cualquier lugar para desplazarte.

  • Haz clic para construirAñade un bloque, apunta una flecha hacia otro, etiqueta la flecha. Sin sintaxis que memorizar antes de empezar.

  • Elige una formaCatorce formas de flowchart mermaid — rombos de decisión, cilindros de base de datos, subrutinas — desde un solo selector.

  • Colorea lo que quierasOcho preajustes más un selector de color, aplicados a un solo nodo o a un área completa.

Código mermaid que sigue siendo tuyo

La pestaña de texto es mermaid puro — la misma sintaxis que GitHub, GitLab, Notion y Obsidian ya renderizan. Nada aquí es un formato propietario.

  • Escríbelo a manoEscribe mermaid directamente y observa cómo se renderiza. Seis ejemplos listos para empezar.

  • Va y vuelveLos flowcharts que pegas se analizan de vuelta en el lienzo — nodos, formas, colores, subgrafos y todo lo demás.

  • Todos los tipos de diagramaFlowchart, secuencia, clase, estado, ER, gantt, git graph, pie — la vista previa renderiza todo lo que mermaid admite.

Los diagramas grandes se mantienen legibles

Los diagramas de arquitectura superan una pantalla rápido. El desplazamiento, el zoom y la agrupación están hechos para eso en lugar de luchar contra ello.

  • Áreas y anidamientoAgrupa bloques en subgrafos, anida un área dentro de otra, mueve todo un subárbol con un solo gesto.

  • Zoom del 2% al 1600%Desplázate para mover la vista, ctrl+scroll para hacer zoom, o recentra con un botón.

  • Guardado sobre la marchaTu diagrama se guarda solo en el navegador mientras editas. Si inicias sesión, se guarda en tu cuenta y te acompaña en cualquier dispositivo.

Exporta y sigue adelante

Nada queda atrapado. Toma la imagen, toma el código fuente, o toma un bloque Markdown listo para pegar en un documento.

  • Sin muro de pagoTodas las funciones, incluida la exportación, son gratis. No hay plan de pago al que actualizar.

  • Se renderiza en tu navegadorEl renderizado ocurre en tu navegador; sin cuenta el diagrama no sale de él, y con cuenta el documento guardado te acompaña en cualquier dispositivo.

  • SVG, PNG, .mmd, .mdCopia el código SVG, descarga un PNG a 2x, guarda el código fuente mermaid, o toma un bloque Markdown con delimitadores.

Cómo se compara con las opciones habituales

Las herramientas de diagrama-como-código te hacen escribir todo a mano. Las herramientas de arrastrar y soltar te dan una imagen que no puedes comparar con diff. Esta se niega a elegir un bando.

Empezar

IQ Mermaid: Haz doble clic en el lienzo y aparece un nodo. Puedes aprender la sintaxis después, o nunca.

Herramienta típica: Lee primero la referencia de sintaxis, o acepta una herramienta de dibujo sin representación en texto.

El formato de salida

IQ Mermaid: Mermaid puro — el mismo texto que GitHub, GitLab y Notion renderizan de forma nativa.

Herramienta típica: Un archivo propietario que solo se abre en la herramienta que lo creó.

Editar después

IQ Mermaid: Cambia el código o mueve los bloques. Ambas direcciones funcionan sobre el mismo diagrama.

Herramienta típica: Solo una dirección: las herramientas basadas en código no tienen lienzo, las basadas en lienzo no tienen código fuente.

Precio

IQ Mermaid: Gratis — ni siquiera hace falta un correo.

Herramienta típica: Plan gratuito limitado a unos pocos diagramas, con la exportación o la colaboración detrás de una suscripción.

Dónde viven los datos

IQ Mermaid: En tu navegador, o en tu cuenta si quieres que te acompañe en cualquier dispositivo.

Herramienta típica: Una cuenta en el servidor de alguien, con tus diagramas atados a ella.

Preguntas sobre el editor mermaid

Para empezar solo hace falta abrir la página.

¿Qué es mermaid?

Mermaid es una sintaxis de texto para diagramas: describes nodos y flechas en unas pocas líneas, y un renderizador dibuja la imagen. GitHub, GitLab, Notion y Obsidian lo renderizan dentro de Markdown, así que un bloque mermaid se mantiene legible en un pull request o una página de wiki.

¿Este editor mermaid es realmente gratis?

Sí. Todas las funciones, incluida la exportación a SVG y PNG, son gratis, y puedes usar el editor sin crear nada. Una cuenta gratuita opcional añade más diagramas guardados y sincronización entre dispositivos: no hay plan de pago y nada queda reservado.

¿Necesito saber la sintaxis de mermaid?

No. Empieza en la pestaña visual: haz doble clic en el lienzo para añadir un bloque, selecciónalo y dibuja una flecha hacia otro. El código mermaid se genera por ti y puedes leerlo cuando quieras aprender la sintaxis.

¿Qué tipos de diagrama son compatibles?

La pestaña de código renderiza todo lo que mermaid admite — flowchart, secuencia, clase, estado, relación de entidades, gantt, git graph, pie y más. El lienzo visual edita flowcharts específicamente, que es lo que son la mayoría de los diagramas.

¿Puedo exportar a PNG o SVG?

Sí. Copia el código SVG al portapapeles, descarga el archivo SVG, o descarga un PNG renderizado a 2x para presentaciones y documentos. También puedes guardar el código fuente mermaid como .mmd o como un bloque Markdown con delimitadores.

¿Dónde se guarda mi diagrama?

Sin cuenta, tu único diagrama se guarda en el navegador, así que sigue ahí cuando vuelves en el mismo dispositivo. Si inicias sesión, se guarda en tu cuenta y puede acompañarte a otro dispositivo. Exporta la fuente si quieres una copia propia.

¿Puedo pegar un diagrama mermaid existente?

Sí. Pégalo en la pestaña de código; un flowchart se analiza de vuelta en el lienzo visual con sus nodos, formas, colores y subgrafos intactos. Otros tipos de diagrama se renderizan en la vista previa pero permanecen solo en código.

¿Funciona sin conexión?

El renderizado ocurre por completo en tu navegador: una vez cargada la página, el editor sigue funcionando sin conexión.

Abre el editor. Gratis — sin registro.

Un lienzo en blanco, una pestaña de código y todas las opciones de exportación — gratis, en tu navegador, ahora mismo.