FlowGram.AI: un motor de código abierto para crear rápidamente flujos de trabajo nodales

Introducción general

Flowgram.ai es un motor de construcción de procesos de código abierto desarrollado por ByteDance. Se basa en la edición de nodos y ayuda a los desarrolladores a crear rápidamente flujos de trabajo, soportando tanto el modo de diseño fijo como el de hilo libre. Escrito en TypeScript, el código del proyecto está alojado en GitHub, es de código abierto y gratuito, y se actualizó por última vez el 26 de marzo de 2025. Flowgram.ai ofrece una interfaz intuitiva y una experiencia interactiva fluida para diseñar flujos de trabajo visuales con entradas y salidas claras. También planea incorporar capacidades de IA para mejorar la inteligencia de procesos. Los usuarios pueden experimentarlo en línea a través de la demo oficial o instalarlo localmente.

Lista de funciones

• Editor de nodosArrastre y suelte nodos y vínculos para crear rápidamente flujos de trabajo.
• Compatibilidad con modo dual: Ofrece tanto maquetación fija como edición de enlaces libres.
• experiencia interactiva: Soporta transiciones animadas, zoom gestual, deshacer rehacer, etc.
• Potencial de la IAPlan de integración de la IA para mejorar el análisis de la inteligencia de procesos.
• Extensiones de código abierto: Divulgación del código y apoyo a la personalización por parte de los desarrolladores.
• Opciones de exportación: Los flujos de trabajo pueden exportarse como imágenes o código.

Utilizar la ayuda

Flowgram.ai es una herramienta para desarrolladores que los usuarios pueden experimentar a través de una demo en línea, o instalar y ejecutar localmente. A continuación encontrará una guía detallada sobre cómo utilizarla.

Cómo empezar

Flowgram.ai ofrece dos formas de utilizarlo: demostración en línea e instalación local.

Experiencia en línea

1. Abre tu navegador y visita la Demo oficial:
   • Disposición fija:https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html
   • Conexiones gratuitas:https://flowgram.ai/examples/free-layout/free-feature-overview.html
2. Puede operar directamente sobre el lienzo una vez que entre, sin necesidad de instalación.

instalación local

1. Preparar el entorno::
   • Instala Node.js 18+ y ejecútalo:nvm install lts/hydrogenConfigure la versión por defecto:nvm alias default lts/hydrogenConmutación:nvm use lts/hydrogen.
   • Instalar dependencias globales:npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0.
2. almacén de clones::
   • Corriendo:git clone git@github.com:bytedance/flowgram.ai.git.
3. Instalación de dependencias::
   • Ve a la carpeta:cd flowgram.ai.
   • Actualizar dependencias:rush update.
4. Construir el proyecto::
   • Corriendo:rush build.
5. Ejecutar la demostración::
   • Documentación:rush dev:docs.
   • Demostración de diseño fijo:rush dev:demo-fixed-layout.
   • Demostración gratuita de conexiones:rush dev:demo-free-layout.
6. Acceso desde un navegador http://localhost(Puerto confirmado por el registro).

Instalación rápida mediante npx

• Corriendo:npx @flowgram.ai/create-app@latest.
• Selecciona Demo:
  • fixed-layoutMejores prácticas de diseño fijo.
  • free-layout: Buenas prácticas de maquetación gratuitas.
  • fixed-layout-simple: Disposición fija Uso básico.
  • free-layout-simpleDisposición libre Uso básico.

Instalación de módulos mediante npm

• Corregido el editor de diseño:npm install @flowgram.ai/fixed-layout-editor.
• Freelink Editor:npm install @flowgram.ai/free-layout-editor.

Funciones principales

Creación de flujos de trabajo

• Al entrar en la interfaz de edición, la barra de herramientas de la izquierda muestra el tipo de nodo (por ejemplo, condicional, cíclico).
• Arrastre el nodo al lienzo y haga doble clic en la entrada, por ejemplo "Inicio".
• Conecta los nodos con flechas para completar el proceso.

Modo de diseño fijo

• Abra la demostración de diseño fijo o ejecute fixed-layout.
• La posición del nodo es fija y permite arrastrar y soltar hasta la posición especificada.
• Se pueden añadir ramas y bucles, y el panel derecho ajusta el estilo.

modo libre

• Abra la Demo de Enlace Gratuito o ejecute free-layout.
• Los nodos pueden colocarse arbitrariamente y las líneas de conexión se dibujan libremente.
• Admite funciones de intercalación automática y alineación por adsorción.

función interactiva

• Zoom ArrastrarZoom con dos dedos en el trackpad del Mac y pulsa la barra espaciadora para arrastrar el lienzo.
• transición animadaLas líneas cambian suavemente a medida que se mueven los nodos.
• deshacerOpera con Ctrl+Z y Ctrl+Y.
• copiar y pegarCtrl+C copiar, Ctrl+V pegar.

Funciones destacadas

diseño de modo dual

El diseño fijo es adecuado para procesos estructurados, como la planificación de proyectos, con posiciones fijas de los nodos y soporte para la ramificación y el colapso. La vinculación libre es adecuada para el diseño flexible, como el mapa mental, la posición de los nodos es arbitraria, la vinculación libre.

Habilitación de la IA

Flowgram.ai tiene previsto introducir funciones de inteligencia artificial, como la optimización automática de rutas de flujo. Actualmente está en desarrollo, así que no pierdas de vista GitHub para más detalles.

Soporte de código abierto

Los desarrolladores pueden modificar el código. Por ejemplo, para añadir un nuevo tipo de nodo, basta con editar el código @flowgram.ai/free-layout-editor y envíelo.

advertencia

• La demostración en línea no permite guardar, por lo que deberá instalarla localmente para disfrutar de todas sus funciones.
• La primera instalación de la dependencia requiere una conexión a Internet y puede ser lenta.
• Documentación oficial (https://flowgram.ai/) se actualiza continuamente, consulte GitHub para más detalles. README.md.

Con estos pasos, puede crear rápidamente un flujo de trabajo con Flowgram.ai.

escenario de aplicación

1. gestión de proyectos
   Diseñe el flujo de tareas con un esquema fijo que muestre claramente los pasos y la división del trabajo.
2. desarrollo de software
   Dibuja un diagrama de flujo del código utilizando líneas de conexión libre para marcar el flujo de datos.
3. Demostración didáctica
   El profesor explica los conceptos utilizando un flujo de trabajo basado en nodos, exportado y compartido con los alumnos.

CONTROL DE CALIDAD

1. ¿Flowgram.ai es gratuito?
   Sí, es un proyecto de código abierto, el código es de uso libre y las funciones deben desplegarse por sí solas.
2. ¿Es compatible con el chino?
   El contenido de los nodos se puede introducir en chino y la interfaz está en inglés.
3. ¿Cómo se guarda un flujo de trabajo?
   La Demo Online no se puede guardar, la versión local puede exportar imagen o código.