Código del diagrama de flujo
Usa la sintaxis de diagramas de flujo de Mermaid. Empieza con graph o flowchart.
o suelta un archivo .mmd, .mermaid, .md o .txt
Vista previa
Tu diagrama de flujo aparecerá aquí.
Convierte la sintaxis que escribes en un diagrama
Escribe un diagrama de flujo como texto plano —una línea por cada nodo, una línea por cada flecha— y velo renderizado como diagrama mientras escribes. Esta herramienta usa la sintaxis de diagramas de flujo de Mermaid, el mismo formato de texto que usan mermaid.live y muchas herramientas de documentación: un diagrama empieza con graph o flowchart, seguido de una dirección y una lista de nodos y conexiones.
Tiene un único objetivo: sintaxis de diagrama de flujo como entrada, una imagen SVG o PNG como salida. Mermaid también puede dibujar diagramas de secuencia, de Gantt, de clases y más, pero esta herramienta solo renderiza diagramas de flujo —una decisión deliberada de alcance, no una función que falte. Tampoco hay vuelta atrás hacia código editable: descargas la imagen y ya está.
Por qué tu diagrama no sale de tu dispositivo
Aquí la privacidad es estructural, no una promesa. No hay un paso de subida porque no hay ningún servidor al que subir nada:
- El análisis y el renderizado se ejecutan por completo en tu navegador.
- La página se sirve como archivos estáticos y no envía ninguna petición con el texto de tu diagrama.
- El código es abierto y cualquiera puede leerlo (MIT).
- Funciona sin conexión, algo que solo es posible porque nada sale del dispositivo.
Si quieres comprobarlo tú mismo, abre el panel de Red de tu navegador mientras escribes: ninguna petición lleva el texto de tu diagrama. Leer el código fuente.
Cómo se usa
-
Escribe o pega tu diagrama de flujo
Escribe la sintaxis en el cuadro de texto: empieza con graph o flowchart y describe nodos y flechas, por ejemplo A[Inicio] --> B[Fin]. ¿No sabes por dónde empezar? Haz clic en «Cargar ejemplo».
-
Observa la vista previa en vivo
Unos 300 ms después de dejar de escribir, el diagrama se vuelve a renderizar automáticamente. Solo se renderizan diagramas de flujo; otros tipos de diagrama de Mermaid muestran un mensaje en su lugar.
-
Corrige los errores de sintaxis
Si una línea no se puede analizar, la vista previa muestra un mensaje en lugar de adivinar qué querías decir: compara el código con tu última versión que funcionaba.
-
Exporta el resultado
Descarga SVG para obtener un archivo vectorial escalable que puedes editar en Illustrator o Inkscape, o descarga PNG para una imagen de mapa de bits con un tamaño adecuado para documentos y presentaciones.
Preguntas frecuentes
¿Se sube a algún sitio el texto de mi diagrama de flujo?
No. El análisis y el renderizado se ejecutan por completo en tu navegador. No hay ningún componente de servidor, así que tu texto no tiene forma de salir del dispositivo.
¿Qué sintaxis usa?
La sintaxis de diagramas de flujo de Mermaid: el mismo formato de texto que usan herramientas como mermaid.live y muchas plataformas de documentación. Un diagrama empieza con graph o flowchart, una dirección (por ejemplo, TD para de arriba abajo) y luego una lista de nodos y flechas.
¿Puedo dibujar aquí un diagrama de secuencia, de Gantt u otro tipo de diagrama?
No. Esta herramienta está limitada a diagramas de flujo. No admitir otros tipos de diagrama de Mermaid es una decisión deliberada de alcance, no una limitación técnica.
¿Puedo editar las formas del diagrama con el ratón, o convertir un diagrama ya renderizado de nuevo en código?
No. Esta herramienta funciona en una sola dirección: entra texto, sale una imagen. No hay un editor gráfico de nodos ni forma de convertir un diagrama renderizado de nuevo en texto.
¿Funciona sin conexión?
Sí. Es una PWA. Tras la primera visita queda guardada en la caché, de modo que funciona sin conexión a la red. También puedes instalarla en tu pantalla de inicio.
¿Cuál es la diferencia entre las descargas en SVG y en PNG?
SVG es un archivo vectorial escalable: se mantiene nítido a cualquier tamaño y se puede editar en herramientas vectoriales. PNG es una imagen de mapa de bits de resolución fija, renderizada más grande que la vista previa en pantalla para un resultado nítido en documentos y presentaciones.