Creador de diagramas de flujo online

Qué puedes hacer aquí

• Añadir rectángulos de proceso y rombos de decisión.
• Editar el texto del nodo seleccionado con un botón o con doble clic.
• Mover nodos dentro de los límites del lienzo.
• Conectar dos nodos con una flecha direccional.
• Seleccionar y eliminar un nodo con todas sus conexiones o una flecha individual.
• Descargar una imagen PNG limpia sin marcas de selección.

Respuesta rápida: cómo hacer un diagrama de flujo

Define el punto de partida y el resultado final antes de dibujar. Añade un rectángulo por cada acción concreta y un rombo cuando la respuesta cambie la ruta. Selecciona un nodo y pulsa Editar texto, arrástralo para dejar espacio y entra en modo Conectar: pulsa primero el origen y después el destino. La punta de la flecha indica hacia dónde avanza el proceso.

Este editor incluye solo dos tipos de nodo. Puedes representar inicio y final mediante rectángulos con texto explícito, por ejemplo “Inicio” y “Fin”, pero la forma seguirá siendo rectangular. Si el documento debe cumplir una notación formal con terminales ovalados, entradas, documentos, carriles, BPMN o UML, utiliza una herramienta especializada y valida el estándar aplicable. Aquí el objetivo es aclarar una secuencia pequeña, no certificar una notación.

• Rectángulo: acción, tarea o paso que debe ejecutarse.
• Rombo: pregunta o decisión que abre rutas diferentes.
• Flecha: orden y dirección entre dos nodos.
• Texto corto: verbo de acción en procesos y pregunta en decisiones.

Símbolos de diagrama de flujo que ofrece esta herramienta

IBM describe el rectángulo como un proceso específico y el rombo como un punto de decisión. Las flechas muestran dirección y conexión. Esa convención coincide con el comportamiento del editor: el botón Añadir proceso crea un rectángulo, Añadir decisión crea un rombo y Conectar traza una flecha desde el primer nodo elegido hacia el segundo.

No confundas una decisión con una tarea. “Revisar solicitud” es una acción y cabe en un rectángulo; “¿La solicitud está completa?” es una pregunta y cabe en un rombo. El rombo debería tener al menos dos salidas con significado explícito. El editor no permite escribir texto sobre la flecha, por lo que conviene incluir “Sí:” y “No:” al comienzo de los textos de los nodos de destino cuando la ruta no sea evidente.

Cómo pasar de una explicación verbal a un flujograma claro

Escribe primero la secuencia en frases, una por línea. Rodea las condiciones que puedan cambiar el siguiente paso. Después elimina detalles que no afecten al flujo y separa las acciones compuestas. “Recibir, comprobar y archivar la solicitud” oculta tres estados; si cualquiera puede fallar o cambiar de responsable, conviene dibujar tres procesos.

Empieza con una ruta principal de arriba abajo o de izquierda a derecha. Añade las excepciones después. Las flechas cruzadas y los retornos largos hacen que un diagrama pequeño sea difícil de seguir. Mueve los nodos hasta que el lector pueda recorrer la ruta sin adivinar. Como este editor usa conexiones rectas, reserva espacio entre ramas y evita colocar un nodo encima de una flecha.

• Elige un único proceso y define dónde empieza y termina.
• Usa verbos concretos: validar, enviar, registrar, corregir.
• Formula decisiones que puedan contestarse con rutas distinguibles.
• Prueba cada ruta con un caso real o ficticio.

Ejemplo: aprobación de una solicitud

Un esquema mínimo puede tener “Recibir solicitud”, “¿Está completa?”, “Pedir datos”, “Evaluar” y “Comunicar decisión”. La flecha de “Recibir solicitud” llega a la decisión. Una rama conduce a “Pedir datos” y otra a “Evaluar”. Si pedir datos devuelve el expediente a la comprobación, añade una flecha de retorno. Para evitar ambigüedad, escribe “No: pedir datos” y “Sí: evaluar” en esos procesos.

Recorre el dibujo con tres casos: solicitud completa y aprobada, solicitud completa y rechazada, solicitud incompleta. Si el diagrama no explica qué ocurre en alguno, falta un nodo o una decisión. El PNG puede adjuntarse a una reunión o borrador, pero el proceso oficial debería conservar además versión, propietario, fecha, definiciones y controles que esta imagen no contiene.

Selección, edición, borrado y exportación PNG

En Seleccionar/Mover, un clic sobre un nodo lo marca y permite arrastrarlo. Un clic cerca de una flecha selecciona la conexión. El botón Eliminar quita el elemento seleccionado; al quitar un nodo también se eliminan las flechas que parten de él o llegan a él. La herramienta no ofrece Deshacer. Antes de borrar una parte compleja, descarga una copia o cancela la acción si todavía no la has ejecutado.

Selecciona un nodo y pulsa Editar texto para abrir un cuadro del navegador; en ordenador también puedes hacer doble clic. Se muestran hasta tres líneas dentro del nodo y un texto demasiado largo puede quedar recortado. Usa frases breves. Al descargar, el editor vuelve a renderizar el diagrama sin el color de selección y crea diagrama-flujo.png. La rejilla clara forma parte de la imagen exportada. El archivo es rasterizado, así que no podrás volver a mover sus nodos en otra sesión.

Límites, privacidad y cuándo usar otra herramienta

Los nodos y flechas existen solo en memoria. No se suben a FunnyTools ni se guardan en localStorage. Cerrar, recargar o sufrir un cierre del navegador elimina el estado. Tampoco hay importación, exportación JSON, SVG, PDF, historial, comentarios, permisos o edición simultánea. Para un proceso que deba mantenerse durante meses, usa un formato editable con control de versiones.

Un diagrama puede hacer visible una secuencia, pero no demuestra que el proceso sea correcto, legal, seguro o eficiente. Valida el contenido con las personas que ejecutan cada paso y con la norma aplicable. No incluyas contraseñas, datos personales o detalles de seguridad en una imagen que vaya a circular. Para un simple trazo libre sin semántica de proceso, la pizarra de dibujo es más directa.

Si solo necesitas dibujar a mano alzada, utiliza la pizarra para dibujar online .

Cómo utilizarla paso a paso

1. Selecciona un nodo inicial y pulsa Editar texto, o usa doble clic en ordenador; bórralos si prefieres empezar de cero.
2. Pulsa Añadir proceso para cada acción y Añadir decisión para cada pregunta que abra ramas.
3. En modo Seleccionar/Mover, arrastra los nodos para ordenar la ruta y dejar hueco entre conexiones.
4. Pulsa Conectar, selecciona el nodo de origen y después el nodo de destino. Repite para cada flecha.
5. Selecciona un nodo o una flecha y usa Eliminar si sobra. Recuerda que no existe Deshacer.
6. Pulsa Descargar PNG y abre diagrama-flujo.png para verificar texto, dirección y encuadre.

Situaciones en las que resulta útil

• Documentar la recepción, revisión y respuesta de una solicitud.
• Representar la lógica de un ejercicio de programación antes de escribir código.
• Preparar las rutas de “sí” y “no” de una lista de comprobación.
• Explicar un procedimiento de soporte en una reunión.
• Detectar un paso repetido o una decisión sin salida en un proceso breve.

Ejemplos completos

Límites y comprobaciones importantes

• Solo hay rectángulos de proceso y rombos de decisión.
• No existe Deshacer, guardado automático ni archivo editable.
• El texto visible se limita a tres líneas dentro del nodo.
• Las flechas son rectas y no admiten etiquetas.
• La rejilla se incluye en el PNG de 1000 × 620 píxeles.
• Borrar un nodo elimina también sus conexiones.
• El lienzo admite hasta veinte nodos y evita flechas duplicadas en la misma dirección.

Fuentes y documentación para comprobar

• IBM: qué es un diagrama de flujo Referencia en español sobre procesos paso a paso, líneas de flujo y símbolos habituales.
• IBM: qué es el mapeo de procesos Explica el uso común de rectángulos, rombos y flechas y la validación del mapa con participantes.
• MDN: HTML canvas Documentación técnica del elemento usado para representar y exportar el diagrama.

Preguntas frecuentes