Repolode
Enviar
alyssaxuu

alyssaxuu/flowy

Una biblioteca minimalista de JavaScript vanilla para crear editores de diagramas de flujo con bloques arrastrables y ajuste automático en aplicaciones web.

Ver en GitHub
Estrellas
12,143
Forks
1,043
Issues abiertos
59
Último commit
hace 2 años

¿Qué es?

Flowy es una biblioteca de JavaScript sin dependencias que permite añadir funciones de diagramas de flujo a una página web. Puedes marcar elementos con la clase create-flowy para convertirlos en bloques arrastrables y colocarlos en un elemento canvas; luego, los usuarios pueden arrastrarlos al canvas, donde se ajustan a los bloques principales y forman ramas conectadas.

La biblioteca ofrece callbacks para los eventos grab, release, snap y rearrange, lo que permite que tu código apruebe o rechace conexiones y responda a las acciones de los usuarios. El estado del diagrama de flujo se puede exportar con flowy.output() como una estructura JSON y restaurar más tarde con flowy.import(), aunque el método de importación inserta HTML sin procesar y solo debe usarse con datos de confianza. Los bloques se pueden eliminar en grupo con flowy.deleteBlocks(); no se ofrece la opción de eliminar bloques individuales.

Se instala enlazando un archivo JavaScript y otro CSS, actualmente mediante jsDelivr, y funciona en dispositivos móviles. La instalación con Npm figura como todavía no disponible.

Funciones clave

  • 01Bloques con arrastrar y soltar, ajuste automático y centrado
  • 02Callbacks para los eventos grab, release, snap y rearrange
  • 03Ajuste condicional y eliminación condicional de bloques
  • 04Exportación e importación de datos del diagrama de flujo en formato JSON
  • 05Funciona en dispositivos móviles y no requiere dependencias externas

Casos de uso

  • Crear un generador de automatizaciones o flujos de trabajo en una aplicación web
  • Crear una herramienta de mapas mentales o diagramas con nodos conectados
  • Prototipar una interfaz sencilla de programación visual

Inicio rápido

  1. 1

    Vincula la hoja de estilos desde jsDelivr

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
  2. 2

    Vincula el script desde jsDelivr

    <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>
  3. 3

    Crea un elemento canvas y bloques arrastrables en tu página

  4. 4

    Inicializa Flowy en el canvas

    flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

Antes de usarlo

  • La instalación con npm aún no está disponible; usa los enlaces CDN o copia los archivos.
  • No se pueden eliminar bloques individualmente; solo se pueden eliminar todos a la vez.
  • El método de importación no sanea el HTML y es vulnerable a XSS si se usa con entradas que no sean de confianza.

Temas

#flowchart#drag-and-drop#javascript#diagrams#visual-programming#vanilla-js#engine#javascript-library#marketing#marketing-automation

Preguntas frecuentes

¿Qué es flowy?
Una biblioteca minimalista de JavaScript vanilla para crear editores de diagramas de flujo con bloques arrastrables y ajuste automático en aplicaciones web. Flowy es una biblioteca de JavaScript sin dependencias que permite añadir funciones de diagramas de flujo a una página web. Puedes marcar elementos con la clase create-flowy para convertirlos en bloques arrastrables y colocarlos en un elemento canvas; luego, los usuarios pueden arrastrarlos al canvas, donde se ajustan a los bloques principales y forman ramas conectadas.
¿flowy es gratuito? ¿Qué licencia tiene?
flowy es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿flowy sigue mantenido?
Sin commits en más de 6 meses. El último commit de flowy fue el 13 jul 2024.
¿Para qué puedo usar flowy?
Crear un generador de automatizaciones o flujos de trabajo en una aplicación web Crear una herramienta de mapas mentales o diagramas con nodos conectados Prototipar una interfaz sencilla de programación visual
¿Cómo se instala flowy?
Vincula la hoja de estilos desde jsDelivr: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"> Vincula el script desde jsDelivr: <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script> Crea un elemento canvas y bloques arrastrables en tu página Inicializa Flowy en el canvas: flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
¿Dónde consigo flowy?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/alyssaxuu/flowy

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados