Un lienzo visual de verdad
Arrastra formas al lienzo, conéctalas y renómbralas ahí mismo. Tu disposición se guarda con el diagrama y se usa en cada exportación.
Compatible con la sintaxis de Mermaid
El editor de Mermaid online que puedes arrastrar o escribir.
TryMermaid es un creador visual de diagramas que escribe el código por ti. Esboza un diagrama de flujo en el lienzo, ajústalo en código y exporta un PNG o SVG nítido.
Gratis · No necesitas cuenta para empezar
Visual cuando ayuda, código cuando es más rápido
Un mismo diagrama, dos formas de editarlo y nada que se pierda al cambiar de una a otra.
Código cuando lo necesites
Cada cambio en el lienzo escribe código Mermaid, y cada cambio en el código actualiza el lienzo. Usa el que te resulte más rápido.
Exporta a donde sea
Descarga un PNG con el ancho o el alto exactos que necesites, obtén un SVG o copia la imagen directamente al portapapeles.
Guarda y comparte
Guarda los diagramas en tu cuenta o comparte un enlace que abra exactamente lo que ves, con la disposición incluida.
Herramientas gratuitas para Mermaid
Herramientas de un solo uso para todo lo que rodea a un diagrama. Funcionan en tu navegador y sin registro. Por ahora están en inglés.
- Mermaid to PNG Paste Mermaid code, see it render, and download a PNG at whatever size you need.
- Mermaid to PDF Paste Mermaid code and download a PDF.
- Mermaid validator Paste Mermaid code and find out at once whether it is valid.
- Mermaid to draw.io Paste Mermaid code and download a .drawio file.
- SQL to ER diagram Paste SQL CREATE TABLE statements and get a Mermaid entity relationship diagram with every table, column, primary key, foreign key and relationship.
Que la IA haga el borrador
Describe un diagrama con tus palabras y recibe código Mermaid ya validado. O conecta Claude, Cursor o VS Code mediante el servidor MCP y deja que tu asistente dibuje y guarde los diagramas.
De la idea a la imagen en tres pasos
- 01
Empieza
Elige una plantilla o suelta tu primera forma.
- 02
Dale forma
Conecta pasos, muévelos y ajusta el código.
- 03
Compártelo
Exporta una imagen o envía un enlace a tu equipo.
¿Qué diagramas de Mermaid puedes crear?
Todos los tipos de diagrama de Mermaid funcionan en el editor de código con vista previa en directo. Los diagramas de flujo además se editan en el lienzo visual. Todos se exportan a PNG y SVG.
| Tipo de diagrama | Lienzo visual | Código con vista previa | Exportar PNG y SVG |
|---|---|---|---|
| Flowchart | Sí | Sí | Sí |
| Sequence diagram | No | Sí | Sí |
| Class diagram | No | Sí | Sí |
| ER diagram | No | Sí | Sí |
| State diagram | No | Sí | Sí |
| Mind map | No | Sí | Sí |
| Gantt chart | No | Sí | Sí |
| Timeline | No | Sí | Sí |
| Pie chart | No | Sí | Sí |
| Git graph | No | Sí | Sí |
| User journey | No | Sí | Sí |
| Quadrant chart | No | Sí | Sí |
| Sankey diagram | No | Sí | Sí |
| XY chart | No | Sí | Sí |
| Block diagram | No | Sí | Sí |
| Packet diagram | No | Sí | Sí |
| Requirement diagram | No | Sí | Sí |
| C4 diagram | No | Sí | Sí |
Preguntas frecuentes
¿Qué es TryMermaid?
TryMermaid es un editor en línea para Mermaid, el lenguaje de diagramas basado en texto. Puedes arrastrar formas en un lienzo visual o escribir código Mermaid, y ambos se mantienen sincronizados. Los diagramas terminados se exportan como PNG o SVG, y también puedes compartir un enlace o incrustarlos en una página web.
¿TryMermaid es gratis?
Sí. El plan gratuito incluye el editor completo, exportación a PNG y SVG, enlaces para compartir y hasta 50 diagramas guardados. El plan Pro añade diagramas guardados ilimitados, el generador de diagramas con IA y conectores MCP para que los agentes de IA trabajen con tus diagramas.
¿Mermaid es gratis?
Sí. Mermaid es una biblioteca de JavaScript de código abierto con licencia MIT, y el editor oficial Mermaid Live Editor es gratuito. Solo los productos alojados tienen planes de pago: mermaid.ai, del equipo de Mermaid, vende planes Plus y Premium con facturación anual, y TryMermaid Pro se factura mensualmente. Nunca necesitas pagar para escribir o mostrar Mermaid.
¿Necesito una cuenta para crear un diagrama?
No. Abre el editor y empieza a dibujar de inmediato; tu trabajo se guarda en tu navegador. Crea una cuenta gratuita solo si quieres guardar diagramas y volver a abrirlos en otro dispositivo.
¿Qué tipos de diagrama de Mermaid puedo editar visualmente?
Los diagramas de flujo y los diagramas de clases se editan en el lienzo de arrastrar y soltar, y cada cambio se escribe de vuelta en código Mermaid. Los de secuencia, ER, estados, mapas mentales, Gantt, líneas de tiempo y los demás tipos se editan en código con vista previa en directo.
¿Cómo exporto un diagrama de Mermaid como PNG o SVG?
Abre el menú de exportación en el editor y elige PNG o SVG. Para PNG puedes fijar un ancho o un alto exactos, y también copiar la imagen directamente al portapapeles. Cuando el lienzo está abierto, la exportación usa la disposición que hayas colocado a mano.
¿En qué se diferencia TryMermaid de Mermaid Live Editor?
Mermaid Live Editor es el editor en línea del propio proyecto Mermaid. TryMermaid es un editor independiente construido sobre su código abierto (licencia MIT). Añade un lienzo de arrastrar y soltar sincronizado con el código, cuentas para guardar diagramas y enlaces para compartir que conservan tu disposición.
¿Puedo compartir o incrustar mis diagramas?
Sí. Copia un enlace que abra una copia exacta de tu diagrama, con la disposición incluida, o genera un fragmento para incrustar y mostrar un diagrama en vivo en tu web, documentación o blog.
¿La IA puede generar diagramas de Mermaid por mí?
Sí, de dos formas. El generador de Mermaid con IA convierte una descripción en código Mermaid y lo valida con el analizador antes de mostrártelo. El servidor MCP permite que Claude, Cursor y VS Code creen, validen y guarden diagramas en tu cuenta. Ambos forman parte de Pro.
¿Dónde se guardan mis diagramas?
Hasta que lo guardes, el diagrama vive solo en el almacenamiento local de tu navegador y en la URL de la página. Los diagramas que guardas en tu cuenta se almacenan en los servidores de TryMermaid para que puedas abrirlos desde cualquier dispositivo. La política de privacidad explica los detalles.
Del blog
Guías y comparativas sobre diagramas con Mermaid, contrastadas con fuentes primarias.
Mermaid MCP Servers Compared
The official mermaid.ai connector, claude-mermaid, mcp-mermaid, mcp-mermaid-validator and TryMermaid, compared on what they do, where they run, where your diagrams go and what they cost.
Leer el artículo →Mermaid 12: What Changed and How to Keep Your Old Layout
ELK is now the default layout, the default look changed, defaultRenderer is gone and use case diagrams arrived. What changed in 12.0, 12.1 and 12.2, and how to keep your diagrams looking the same.
Leer el artículo →Mermaid Flowchart Direction: TD, TB, LR, RL and BT Explained
TD, TB, LR, RL and BT explained with live examples, when each one reads best, how to give a subgraph its own direction, and the rule that makes Mermaid ignore it.
Leer el artículo →Mermaid vs PlantUML vs Graphviz
Three text-to-diagram tools, three different jobs. What each one draws, what it needs installed, where it renders, and how to pick without rewriting your diagrams later.
Leer el artículo →