Convertidor de Mermaid a Drawio

Pega código Mermaid, conviértelo en formas y conectores nativos de Draw.io, ajusta el resultado en el editor diagrams.net integrado y descarga un archivo .drawio, PNG o SVG. Sin cuenta y sin créditos.

Empieza con un ejemplo

Código Mermaid215 caracteres

La conversión de Mermaid a Drawio se realiza en el editor diagrams.net de tu navegador. El código no se envía a la API de conversión de ImageToDrawio.

Resultado editable en Draw.io

Tu diagrama aparecerá aquí

Elige un ejemplo o pega tu propio código y conviértelo para ver formas editables.

¿Solo tienes una captura del diagrama? Convierte una imagen a Draw.io

Del código del diagrama a un diagrama que puedes ordenar

Mermaid es ideal para mantener diagramas junto al código y la documentación, pero su resultado renderizado es difícil de reorganizar a mano. Convertir de Mermaid a Drawio conserva la estructura que escribiste y te da formas, etiquetas y conectores independientes y editables en Draw.io.

Formas nativas, no una imagen

Cada nodo se convierte en su propia forma de Draw.io y cada enlace en un conector. Puedes mover una caja, renombrar un paso o cambiar un color sin reescribir el código.

Tipos de diagrama Mermaid habituales

Incluye ejemplos de diagramas de flujo, secuencia, clases, entidad relación, estados y mapas mentales. También reconoce otros tipos de Mermaid.

Archivos para el siguiente paso

Sigue trabajando en Draw.io con un archivo .drawio, publica un PNG o usa un SVG nítido en la documentación. Todas las descargas salen del mismo lienzo editado.

Tres pasos

Cómo convertir Mermaid a Draw.io

Todo el proceso tarda alrededor de un minuto y ocurre en esta página.

Pega el código Mermaid

Pega un diagrama en el cuadro de código o empieza con un ejemplo. El bloque de Markdown es opcional y el contador muestra el límite.

Convierte y ajusta

Pulsa el botón de convertir. El resultado de Mermaid a Drawio se abre en el editor integrado, donde puedes mover formas, editar texto y cambiar estilos antes de guardar.

Descarga o copia

Guarda un archivo .drawio para seguir editando, exporta PNG o SVG para publicar, o copia el XML de Draw.io para pegarlo en otro diagrama.

Guía de conversión

Cómo obtener un diagrama de Draw.io limpio desde Mermaid

Un buen código, expectativas razonables sobre el diseño y el formato adecuado influyen en el resultado.

Por qué los equipos llevan diagramas Mermaid a Draw.io

Mermaid funciona bien mientras el diagrama vive junto al código que describe. Los problemas llegan cuando el diagrama debe aparecer en una presentación, una revisión de diseño o un documento editado por personas que no programan. Pasar de Mermaid a Drawio les da un diagrama que pueden cambiar con el ratón.

Draw.io también ofrece controles difíciles de expresar con texto: posiciones exactas, colores por forma, iconos de bibliotecas y varias páginas. Tras una conversión, Mermaid sigue siendo el borrador rápido y Draw.io la versión pulida para presentar.

Qué se conserva y qué se recalcula

Las etiquetas y formas de los nodos, como rectángulos, pasos redondeados y decisiones, las etiquetas de los enlaces y la dirección de cada conexión pasan a Draw.io. Los subgrafos se convierten en áreas agrupadas y los atributos de clases o entidades siguen dentro de sus cajas.

El motor de Draw.io recalcula el diseño, así que el espaciado puede diferir de la imagen que dibuja Mermaid. Toma el primer resultado de Mermaid a Drawio como un punto de partida bien estructurado. Unos pocos arrastres suelen dar un diagrama más ordenado.

Prepara código que se convierta sin problemas

Empieza el texto declarando el tipo de diagrama, como flowchart TD, sequenceDiagram o erDiagram. Usa identificadores cortos y etiquetas legibles, y pon entre comillas las etiquetas con signos de puntuación. El código que se ve bien en Mermaid Live Editor es la mejor señal de una conversión correcta.

Los diagramas muy grandes se editan mejor si se dividen en varios más pequeños. La página acepta hasta 50.000 caracteres, pero un diagrama con cientos de nodos queda saturado en cualquier lienzo. Convierte cada sección y combina las páginas en Draw.io.

Elige el formato de descarga adecuado

Después de convertir de Mermaid a Drawio, descarga el archivo .drawio si el diagrama va a cambiar. Se abre en diagrams.net, en la app de escritorio de Draw.io y en sus integraciones para Confluence, Jira, Google Drive y VS Code, con todas las formas editables.

Usa PNG para chats, tickets y correos, donde basta una imagen simple. Elige SVG para sitios de documentación e impresión, porque escala sin perder nitidez. El botón Copiar XML lleva el diagrama al portapapeles para pegarlo en otro archivo de Draw.io desde Extras, Editar diagrama.

Un puente práctico entre Mermaid y Draw.io

Esta herramienta de Mermaid a Drawio se centra en los pasos que se suelen dar justo después de renderizar el código.

Conversión hecha por el propio editor de Draw.io

El editor diagrams.net integrado interpreta el texto Mermaid y crea cada elemento. Es el mismo motor que abrirá tu diagrama después, así que estilos y conectores se comportan como siempre.

Edita antes de exportar

Ajusta espacios, alinea un carril o acorta una etiqueta directamente en el lienzo. Cada descarga refleja el diagrama editado y no el diseño original.

Pega desde un README

Se acepta texto copiado con el bloque de código de Markdown. El bloque se elimina antes de convertir, así que el código de una wiki o un pull request funciona sin limpieza.

Errores claros para código no compatible

Si el analizador no puede leer el texto, la página muestra el motivo, por ejemplo un tipo de diagrama desconocido. Corrige la línea y vuelve a convertir sin adivinar.

Descargas en Draw.io, PNG y SVG

Cada resultado de Mermaid a Drawio se puede guardar como archivo .drawio editable, como PNG 2x con fondo blanco o como SVG nítido a cualquier tamaño.

Sin cuenta y sin créditos

Esta página no crea un registro de conversión ni usa créditos. El código se queda en tu navegador y no se guarda en tu cuenta de ImageToDrawio.

Preguntas frecuentes

Preguntas sobre Mermaid a Draw.io

Respuestas sobre el código compatible, el diseño, la privacidad y los archivos de salida.

¿Qué tipos de diagrama Mermaid se admiten?

Diagramas de flujo, secuencia, clases, entidad relación, estados, mapas mentales, Gantt y gráficos circulares se convierten en formas nativas. Otros tipos también pueden funcionar. Si no se reconoce el tipo, verás un error en lugar de un lienzo vacío.

¿El resultado de Mermaid a Drawio es editable?

Sí. Los nodos se convierten en formas separadas y los enlaces en conectores, así que puedes seleccionarlos, moverlos, cambiar su estilo y su texto. Es un diagrama real de Draw.io, no una imagen plana.

¿Por qué el diseño se ve distinto al de Mermaid?

Draw.io calcula su propio diseño para los elementos convertidos. La estructura y las etiquetas coinciden con tu código, pero los espacios y las rutas pueden variar. Arrastra formas o usa el menú Organizar.

¿Puedo hacerlo dentro de Draw.io?

Draw.io puede insertar Mermaid desde el menú Insertar, en Avanzado. Esta página sirve cuando quieres una conversión rápida de Mermaid a Drawio sin abrir un archivo, con descargas PNG y SVG listas.

¿Se sube mi código a algún sitio?

La conversión se ejecuta en el editor diagrams.net integrado en esta página. Tu código no se envía a la API de conversión de ImageToDrawio ni se guarda en ninguna cuenta.

¿Puedo convertir un diagrama Mermaid en imagen?

Sí. Después de convertir, elige PNG para una imagen rasterizada o SVG para una vectorial. Ambas se crean desde el lienzo actual, así que incluyen tus cambios.

¿Hay un límite de tamaño?

El cuadro de código acepta hasta 50.000 caracteres. Los diagramas grandes pueden ser lentos de editar, así que dividir un sistema complejo en varios diagramas suele funcionar mejor.

¿Y si solo tengo una imagen del diagrama?

Usa el convertidor de imagen a Draw.io. Lee una captura o una foto con IA y reconstruye las formas y el texto como un diagrama editable de Draw.io.

Convierte tu código Mermaid en un diagrama editable

Pega el código, revisa las formas convertidas, haz los ajustes que el texto no puede expresar y descarga el formato que necesites.