Editor de diagramas de flujo: figuras, flechas y etiquetas Sí/No directamente en el navegador.
El diagrama se dibuja en tu navegador y no se envía a ninguna parte.
Qué hace el editor
Símbolos de la norma ISO 5807, flechas que rodean las figuras por sí solas y se pegan a sus lados, y etiquetas Sí/No en las salidas de las decisiones. El botón «+» coloca la figura siguiente ya conectada y «Ordenar» distribuye todo el diagrama. El diagrama se guarda en tu navegador mientras trabajas, y puedes descargarlo en PNG, SVG o PDF, o como código Mermaid.
Ejemplos: Par o impar El mayor de tres Suma de 1 a N Comprobar la contraseña
Cómo poner un diagrama de flujo en Word o Google Docs
- Word 2019 y Microsoft 365: SVG. Insértalo como cualquier imagen y el diagrama se verá nítido con cualquier zoom.
- Google Docs y versiones antiguas de Word: PNG a 300 ppp. Elige el ancho «A4, márgenes predeterminados de Word» o «US Letter» y la imagen ocupará justo el ancho del texto.
- LaTeX: PDF ajustado al diagrama, que \includegraphics inserta sin perder nitidez.
- Lo más rápido: «Copiar imagen» en la ventana «Descargar» y luego Ctrl+V directamente en el documento.
Los PNG y SVG descargados aquí llevan el diagrama dentro: arrastra el archivo de vuelta a la hoja y sigue editando.
Símbolos de los diagramas de flujo y qué significan
Los nombres son los mismos que en el panel de figuras. Las cinco primeras aparecen en casi cualquier ejercicio de clase; las demás sirven para diagramas según la ISO 5807.
| Figura | Nombre | Cuándo usarla |
|---|---|---|
| Inicio / fin | Inicio y fin de un algoritmo, entrada y salida de una subrutina. | |
| Proceso | Un cálculo o cualquier acción: asignación, operación, una orden. | |
| Decisión | Una comprobación de condición: el rombo tiene dos salidas, Sí y No. | |
| Entrada / salida | Entrada y salida de datos cuando el soporte da igual. | |
| Subrutina | La llamada a una subrutina o función descrita aparte. | |
| Preparación | La preparación de un bucle: valores iniciales como i = 1. | |
| Inicio de bucle | El límite superior de un bucle; su pareja es el Fin de bucle con el mismo nombre. | |
| Fin de bucle | El límite inferior de un bucle; la condición de salida va en uno de los dos límites. | |
| Conector | Un corte en la línea: la flecha sigue en el conector con la misma etiqueta. | |
| Conector de página | Un salto a otra página. Se usa en los libros de texto; la ISO 5807 solo tiene el conector normal. | |
| Comentario | Una nota sobre una figura, unida a ella con una línea discontinua. | |
| Entrada manual | Datos introducidos a mano, por ejemplo con el teclado. | |
| Operación manual | Una acción que hace una persona. | |
| Documento | Datos en papel: impresión, formulario, informe. | |
| Pantalla | Datos que se muestran en pantalla. | |
| Datos almacenados | Datos almacenados cuando el soporte da igual. | |
| Memoria interna | Datos en la memoria principal. | |
| Almacenamiento de acceso secuencial | Datos en un soporte que se lee en orden, como una cinta. | |
| Almacenamiento de acceso directo | Datos en un soporte de acceso directo, como un disco. | |
| Tarjeta perforada | Datos en una tarjeta perforada. | |
| Cinta perforada | Datos en una cinta de papel perforada. | |
| Procesos paralelos | El inicio o el fin de acciones que ocurren a la vez. | |
| Elipsis | Una parte del diagrama que no se dibuja entera. |
Diagramas de flujo según la ISO 5807
El estilo «ISO 5807» del panel da a las figuras las proporciones de la norma: alto a, ancho 1,5a, con a de 15 a 30 mm, texto de 10 a 14 pt y puntas de flecha solo a contracorriente o en todas las líneas. En este estilo las figuras no crecen con el texto: si no cabe, una sugerencia lo avisa.
El icono de sugerencias muestra dónde el diagrama se aparta de la norma: una decisión con menos de dos salidas, una salida sin etiqueta, una figura sin entrada o sin salida, falta de inicio o de fin.
Un diagrama a partir de código Mermaid
Pide a un chatbot que dibuje un diagrama de flujo en código Mermaid y pega la respuesta entera, aunque tenga texto alrededor del código, con «Pegar código» o con Ctrl+V directamente en la hoja. Las figuras, las flechas y las etiquetas se trasladan y la disposición se hace sola. Para el camino inverso, usa «Copiar código Mermaid» en la ventana «Descargar».
Teclado
- Enter — editar el texto de la figura
- Ctrl + Enter — terminar el texto y colocar la figura siguiente
- Ctrl + ←↑→↓ — una figura conectada en esa dirección
- ←↑→↓ — mover la selección
- Shift + ←↑→↓ — moverla en pasos grandes
- Ctrl + Z, Ctrl + Shift + Z — deshacer y rehacer
- Ctrl + D — duplicar
- Delete — eliminar
- Space + arrastrar — mover la hoja
- Ctrl + rueda del ratón — zoom
Para comprobar el algoritmo en código, prueba el entorno de Python.
Preguntas frecuentes
¿Tiene marca de agua?
No. Los PNG, SVG y PDF se descargan limpios, sin marca de agua y sin registrarse.
¿Dónde se guardan mis diagramas?
Solo en tu navegador; nada se envía a un servidor. El navegador puede borrar los datos del sitio si falta espacio o si hace mucho que no lo abres, así que descarga los diagramas importantes como archivo: «Descargar archivo del diagrama» en la ventana «Descargar» o en «Mis diagramas».
¿Funciona en el móvil?
Sí. Una figura se mueve con el dedo, la hoja arrastrando sobre un sitio vacío y el zoom se hace con dos dedos. Un doble toque abre la edición del texto, una pulsación larga el menú de acciones, y las figuras están en el panel de abajo.
¿Cómo hago un diagrama de flujo según la ISO 5807?
Elige el estilo «ISO 5807», ajusta el tamaño a y la fuente, y revisa el diagrama con las sugerencias. Para un trabajo o una tesis, descarga un PNG a 300 ppp o un SVG.
¿Por qué no se puede seleccionar el texto del PDF?
En el PDF las letras se dibujan como contornos, así que el diagrama se ve igual en cualquier ordenador, incluso sin nuestras fuentes. Si necesitas texto seleccionable, descarga un SVG con «Mantener el texto como texto» marcado.
¿En qué idiomas puedo escribir en las figuras?
En cualquier idioma del sitio, también de derecha a izquierda y con caracteres chinos y japoneses: las fuentes Noto se cargan según tu texto. El urdu se escribe en letra naskh y no en nastaliq, porque una fuente nastaliq pesa más de un megabyte. Los emojis y los caracteres de otras escrituras salen con la fuente del sistema en PNG y no entran en el PDF; la ventana «Descargar» te avisa.
¿Qué tamaño puede tener un diagrama?
No hay límite. Un diagrama con 200 figuras y 300 flechas se mueve con fluidez incluso en un móvil lento: mientras arrastras, las flechas se dibujan como codos simples, y la ruta exacta se traza al soltar la figura.
¿Es gratis usarlo?
Sí, completamente gratis y sin registro. La herramienta funciona por entero en tu navegador: el archivo nunca sale hacia un servidor, así que el servidor no gasta ni CPU ni tráfico — no hay nada que cobrar. Sin marcas de agua, sin límites de tamaño ni de número de archivos.