FlowGram.AI : un moteur open source pour la création rapide de flux de travail nodaux

Introduction générale

Flowgram.ai est un moteur de construction de processus open source développé par ByteDance. Il est basé sur l'édition de nœuds et aide les développeurs à créer rapidement des flux de travail, en prenant en charge les modes de disposition fixe et de fil libre. Écrit en TypeScript, le code du projet est hébergé sur GitHub, open source et gratuit, et a été mis à jour pour la dernière fois le 26 mars 2025. Flowgram.ai offre une interface intuitive et une expérience interactive fluide pour concevoir des flux de travail visuels avec des entrées et des sorties claires. Il prévoit également d'intégrer des capacités d'IA pour améliorer l'intelligence des processus. Les utilisateurs peuvent l'expérimenter en ligne grâce à la démo officielle ou l'installer localement.

Liste des fonctions

• Éditeur de nœudsLes flux de travail : Glissez-déposez des nœuds et des liens pour créer rapidement des flux de travail.
• Prise en charge du double modeLe site Web de la Commission européenne : Il offre à la fois une mise en page fixe et la possibilité d'éditer des liens libres.
• expérience interactiveLa fonction d'animation : elle prend en charge les transitions animées, les zooms gestuels, les annulations et les rétablissements, etc.
• Potentiel de l'IAPlan d'intégration de l'IA pour améliorer l'analyse de l'intelligence des processus.
• Extensions Open SourceLes services d'aide à la décision : divulgation du code et soutien à la personnalisation par le développeur.
• Options d'exportationLes flux de travail peuvent être exportés sous forme d'images ou de code.

Utiliser l'aide

Flowgram.ai est un outil de développement que les utilisateurs peuvent expérimenter par le biais d'une démo en ligne, ou installer et exécuter localement. Vous trouverez ci-dessous un guide détaillé sur son utilisation.

Comment démarrer

Flowgram.ai propose deux façons de l'utiliser : une démonstration en ligne et une installation locale.

Expérience en ligne

1. Ouvrez votre navigateur et visitez la démo officielle :
   • Mise en page fixe :https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html
   • Connexions gratuites :https://flowgram.ai/examples/free-layout/free-feature-overview.html
2. Vous pouvez opérer directement sur la toile dès votre entrée, aucune installation n'est nécessaire.

installation locale

1. Préparation de l'environnement: :
   • Installez Node.js 18+ et exécutez-le :nvm install lts/hydrogenpour définir la version par défaut :nvm alias default lts/hydrogenCommutation :nvm use lts/hydrogen.
   • Installer les dépendances globales :npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0.
2. entrepôt de clones: :
   • La course à pied :git clone git@github.com:bytedance/flowgram.ai.git.
3. Installation des dépendances: :
   • Allez dans le dossier :cd flowgram.ai.
   • Mise à jour des dépendances :rush update.
4. Construire le projet: :
   • La course à pied :rush build.
5. Exécuter la démo: :
   • Documentation :rush dev:docs.
   • Démonstration de la mise en page fixe :rush dev:demo-fixed-layout.
   • Démonstration gratuite des connexions :rush dev:demo-free-layout.
6. Accès par un navigateur http://localhost(Port confirmé par le journal).

Installation rapide via npx

• La course à pied :npx @flowgram.ai/create-app@latest.
• Sélectionnez Démo :
  • fixed-layoutLes meilleures pratiques en matière de mise en page fixe : Fixed Layout Best Practices.
  • free-layout: Meilleures pratiques en matière de mise en page libre.
  • fixed-layout-simpleLe format de l'écran est le suivant : Fixed Layout Basic Usage.
  • free-layout-simple: Mise en page libre Utilisation de base.

Installation de modules via npm

• Correction de l'éditeur de mise en page :npm install @flowgram.ai/fixed-layout-editor.
• Freelink Editor :npm install @flowgram.ai/free-layout-editor.

Principales fonctions

Création de flux de travail

• En entrant dans l'interface d'édition, la barre d'outils de gauche affiche le type de nœud (par exemple, conditionnel, cyclique).
• Faites glisser le nœud sur le canevas et double-cliquez sur l'entrée, par exemple "Start".
• Reliez les nœuds à l'aide de flèches pour terminer le processus.

Mode de présentation fixe

• Ouvrez la démo de mise en page fixe ou exécutez fixed-layout.
• La position du nœud est fixe et permet de glisser et de déposer le nœud à la position spécifiée.
• Des branches et des boucles peuvent être ajoutées, et le panneau de droite permet d'ajuster le style.

mode fil libre

• Ouvrez le Free Link Demo ou exécutez free-layout.
• Les nœuds peuvent être placés arbitrairement et les lignes de connexion sont tracées librement.
• Prend en charge les fonctions de collationnement automatique et d'alignement par adsorption.

fonction interactive

• Zoom GlisserZoom à deux doigts sur le pavé tactile du Mac, et appuyez sur la touche espace pour faire glisser la toile.
• transition animéeLes lignes changent doucement lorsque les nœuds se déplacent.
• annuler: Opérer avec Ctrl+Z et Ctrl+Y.
• copier-collerNœuds de la boîte, Ctrl+C copier, Ctrl+V coller.

Fonctions vedettes

conception à double mode

La mise en page fixe convient aux processus structurés, tels que la planification de projets, avec des positions de nœuds fixes et la prise en charge de la ramification et de l'effondrement. La liaison libre est adaptée à une conception flexible, telle qu'une carte heuristique, la position des nœuds étant arbitraire, la liaison est libre.

Permettre l'IA

Flowgram.ai prévoit d'introduire des fonctions d'IA telles que l'optimisation automatique des voies d'écoulement. Il est actuellement en cours de développement, alors gardez un œil sur GitHub pour plus de détails.

Soutien à l'Open Source

Les développeurs peuvent modifier le code. Par exemple, pour ajouter un nouveau type de nœud, il suffit de modifier le fichier @flowgram.ai/free-layout-editor et le soumettre.

mise en garde

• La démo en ligne ne permet pas l'enregistrement, vous devez l'installer localement pour en découvrir toutes les fonctionnalités.
• La première installation de la dépendance nécessite une connexion internet et peut être lente.
• Documentation officielle (https://flowgram.ai/) est continuellement mis à jour, se référer à GitHub pour plus de détails. README.md.

Grâce à ces étapes, vous pouvez rapidement créer un flux de travail avec Flowgram.ai.

scénario d'application

1. gestion de projet
   Concevoir le flux des tâches à l'aide d'un schéma fixe qui montre clairement les étapes et la division du travail.
2. développement de logiciels
   Dessinez un organigramme du code en utilisant des lignes à connexion libre pour marquer le flux de données.
3. Démonstration d'enseignement
   L'enseignant explique les concepts à l'aide d'un flux de travail basé sur les nœuds, exporté et partagé avec les étudiants.

QA

1. Flowgram.ai est-il gratuit ?
   Oui, il s'agit d'un projet open source, le code est libre d'utilisation et les fonctionnalités doivent être déployées de manière autonome.
2. Prend-il en charge le chinois ?
   Le contenu du nœud prend en charge la saisie en chinois et l'interface est en anglais.
3. Comment sauvegarder un flux de travail ?
   La démo en ligne ne peut pas être sauvegardée, la version locale peut exporter une image ou un code.