Los 7 mejores editores de diagramas Mermaid en 2026

En resumen: Mermaid Live Editor es el editor oficial y gratuito, y mermaid.ai es su versión de pago con IA y funciones para equipos. Si quieres un lienzo gratuito de arrastrar y soltar que mantenga tu diagrama como código Mermaid, con 50 diagramas guardados, usa TryMermaid (el nuestro). Para el precio más bajo con IA, mermaideditor.io. Para diagramas de uso general gratis, draw.io. Mermaid Viewer añade coedición en tiempo real, y Lucidchart y Eraser encajan en equipos que ya usan esas suites.

Mermaid es una sintaxis de texto para crear diagramas. Escribes flowchart TD y unas cuantas flechas, y obtienes un diagrama de flujo. Como el diagrama es texto, vive en el control de versiones y cambia en un pull request como cualquier otro archivo.

El inconveniente es que tienes que escribir la sintaxis. Las siete herramientas de esta lista lo resuelven de formas distintas: algunas añaden IA para que la escriba por ti, otras añaden un lienzo para que arrastres formas y otras integran Mermaid en una suite de diagramas más amplia.

Las siete, de un vistazo

1. Mermaid Live Editor y mermaid.ai: la pareja oficial

Lo mejor es verlas como una sola familia de productos del equipo que creó Mermaid.js. El Mermaid Live Editor gratuito es donde escribes Mermaid; mermaid.ai es donde están las funciones de pago, y el Live Editor enlaza allí para usarlas.

Mermaid Live Editor es de código abierto con licencia MIT y no necesita cuenta. Ofrece un panel de código con vista previa en directo, exportación a PNG y SVG, enlaces para compartir y, desde agosto de 2026, diagramas incrustables. No tiene lienzo de arrastrar y soltar ni disposición manual: para colocar los elementos, editas el código. Tampoco guarda nada en una cuenta, porque no hay cuentas.

mermaid.ai es el producto antes llamado Mermaid Chart; el antiguo dominio mermaidchart.com ahora redirige allí. Añade generación con IA a partir de una descripción o un documento, y un editor visual de arrastrar y soltar que escribe los cambios de vuelta en código Mermaid. También ofrece colaboración en tiempo real e integraciones con Claude, VS Code, Cursor, GitHub Copilot y Confluence.

Precios de mermaid.ai según su página de precios el 18 de septiembre de 2026:

• Basic, gratis: 3 diagramas, tamaño de diagrama limitado, IA limitada.
• Plus, 10 USD por usuario al mes, con pago anual: diagramas ilimitados, sin límite de tamaño y 300 créditos de IA al año.
• Premium, 20 USD por usuario al mes, con pago anual: 2000 créditos de IA al año, asientos de solo lectura gratis e ilimitados, y equipos y proyectos ilimitados.
• Enterprise, a medida: añade SSO y un responsable de cuenta dedicado.

Ideal para: el Live Editor, si conoces Mermaid y quieres la herramienta gratuita de referencia; mermaid.ai, si tu equipo quiere borradores con IA y colaboración en directo y está dispuesto a pagar por ello.

2. TryMermaid: el plan gratuito más generoso de la lista

Este es nuestro producto. TryMermaid está construido sobre el Mermaid Live Editor de código abierto (MIT) y es independiente del proyecto Mermaid.

Lo que añade es un lienzo de arrastrar y soltar para diagramas de flujo que se mantiene sincronizado con el código. Sueltas una forma y el Mermaid se escribe solo; editas el código y las formas se mueven. Las posiciones que colocas a mano se conservan. A diferencia de draw.io y Eraser, el lienzo escribe Mermaid estándar, así que el diagrama sigue abriéndose en cualquier sitio que admita Mermaid. El editor visual de mermaid.ai también lo hace, pero su página de producto no dice qué plan lo incluye; el lienzo de TryMermaid está en el plan gratuito. Los demás tipos de diagrama se escriben en código con vista previa en directo, y hay guías (en inglés) para 18 de ellos.

Entre las herramientas que guardan en una cuenta, su plan gratuito es el más amplio: 50 diagramas guardados, el lienzo completo y exportaciones sin marca de agua. mermaid.ai, Eraser y Mermaid Viewer se quedan en 3. Cuando llegas a 50, puedes borrar un diagrama antiguo o pasarte a Pro.

Pro cuesta 9 USD al mes, con pago mensual, e incluye diagramas ilimitados y conectores MCP que permiten a agentes de IA como Claude crear y editar diagramas en tu cuenta. Es el plan más barato que encontramos para diagramas ilimitados guardados en una cuenta: mermaid.ai Plus cuesta 10 USD por usuario al mes con pago anual, y Mermaid Viewer Pro, 119,99 USD al año.

Lo que conviene saber, con franqueza: TryMermaid no tiene generación con IA integrada ni colaboración en tiempo real. Si quieres escribir una frase y obtener un diagrama, o coeditar en directo con tu equipo, mermaid.ai, mermaideditor.io o Mermaid Viewer te servirán mejor. También tenemos una comparación más detallada con Mermaid Live Editor (en inglés).

3. mermaideditor.io: la forma más barata de tener IA

mermaideditor.io, de StarMorph, es un editor de código basado en Monaco con resaltado de sintaxis, autocompletado y más de 21 tipos de diagrama. Su plan Pro añade una IA que escribe Mermaid a partir de una descripción en lenguaje natural y corrige errores de sintaxis. Exporta a PNG, SVG y PDF, y comparte diagramas mediante enlaces.

Es la opción de pago más barata de la lista: 7 USD al mes, o 19 USD en un único pago de por vida. Pro incluye 200 generaciones con IA al mes y sincroniza hasta 50 diagramas en la nube. En el plan gratuito, su página de precios indica exportaciones a 1× con marca de agua y sin IA, aunque su página de inicio dice que las exportaciones SVG gratuitas no llevan marca de agua.

Ideal para: quien quiere ayuda de IA para escribir Mermaid al menor precio, sobre todo con la opción de pago único de por vida.

Lo que conviene saber: no hay lienzo de arrastrar y soltar; todo se edita como código.

4. draw.io: gratis y no solo para Mermaid

draw.io es una herramienta de diagramas de uso general, gratuita para siempre y de código abierto con licencia Apache 2.0, sin registro. Su compatibilidad con Mermaid convierte el Mermaid que pegas en formas nativas de draw.io, que después puedes cambiar de estilo, redimensionar y mover. El código Mermaid se guarda con el diagrama, así que puedes volver a abrirlo y regenerarlo.

Ideal para: quien quiere usar Mermaid como punto de partida rápido para un diagrama que luego terminará a mano, sin coste.

Lo que conviene saber: el resultado es un diagrama de draw.io, no Mermaid. Tus cambios visuales se quedan en el archivo de draw.io y no vuelven al código Mermaid, así que es un camino de ida si el diagrama tiene que seguir en tu repositorio como Mermaid.

5. Mermaid Viewer: IA y coedición en tiempo real

Mermaid Viewer es un editor de código con vista previa en directo, generación con IA y colaboración en tiempo real mediante enlaces de edición compartidos. Exporta a SVG, PNG, PDF y Markdown, y se puede alojar en tu propio servidor con Docker.

El plan gratuito incluye 3 diagramas, 5 conversaciones con la IA al día y exportaciones PNG de baja resolución con marca de agua. Starter cuesta 69,99 USD al año por 30 diagramas y Pro, 119,99 USD al año por diagramas ilimitados y todos los formatos de exportación.

Ideal para: equipos pequeños que quieren coeditar Mermaid en directo sin pagar precios por usuario.

Lo que conviene saber: no hay lienzo de arrastrar y soltar.

6. Lucidchart: Mermaid dentro de una suite consolidada

Lucidchart te permite introducir Mermaid directamente en su editor; para cambiar el diagrama, editas el código Mermaid dentro de Lucidchart y pulsas «Update». Tiene más sentido si tu organización ya trabaja con Lucid.

Lo que no pudimos verificar: Lucidchart tiene un plan gratuito, pero su página de precios no publica cifras que pudiéramos leer, y no pudimos confirmar si Mermaid está incluido en el plan gratuito. Compruébalo antes de decidirte.

Ideal para: equipos que ya pagan Lucid y quieren tener Mermaid en el mismo sitio.

7. Eraser: IA y edición visual, con su propia sintaxis

Eraser toma una descripción o un Mermaid pegado y lo dibuja; después puedes editarlo con instrucciones a la IA, con código o arrastrando elementos. Generar un diagrama no requiere registro; editar, guardar y exportar requieren una cuenta gratuita.

El plan gratuito incluye 3 archivos y 3 diagramas con IA. Starter cuesta 15 USD por miembro al mes con pago anual (20 USD con pago mensual), y Business, 45 USD por miembro al mes con pago anual (60 USD con pago mensual).

Lo que conviene saber: Eraser convierte Mermaid a su propia sintaxis. Sus preguntas frecuentes sugieren usar un modelo de IA para volver a convertirlo a Mermaid, lo que indica que los cambios hechos en Eraser no vuelven a salir como Mermaid por sí solos.

Ideal para: equipos que quieren IA y un editor visual y no necesitan conservar Mermaid.

Cómo elegir

La misma decisión en forma de diagrama de flujo, escrito en Mermaid:

• Gratis, oficial, y ya conoces la sintaxis → Mermaid Live Editor
• Borradores con IA y colaboración en equipo, con presupuesto → mermaid.ai
• Arrastrar formas gratis y mantener el diagrama en Mermaid → TryMermaid
• IA al menor precio → mermaideditor.io
• Un diagrama general y gratuito que parte de Mermaid → draw.io
• Coedición en tiempo real con poco presupuesto → Mermaid Viewer
• Ya usas Lucid o Eraser → quédate donde estás

Hay una comprobación que merece la pena antes de decidirte: ¿el diagrama tiene que seguir siendo Mermaid? Si vive en un repositorio o en un sitio de documentación, elige una herramienta que guarde Mermaid estándar. draw.io y Eraser son excelentes herramientas de diagramas, pero convierten Mermaid a sus propios formatos.

Preguntas frecuentes