¿Qué es Creador de diagramas de flujo?

Arrastra y suelta para crear diagramas de flujo con rombos de decisión, cajas de proceso, paralelogramos de entrada/salida, formas de documento y conectores. Exporta el diagrama terminado como PNG, SVG o PDF.

Elige entre cajas de proceso, rombos de decisión, píldoras de inicio/fin, paralelogramos de entrada/salida y formas de documento. Encajan en su sitio y mantienen las conexiones al mover los nodos. Haz doble clic en un nodo para renombrarlo, arrastra de un punto de anclaje a otro para conectar dos formas, y cambia el color o vacía el lienzo de un clic. Cuando el diagrama esté listo, expórtalo como SVG transparente para diapositivas, PNG a cualquier escala o PDF listo para imprimir.

Cómo usar

1. Paso 1 — Arrastra nodos de forma (proceso, decisión, inicio/fin) desde la barra de herramientas al lienzo.
2. Paso 2 — Conecta los nodos arrastrando de un conector a otro. Haz doble clic para editar las etiquetas.
3. Paso 3 — Organiza el diseño y exporta el diagrama de flujo como PNG, SVG o PDF para presentaciones, impresión o documentación.

Cuándo usar

• Documentar el flujo de una petición backend con ramas de éxito y error antes de escribir código.
• Mapear una ruta de escalado de atención al cliente para que alguien nuevo la entienda en su primer día.
• Esbozar un algoritmo en un documento de diseño cuando la prosa deja de ser clara.

Resultado

Un product manager mapea un flujo de onboarding de usuario: Inicio → Registro → ¿Email verificado? (decisión) → Sí → Panel / No → Reenviar email → volver a verificación.

Preguntas frecuentes

¿Qué diferencia hay entre una caja de proceso y un rombo de decisión?

Los rectángulos representan una acción o paso (Enviar correo, Actualizar registro). Los rombos representan una pregunta de sí/no que divide el flujo en dos rutas. Las píldoras marcan el inicio y el final de todo el diagrama. Respetar estas convenciones hace el flujo legible.

¿Cómo conecto dos formas?

Al pasar el ratón sobre un nodo aparecen pequeños puntos de anclaje en sus bordes. Haz clic y arrastra desde un punto hasta el de otra forma, suelta y aparece una flecha. Después puedes mover el punto medio para reorientar la flecha y evitar otros nodos.

¿Puedo etiquetar las flechas, no solo las cajas?

Sí. Haz doble clic sobre una flecha y aparece un campo de texto en su punto medio. Es útil en los rombos para etiquetar las salidas Sí y No, o anotar transiciones con una condición como status=200 o reintentos agotados.

¿Por qué exportar en SVG en lugar de PNG?

SVG se mantiene nítido a cualquier escala y es editable en Figma, Illustrator o Inkscape si luego necesitas cambiar texto o colores. PNG tiene resolución fija pero se pega más fiablemente en Confluence, Notion o PowerPoint sin problemas de importación.

¿Cuántos nodos aguanta el lienzo sin volverse lento?

React Flow se mueve bien con unos cientos de nodos. Más allá, el desplazamiento y el zoom se ralentizan en portátiles modestos. Si tu diagrama crece tanto, divídelo en una vista general que enlace a diagramas de detalle por subsistema.

Herramientas relacionadas