¿Qué es Flowchart Maker?

Flowchart Maker es una herramienta interactiva de arrastrar y soltar para crear diagramas de flujo profesionales, diagramas de procesos y visualizaciones de flujos de trabajo, todo directamente en tu navegador. Con 37 tipos de formas, incluyendo cajas de proceso, rombos de decisión, bases de datos, tablas, carriles y más, puedes construir desde simples árboles de decisión hasta arquitecturas de sistemas complejas.

¿Para quién es esta herramienta?

Desarrolladores de software

Documenta flujos de sistemas, pipelines de CI/CD y arquitecturas de datos con precisión.

Analistas de negocio

Mapea procesos empresariales, flujos de aprobación y recorridos del cliente.

Estudiantes

Crea diagramas de flujo de algoritmos, árboles de decisión y esquemas de estudio fácilmente.

Gestores de proyectos

Visualiza flujos de trabajo de proyectos y procesos de equipo para una comunicación más clara.

Tus datos permanecen privados

Todo el procesamiento ocurre en tu navegador: nunca se envía nada a un servidor.

Sin subidas — tus diagramas nunca salen de tu dispositivo
Sin rastreo — no recopilamos datos de uso
Guardado automático — el trabajo se guarda automáticamente en el almacenamiento local de tu navegador

Table of Contents

1. ¿Qué es Flowchart Maker?
- 1.1. ¿Para quién es esta herramienta?
- 1.2. Tus datos permanecen privados
2. Cómo usar Flowchart Maker
3. Características
4. Preguntas frecuentes

Cómo usar Flowchart Maker

Empezar es muy sencillo. Aquí tienes un recorrido completo por las interacciones principales, desde colocar formas hasta exportar tu diagrama terminado.

Crear formas

Elige entre 37 tipos de formas en el panel lateral izquierdo, organizadas en grupos: Básico, Control de flujo, Datos, Tipos de proceso, Anotaciones, Adicional, Lógica/Unión, Almacenamiento y Más formas.

Haz clic en una forma del panel lateral para colocarla en el centro del lienzo
Arrastra una forma desde el panel lateral y suéltala en cualquier parte del lienzo
Las formas se alinean automáticamente a una cuadrícula de 20 px para un orden perfecto

Conectar formas

Pasa el cursor sobre una forma para ver los puntos de conexión azules en sus bordes
Haz clic en un punto y luego en otro punto de una forma diferente para crear una conexión curva
Agrega etiquetas (como "Sí" o "No") a las conexiones desde el panel de propiedades
Elige entre 4 tipos de flechas: adelante, atrás, ambas direcciones o sin flechas

Editar formas

Haz doble clic en cualquier forma para editar su texto
Usa el panel de propiedades derecho para cambiar colores, bordes, opacidad, tamaño de fuente y dimensiones
Arrastra los controladores de redimensionamiento cuadrados alrededor de una forma seleccionada para cambiar su tamaño

Trabajar con tablas

Agrega una forma de tabla desde el grupo Adicional en el panel lateral
Haz doble clic en cualquier celda para editar su contenido
Presiona Tab para ir a la siguiente celda, Shift+Tab para retroceder
Usa los botones del panel de propiedades para agregar o eliminar filas y columnas

Organizar tu diagrama

Selecciona varias formas con Ctrl+Click o arrastrando un rectángulo de selección
Usa las herramientas de alineación (aparecen al seleccionar 2 o más formas) para alinear o distribuir uniformemente
Haz clic en Diseño automático para organizar todas las formas en una disposición jerárquica automáticamente
Agrupa formas con Ctrl+G para moverlas juntas

Exportar tu trabajo

PNG

Imagen de alta resolución (2x): ideal para presentaciones y documentos.

SVG

Formato vectorial escalable: perfecto para uso web e impresión.

JSON

Guarda los datos del diagrama para recargarlos más tarde, compartirlos o importarlos en otros dispositivos.

Características

37 tipos de formas

Una biblioteca completa que cubre todos los símbolos estándar de diagramas de flujo, además de formas adicionales para casos de uso especializados:

Básico y control de flujo

Básico — Proceso, Inicio/Fin, Subproceso, Proceso predefinido
Control de flujo — Decisión, Fusión, Conector, Fuera de página
Anotaciones — Nota, Visualización

Datos y tipos de proceso

Datos — Entrada/Salida, Base de datos, Documento, Multidocumento, Almacenamiento interno
Tipos de proceso — Operación manual, Preparación, Demora, Entrada manual

Lógica y almacenamiento

Lógica — Puerta O, Unión sumadora, Intercalar, Ordenar, Extraer, Límite de bucle
Almacenamiento — Datos almacenados, Datos directos

Adicional y más formas

Adicional — Texto libre, Tabla, Nube, Estrella, Llamada, Flecha, Círculo, Carril
Más — Tarjeta, Cinta, Rombo, Rect. redondeado, Hexágono, Línea H, Línea V, Corchete, Llave

Conexiones inteligentes

Conecta formas con suaves curvas bezier. Agrega etiquetas de texto a las conexiones, elige entre 4 tipos de flechas y personaliza el color, el grosor y el estilo de línea: continua, discontinua o punteada.

Tablas interactivas

Agrega formas de tabla con celdas totalmente editables. Haz doble clic en cualquier celda para editarla, usa Tab para navegar entre celdas, y agrega o elimina filas y columnas directamente desde el panel de propiedades.

Herramientas de precisión

Guías de alineación

Las líneas de alineación aparecen automáticamente al arrastrar formas cerca de otras para un posicionamiento perfecto al píxel.

Alinear y distribuir

Alinea formas a la izquierda, al centro, a la derecha, arriba, al medio o abajo, y distribúyelas uniformemente con un solo clic.

Diseño automático

Organiza automáticamente todas las formas en una estructura jerárquica limpia con un solo clic.

Ajuste a cuadrícula

Las formas se ajustan a una cuadrícula de 20 px, manteniendo tus diagramas siempre alineados y ordenados.

Navegación

Minimapa — panel de vista general con navegación por clic para diagramas grandes
Zoom — rueda del ratón, botones o ajustar a pantalla (del 10% al 500%)
Desplazamiento — arrastrar con clic derecho, clic central o herramienta de mano (H)
Búsqueda — buscar y reemplazar texto en todas las formas con Ctrl+F

Espacio de trabajo con múltiples diagramas

Trabaja en varios diagramas en pestañas separadas. Agrega, renombra, duplica o elimina diagramas según lo necesites. Cada pestaña mantiene su propio lienzo independiente con sus formas, conexiones y estado de vista.

Exportar e importar

Exporta tu diagrama de flujo como PNG (alta resolución), SVG (vectorial) o JSON (datos). Importa archivos JSON para continuar editando o compartir diagramas entre dispositivos.

12 plantillas integradas

Empieza rápidamente con plantillas prediseñadas para los casos de uso más comunes:

General

Flujo básico, Árbol de decisión

Negocios

Proceso de compra en e-commerce, Proceso de selección de personal, Soporte al cliente, Gestión de pedidos

Técnico

Autenticación de usuario, Reporte de errores, Desarrollo de software, Pipeline CI/CD, CRUD de base de datos, Carga de archivos

Preguntas frecuentes

¿Cómo conecto dos formas?

Pasa el cursor sobre una forma para ver los puntos azules en sus bordes. Haz clic en un punto y luego en un punto de otra forma: se creará una flecha curva que las conecta. También puedes presionar C para cambiar al modo Conectar.

¿Cómo agrego etiquetas como "Sí" o "No" a las conexiones?

Haz clic en una conexión para seleccionarla. En el panel de propiedades de la derecha, escribe el texto de la etiqueta en el campo Etiqueta. El texto aparecerá en el punto medio de la conexión.

¿Cómo edito una celda de tabla?

Haz doble clic en cualquier celda de una forma de tabla. Escribe tu contenido y presiona Enter para guardar. Presiona Tab para ir a la siguiente celda o Shift+Tab para retroceder.

¿Cómo selecciono varias formas a la vez?

Mantén presionado Ctrl y haz clic en cada forma individualmente. También puedes hacer clic en un área vacía del lienzo y arrastrar para crear un rectángulo de selección: todas las formas dentro quedarán seleccionadas.

¿Cómo alineo las formas correctamente?

Selecciona dos o más formas. Los botones de alineación aparecerán en la barra de herramientas. Haz clic para alinear a la izquierda, al centro, a la derecha, arriba, al medio o abajo. Con 3 o más formas seleccionadas, también puedes distribuirlas uniformemente.

¿Puedo guardar mi diagrama de flujo?

Tu trabajo se guarda automáticamente en el almacenamiento local de tu navegador. Para guardar una copia portable, haz clic en Exportar → JSON. Luego puedes importar ese archivo para continuar editando en cualquier dispositivo.

¿Qué formatos de exportación están disponibles?

PNG para imágenes (resolución 2x), SVG para gráficos vectoriales escalables y JSON para datos del diagrama que pueden reimportarse y editarse posteriormente.

¿Cómo trabajo con varios diagramas a la vez?

Haz clic en el botón + junto a las pestañas de diagramas en la barra de herramientas para crear una nueva pestaña. Cada pestaña tiene su propio lienzo independiente. Haz clic en el menú de tres puntos de cualquier pestaña para renombrarla, duplicarla o eliminarla.

¿Qué atajos de teclado están disponibles?

Presiona ? para ver la lista completa. Los atajos principales son:

V — Modo selección
H — Modo desplazamiento
C — Modo conexión
Ctrl+Z — Deshacer
Ctrl+C / Ctrl+V — Copiar / Pegar
Ctrl+F — Buscar
Ctrl+G — Agrupar formas

¿Mis datos son privados?

100% privado: Todo funciona íntegramente en tu navegador. No se envía ningún dato a ningún servidor. Tus diagramas se almacenan únicamente en el almacenamiento local de tu navegador.