Cómo crear un diagrama Mermaid y exportarlo en PNG, SVG o Excalidraw

Cómo crear un diagrama Mermaid en el navegador

Escribe el diagrama como texto en el campo "Código del diagrama (Mermaid)", sigue la "Vista previa en vivo" y haz clic en "Descargar PNG", "Descargar SVG" o "Convertir a Excalidraw (editable)". Todo corre en tu navegador, sin registro. La conversión a Excalidraw editable, con formas sueltas, sirve para diagramas de flujo, de secuencia, de clases, de entidad-relación y de estados; los demás tipos van al archivo Excalidraw como una imagen única.

1. Abre el editor de Mermaid: el campo "Código del diagrama (Mermaid)" ya trae un diagrama de flujo de ejemplo, que puedes borrar o editar.
2. Escribe el diagrama en texto: por ejemplo, "flowchart TD" en la primera línea y "A --> B" en la siguiente. La "Vista previa en vivo" se redibuja cada vez que haces una pausa al escribir; si la sintaxis está mal, en lugar del dibujo aparece el mensaje de error del propio Mermaid, en inglés, que indica la línea del problema (por ejemplo, "Parse error on line 2"). Los tres botones solo se activan cuando la vista previa está correcta.
3. Haz clic en "Descargar PNG" para una imagen en alta resolución con fondo blanco (archivo diagrama.png) o en "Descargar SVG" para el dibujo vectorial (diagrama.svg), que no pierde nitidez en ningún tamaño.
4. Si el diagrama es de flujo, de secuencia, de clases, de entidad-relación o de estados, haz clic en "Convertir a Excalidraw (editable)" y descarga el archivo diagrama.excalidraw.
5. Abre el archivo en excalidraw.com o en la app de Excalidraw para seguir editando a mano: mover cajas, cambiar colores, añadir anotaciones.

Qué es Mermaid y por qué escribir diagramas en texto

Mermaid es una forma de describir un diagrama con texto, en lugar de arrastrar formas con el mouse. Escribes "A --> B" y el dibujo aparece: A se convierte en una caja, B en otra y la flecha las une. La primera línea indica el tipo de diagrama ("flowchart", "sequenceDiagram", "classDiagram"...), y las siguientes describen los elementos. Como el diagrama es solo texto, puede guardarse junto al código del proyecto, revisarse en un pull request y ajustarse en segundos sin reubicar cada forma. La sintaxis completa está en la documentación oficial de Mermaid.

Qué tipos de diagrama se vuelven Excalidraw editable (y cuáles no)

La vista previa y las descargas en PNG y SVG funcionan con cualquier tipo que Mermaid dibuje. En cambio, la conversión a un archivo Excalidraw editable (donde cada caja, flecha y texto se vuelve una forma que puedes mover) solo existe para algunos tipos. Para los demás, el archivo .excalidraw lleva el diagrama como una imagen única: puedes moverla y cambiarle el tamaño, pero no editarla caja por caja. Si solo necesitas la figura, PNG o SVG cumplen igual.

• Se vuelven formas editables en Excalidraw: diagrama de flujo (flowchart), diagrama de secuencia (sequenceDiagram), diagrama de clases (classDiagram), diagrama de entidad-relación (erDiagram) y diagrama de estados (stateDiagram).
• No se vuelven formas sueltas: diagrama de Gantt (gantt), gráfico circular (pie), mapa mental (mindmap), gitGraph, recorrido del usuario (journey) y los demás tipos. Para estos, el archivo Excalidraw sale con una imagen única; si solo quieres la figura, haz clic en "Descargar PNG" o "Descargar SVG".

La pista dentro del editor menciona gantt, pie y mindmap como puntos de partida. Funcionan en la vista previa y en las descargas en PNG y SVG; en la conversión a Excalidraw, entran en el archivo como una imagen única, no como formas editables. El propio editor lo avisa en la nota debajo de los botones.

De Excalidraw a draw.io (y de vuelta)

Si tu equipo trabaja en draw.io (diagrams.net), hay un paso más: convierte el archivo .excalidraw que descargaste en un diagrama .drawio editable con la herramienta Excalidraw → draw.io, que también corre en el navegador. Las formas, las flechas y los textos se conservan, y los iconos de AWS reconocidos salen como formas nativas de draw.io. Qué se conserva en ese cambio, y los errores comunes, están en diagrama de arquitectura AWS: convertir draw.io y Excalidraw.

El sentido contrario también existe: un diagrama .drawio o .xml de draw.io se convierte en una escena .excalidraw editable, con los iconos de AWS incrustados. Es útil cuando alguien te manda un dibujo de arquitectura en draw.io y prefieres retocarlo en Excalidraw.

PNG o SVG: cuál descargar

• PNG: imagen común, con fondo blanco, generada en alta resolución (hasta 4 veces el tamaño de la vista previa, con tope de 2.400 píxeles en el lado mayor). Sirve para pegar en un documento de Word, un ticket, un correo o una presentación.
• SVG: dibujo vectorial, que se mantiene nítido en cualquier tamaño y pesa poco. Es la mejor opción para sitios web, documentación e impresión en gran formato.
• Excalidraw: no es una imagen, es el diagrama en sí, abierto para edición. Elígelo cuando quieras seguir dibujando a mano alzada.

Errores comunes al escribir Mermaid

• Olvidar la primera línea con el tipo de diagrama: sin "flowchart TD" (de arriba abajo) o "flowchart LR" (de izquierda a derecha), Mermaid no sabe qué dibujar.
• Usar paréntesis, comillas o dos puntos dentro de una etiqueta sin protegerlos: escribe el texto entre comillas dentro de los corchetes, como A["Enviar (por correo)"].
• Confundir el tipo de flecha: "-->" es flecha llena, "---" es línea sin punta y "-.->" es flecha discontinua. Un guion de menos y la línea desaparece.
• Escribir todo de una vez y solo después mirar la vista previa: como se actualiza en cada pausa, conviene revisar línea por línea; el mensaje de error suele apuntar a la línea que acabas de escribir.

Todo ocurre en tu navegador: el diagrama se dibuja en tu propio dispositivo y ningún texto o archivo se envía a servidor alguno. Puedes usarlo con diagramas de sistemas internos sin preocupación.