Sugerencia de GIF: Grabación de 30 segundos mostrando:
- Abrir Flowly (carga instantánea, sin login)
- Arrastrar y soltar 3-4 figuras rápidamente
- Conectarlas con flechas
- Ajustar colores/propiedades en tiempo real
- Exportar a SVG con un clic Texto: "De idea a diagrama en 30 segundos. Sin cuenta requerida."
Como desarrolladores, pasamos horas diseñando arquitecturas, esquemas de bases de datos y flujos de sistema. Pero la mayoría de las herramientas de diagramas:
- 🐌 Requieren instalación (aplicaciones de escritorio pesadas)
- 💸 Bloquean funciones tras muros de pago (Lucidchart, Miro)
- 🔐 Fuerzan creación de cuenta (herramientas cloud-first)
- 🎨 Abruman con funciones que nunca usamos
Flowly es diferente: Una aplicación web de instalación cero y código abierto que hace una cosa excepcionalmente bien — ayudarte a bosquejar diagramas técnicos rápido.
// ¿Te gusta esto?
const diagrama = {
instantaneo: true,
offline: true,
cuentaRequerida: false,
caracteristicas: "solo lo que necesitas"
}Eso es Flowly. Sin tonterías, solo diagramas.
| Característica | Flowly | draw.io | Lucidchart | Miro |
|---|---|---|---|---|
| Sin Instalación | ✅ Solo web | ✅ Web/Escritorio | ✅ Web | ✅ Web |
| Modo Offline | ✅ Completo | ❌ | ❌ | |
| Sin Cuenta Requerida | ✅ Siempre | ✅ Opcional | ❌ Requerido | ❌ Requerido |
| Código Abierto | ✅ MIT | ✅ Apache 2.0 | ❌ Propietario | ❌ Propietario |
| Formatos de Exportación | 5 (PNG,JPG,SVG,PDF,JSON) | 10+ | 5+ | 3 |
| Colaboración | 🔜 Planeado | ✅ | ✅ | ✅ |
| Tamaño de Archivo | ~50KB | ~2MB | N/A | N/A |
| Tiempo de Carga | <1s | ~3s | ~5s | ~4s |
| Precio | Gratis | Gratis | $7.95/mes | $8/mes |
El punto ideal de Flowly: Bocetos arquitectónicos rápidos, ERDs de bases de datos y diagramas de sistema cuando los necesitas ahora.
Solo visita yamicueto.github.io/Flowly — funciona en cualquier dispositivo con navegador.
# Clonar el repositorio
git clone https://github.com/YamiCueto/Flowly.git
cd Flowly
# Abrir en el navegador (¡sin proceso de compilación!)
open index.html # macOS
start index.html # Windows
xdg-open index.html # LinuxEso es todo. Cero dependencias, cero proceso de compilación.
GitHub Pages (Gratis):
# Haz fork del repo, luego:
gh repo clone tu-usuario/Flowly
cd Flowly
git push origin main
# Habilita Pages: Settings → Pages → Source: rama main
# Tu app: https://tu-usuario.github.io/FlowlyNetlify/Vercel (1 clic):
Haz clic para ver ejemplo
Sugerencia de captura: Diagrama ER con 5-6 tablas (Usuarios, Órdenes, Productos) conectadas por líneas de relación, mostrando claves foráneas y tipos de datos en etiquetas de texto.
Úsalo para:
- Diseño de tablas PostgreSQL/MySQL
- Planificación de colecciones MongoDB
- Modelado de datos de API
Consejo pro: Exporta como SVG → incrústalo en tu documentación de arquitectura.
Haz clic para ver ejemplo
Sugerencia de captura: Arquitectura de microservicios con cajas para servicios (Auth, API Gateway, DB), flechas mostrando llamadas HTTP/gRPC, e íconos de nube para servicios AWS/GCP.
Úsalo para:
- Explicar componentes del sistema a tu equipo
- Incorporación de nuevos desarrolladores
- Documentación técnica
Consejo pro: Usa hexágonos para servicios, rectángulos para bases de datos, círculos para APIs externas.
Haz clic para ver ejemplo
Sugerencia de captura: Diagrama de flujo de procesamiento de órdenes con diamantes de decisión ("¿Pago OK?"), cajas de proceso ("Enviar Email"), y flechas con etiquetas.
Úsalo para:
- Visualización de lógica de negocio
- Diseño de máquinas de estado
- Planificación de pipelines CI/CD
Consejo pro: Usa etiquetas de flecha para documentar condiciones (haz clic en la flecha → edita texto).
- Canvas infinito con zoom/paneo suave
- Grilla inteligente con ajuste configurable (20px por defecto)
- Multi-selección (Shift+Clic o arrastra para seleccionar área)
- Deshacer/Rehacer (historial de 50 pasos, Ctrl+Z/Y)
- Copiar/Pegar funciona entre pestañas del navegador
- 8 tipos de figuras: Rectángulo, Círculo, Elipse, Triángulo, Pentágono, Hexágono, Línea, Flecha
- Figuras de texto con edición inline (doble clic)
- Figuras arrastrables desde la barra lateral
- Dibujo con mouse (herramienta activa + arrastra en canvas)
- Selectores de color para relleno y contorno (+ transparente)
- Ancho de contorno (deslizador 0-20px)
- Control de opacidad (0-100%)
- Posición manual (entradas X/Y)
- Tamaño manual (entradas de ancho/alto con bloqueo de aspecto)
- Rotación (deslizador 0-360° + entrada de grados)
| Formato | Casos de Uso | Configuración |
|---|---|---|
| PNG | Presentaciones, documentos | Alta calidad (2x pixel ratio) |
| JPG | Archivos adjuntos de email | Deslizador de calidad (0.1-1.0) |
| SVG | Escalado vectorial, Figma/Sketch | Transforma preservadas (matrices) |
| Reportes formales, impresos | Ajuste automático de página, multi-página | |
| JSON | Backup, control de versiones Git | Estado completo del proyecto |
Consejo pro: Usa SVG para documentación técnica (se verá nítido en Confluence/Notion), PNG para Slack/Discord.
- LocalStorage (hasta 10 proyectos)
- Auto-guardado cada 30 segundos (si está habilitado)
- Miniaturas del proyecto para navegación rápida
- Exportación/Importación JSON para transferencia entre dispositivos
| Atajo | Acción |
|---|---|
V |
Herramienta de Selección (predeterminada) |
R |
Rectángulo |
C |
Círculo |
E |
Elipse |
T |
Triángulo |
P |
Pentágono |
H |
Hexágono |
L |
Línea |
A |
Flecha |
X |
Texto |
| Atajo | Acción |
|---|---|
Ctrl + C |
Copiar figuras seleccionadas |
Ctrl + V |
Pegar (con desplazamiento +20px) |
Ctrl + X |
Cortar |
Ctrl + A |
Seleccionar todo |
Delete |
Eliminar seleccionadas |
Ctrl + D |
Duplicar seleccionadas |
Ctrl + Z |
Deshacer |
Ctrl + Shift + Z |
Rehacer |
Ctrl + Y |
Rehacer (alternativo) |
| Atajo | Acción |
|---|---|
Ctrl + Scroll |
Zoom in/out |
Ctrl + 0 |
Ajustar al lienzo |
G |
Alternar grilla |
Espacio + Arrastrar |
Paneo |
| Atajo | Acción |
|---|---|
Ctrl + S |
Guardar proyecto |
Ctrl + O |
Cargar proyecto |
Ctrl + N |
Nuevo proyecto |
Ctrl + E |
Abrir modal de exportación |
┌─────────────────────────────────────────────────────────┐
│ FlowlyApp (app.js) │
│ Orquestador de la Aplicación & Inicialización │
└────────┬──────────────┬──────────────┬─────────────────┘
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌──────────────┐ ┌────────────────┐
│ CanvasManager│ │ ToolManager │ │ ExportManager │
│ Konva Stage │ │ Cambio de │ │ PNG/JPG/SVG/ │
│ Figuras │ │ herramientas │ │ PDF/JSON │
│ Selección │ │ Manejo de │ │ Serialización │
│ Historial │ │ dibujo │ │ │
└──────┬───────┘ └──────┬───────┘ └────────┬───────┘
│ │ │
│ ┌─────────────┴──────────┐ │
│ ▼ ▼ │
│ ┌──────────────┐ ┌──────────────┐│
│ │ ShapeFactory │ │ StorageManager││
│ │ (shapes.js) │ │ (storage.js) ││
│ │ Rect, Circle │ │ LocalStorage ││
│ │ Line, etc. │ │ Guardar/Cargar││
│ └──────────────┘ └───────────────┘│
│ │
▼ ▼
┌────────────────────────────────────────────────────┐
│ Módulos UI (ui/*) │
│ • Barra de herramientas • Panel de propiedades │
│ • Atajos • Modales • Notificaciones │
└────────────────────────────────────────────────────┘
Patrón clave: Arquitectura modular con patrón "attacher" para refactorización incremental sin romper cambios.
| Tecnología | Versión | ¿Por qué? |
|---|---|---|
| Konva.js | 9.3.14 | API de canvas 2D de alto rendimiento con manejo de eventos |
| html2canvas | 1.4.1 | Exportación de canvas a PNG/JPG raster |
| jsPDF | 2.5.1 | Generación de PDF del lado del cliente |
| FileSaver.js | 2.0.5 | Cross-browser saveAs() para descargas |
| Bootstrap 5 | 5.3.0 | Tooltips y utilidades CSS |
| Font Awesome | 6.4.0 | Íconos de herramientas |
| SweetAlert2 | 11.7.3 | Notificaciones toast bonitas |
| JavaScript Vanilla | ES6+ | Sin frameworks — ejecutable en cualquier navegador moderno |
Sin dependencias de construcción. Sin webpack, rollup, o vite. Solo abre index.html.
📁 Tamaño total: ~50KB (HTML+CSS+JS, sin minificar)
📄 Líneas de código:
├─ JavaScript: ~1,500 líneas
├─ CSS: ~800 líneas
└─ HTML: ~400 líneas
⚡ Rendimiento:
├─ Tiempo de carga: <1s (cold cache)
├─ FPS de canvas: 60fps (60 figuras)
└─ Uso de memoria: ~30MB (típico)
🌐 Compatibilidad del navegador:
├─ Chrome/Edge: 90+ ✅
├─ Firefox: 88+ ✅
├─ Safari: 14+ ✅
└─ Mobile: iOS 14+, Android Chrome ✅
- Importar archivos XML de draw.io
- Exportar a formato Figma/Sketch
- Compartir vía URL única (integración Firebase)
- Modo offline PWA (Service Worker)
- Tema oscuro
- Conectores de auto-enrutamiento (codo, curvas bezier)
- Ajuste magnético a puntos de anclaje
- Etiquetas y estilos de conector
- Algoritmos de auto-diseño de figuras
- Edición multi-usuario (WebRTC)
- Indicadores de presencia (cursores, selecciones)
- Hilos de comentarios en figuras
- Historial de versiones (viaje en el tiempo)
- Sistema de plugins para figuras personalizadas
Vota por características: GitHub Discussions
¡Las contribuciones son bienvenidas! Ya sea que estés arreglando un bug o añadiendo una nueva figura, apreciamos tu ayuda.
- Fork el repo
- Clona tu fork:
git clone https://github.com/tu-usuario/Flowly.git - Crea una rama:
git checkout -b feature/figura-estrella - Haz cambios (ver CONTRIBUTING.md para pautas)
- Prueba localmente: Abre
index.htmlen el navegador - Commit:
git commit -m "feat: añadir figura estrella a la barra de herramientas" - Push:
git push origin feature/figura-estrella - Abre un PR en GitHub
- Pruebas automatizadas (Vitest + Playwright)
- Accesibilidad (navegación por teclado, lectores de pantalla)
- Nuevos tipos de figuras (estrella, diamante, nube)
- i18n (soporte multi-idioma)
- Optimización móvil (gestos táctiles)
Ver issues etiquetadas good first issue.
Este proyecto está licenciado bajo la Licencia MIT — ver el archivo LICENSE para detalles.
TL;DR: Puedes hacer lo que quieras con este código — úsalo, modifícalo,
distribuye, vende productos basados en él. Solo mantén el aviso de copyright.
¿Por qué no solo usar draw.io?
draw.io es increíble, pero es enorme (~2MB de JS). Flowly es 50KB — 40x más pequeño. Si solo necesitas diagramas técnicos rápidos, Flowly carga más rápido y está enfocado para desarrolladores.
¿Es realmente offline?
Sí, una vez que cargues la página, todo funciona offline (excepto cargar figuras personalizadas desde CDN). Los proyectos se guardan en LocalStorage, sin servidor backend. La versión PWA (v1.1) añadirá soporte offline completo incluso en la primera carga.
¿Puedo usarlo para proyectos comerciales?
Sí, es MIT-Licensed. Usa Flowly en tu empresa, vende diagramas creados con él, lo que sea. Solo no elimines el aviso de copyright del código fuente si lo redistribuyes.
¿Dónde se guardan mis datos?
En tu navegador (LocalStorage). Nunca subimos nada a ningún servidor. Si borras los datos del navegador, borras los proyectos — ¡así que exporta JSON regularmente como backups!
¿Flowly soporta colaboración?
Todavía no (v1.0 es de un solo usuario). La colaboración en tiempo real está planeada para v2.0 (2026) usando WebRTC. Mientras tanto, usa JSON export/import para compartir proyectos.
¿Cómo puedo reportar bugs o solicitar características?
Abre un issue en GitHub o inicia una discusión. Los PRs también son bienvenidos!
Si Flowly te ahorra tiempo, considera:
- ⭐ Dale una estrella a este repo (ayuda a otros a descubrirlo)
- 🐦 Comparte en Twitter/LinkedIn (etiqueta a @YamiCueto)
- 🐛 Reporta bugs o contribuye con código
- 💸 Patrocina el desarrollo vía GitHub Sponsors (próximamente)
Autor: Yami Cueto
GitHub: @YamiCueto
Proyecto: github.com/YamiCueto/Flowly
¿Tienes preguntas? Abre una discusión o etiquétame en issues.
Hecho con ❤️ para desarrolladores que odian las tonterías