FlowGram en pratique : le moteur d'orchestration de workflows open source de ByteDance pour créer des workflows IA visuels

ByteDance a enfin open sourcé le moteur de workflows de Coze

En février 2025, ByteDance a publié sur GitHub FlowGram — un framework de développement de workflows visuels basé sur React. En août 2026, ce projet a accumulé 8 300+ étoiles et 765 forks, devenant l'une des contributions open source les plus importantes de ByteDance dans le domaine des workflows IA.

FlowGram n'est pas une plateforme de workflows clé en main (comme n8n ou Dify), mais plutôt un framework qui vous aide à construire une plateforme de workflows. Il fournit toutes les capacités de bas niveau nécessaires pour créer des workflows visuels : moteur de canevas, formulaires de nœuds, chaîne de portée des variables, ainsi que des composants matériels prêts à l'emploi (LLM, branchements conditionnels, éditeur de code, etc.).

En résumé : si vous voulez créer un éditeur de workflows similaire à Coze, FlowGram est le scaffolding qui vous permet de le réaliser rapidement.

De Coze à FlowGram : du produit au moteur

Pour comprendre le positionnement de FlowGram, il faut d'abord connaître ses origines.

Coze de ByteDance est une plateforme de création de bots IA destinée au grand public, dont l'une des capacités principales est l'orchestration visuelle de workflows — les utilisateurs peuvent construire des flux de traitement IA complexes en glissant-déposant des nœuds et en les connectant. Cet éditeur de workflows a été validé à grande échelle au sein de Coze, servant des millions d'utilisateurs.

FlowGram est précisément la couche moteur extraite de ce produit de niveau production. ByteDance a open sourcé le framework frontend de l'éditeur de workflows de Coze, mais en a retiré la logique métier et les services backend. Cela signifie :

• Coze = Moteur FlowGram + backend métier + interface utilisateur
• FlowGram = framework de workflows purement frontend (vous devez connecter votre propre backend)

Cette relation est similaire à la différence entre Dify et FlowGram : Dify est une plateforme fullstack, FlowGram est un moteur frontend. Choisir FlowGram signifie que vous avez un contrôle total — backend personnalisé, modèle de données personnalisé, déploiement personnalisé.

Fonctionnalités clés : double mode de mise en page et quatre moteurs

Mise en page libre vs mise en page fixe

La fonctionnalité la plus distinctive de FlowGram est le support simultané de deux modes de mise en page de canevas.

Mise en page libre (Free Layout) : - Les nœuds peuvent être placés librement sur le canevas - Les nœuds sont connectés par des courbes libres - Support du zoom, du panoramique et de la navigation par mini-carte - Adapté aux workflows complexes et non structurés

Mise en page fixe (Fixed Layout) : - Les nœuds sont automatiquement disposés et glissés à des positions spécifiées - Support des nœuds composites (branchements, boucles) - Adapté aux flux avec une structure hiérarchique claire

Les deux modes de mise en page peuvent coexister dans un même projet, ce qui est rare parmi les frameworks similaires.

Les quatre moteurs principaux

L'architecture de FlowGram est composée de quatre moteurs indépendants :

1. Moteur de canevas (Canvas Engine) Rendu de canevas haute performance basé sur React, supportant des interactions fluides avec des milliers de nœuds. Intègre annuler/refaire, raccourcis clavier, boîte de sélection et autres fonctionnalités d'édition.

2. Moteur de formulaires (Form Engine) Chaque nœud nécessite des paramètres de configuration. Le moteur de formulaires fait le rendu dynamique de panneaux de configuration basés sur JSON Schema, avec des règles de validation et une logique de liaison intégrées, supportant l'extension par des composants personnalisés.

3. Moteur de variables (Variable Engine) Gestion du flux de données interne au workflow. Supporte la chaîne de portée (chaque nœud peut accéder aux variables de son parent), l'inférence de types et la vérification de structure, permettant de détecter les erreurs de flux de données dès la conception.

4. Moteur d'exécution (Runtime Engine) Moteur d'exécution du workflow, responsable de la planification des nœuds, du transfert de données, de la gestion des erreurs et du débogage par points d'arrêt. Supporte deux modes : exécution côté navigateur et exécution côté serveur.

Composants intégrés

FlowGram fournit un ensemble de composants de nœuds prêts à l'emploi :

Tous les composants sont enfichables — vous pouvez remplacer les composants intégrés et ajouter vos propres types de nœuds.

Architecture technique : conception modulaire et moteur d'exécution

L'architecture de FlowGram reflète l'expérience de ByteDance en ingénierie frontend à grande échelle. Le framework utilise une structure Monorepo, avec le code principal réparti en 8 packages :

packages/
├── canvas-engine/      # Rendu et interaction du canevas
├── node-engine/        # Gestion du cycle de vie des nœuds
├── variable-engine/    # Portée des variables et inférence de types
├── runtime/            # Moteur d'exécution de workflows
├── materials/          # Composants de nœuds intégrés
├── plugins/            # Système de plugins
├── client/             # SDK client
└── common/             # Utilitaires communs

Moteur de nœuds (Node Engine)

Chaque nœud est une machine à états indépendante, contenant : - Ports d'entrée : réception des données amont - Panneau de configuration : paramètres définis par l'utilisateur - Ports de sortie : transmission des résultats en aval - Logique d'exécution : fonction de traitement principale du nœud

Les nœuds forment un DAG (graphe acyclique orienté) via des connexions de ports, et le moteur d'exécution les exécute dans l'ordre topologique.

Chaîne de portée des variables

C'est l'innovation principale de FlowGram. Chaque nœud possède sa propre portée de variables, formant un arbre de portées :

Nœud Start
├── Variable: userInput (string)
└── Nœud LLM
    ├── Variable: prompt (string, référence userInput)
    └── Nœud Code
        └── Variable: result (object, référence prompt)

Les nœuds enfants peuvent accéder aux variables des nœuds parents, mais pas l'inverse. Cette conception évite la pollution des variables et rend le flux de données plus clair.

Modes d'exécution du runtime

FlowGram supporte deux modes d'exécution :

Exécution côté navigateur : - Adapté aux workflows légers - Pas besoin de backend, exécution purement frontend - Limitation : pas d'accès au système de fichiers, aux bases de données ou autres ressources backend

Exécution côté serveur : - Adapté aux workflows de niveau production - Nécessite le déploiement d'un service runtime - Supporte les nœuds asynchrones et les tâches de longue durée

Le moteur d'exécution fournit des capacités de débogage par points d'arrêt — vous pouvez suspendre l'exécution à n'importe quel nœud, inspecter l'état des variables, puis continuer ou revenir en arrière.

FlowGram vs n8n vs Dify vs Node-RED : comparaison horizontale des outils de workflow

Avant de choisir un outil de workflow, clarifiez vos besoins. Cette comparaison vous aide à vous positionner rapidement :

Différences clés :

• FlowGram est un framework, les trois autres sont des plateformes. Si vous voulez construire un produit de workflows similaire à Coze, choisissez FlowGram ; si vous voulez simplement utiliser un workflow pour automatiser des tâches, choisissez n8n ou Dify.
• La licence fair-code de n8n limite l'usage commercial (au-delà d'un certain seuil de revenus, une licence payante est requise), la licence MIT de FlowGram n'a pas cette restriction.
• Dify est spécialisé dans les applications IA, les workflows ne sont qu'une de ses fonctionnalités ; FlowGram est un moteur de workflows généraliste, l'IA n'étant qu'un de ses cas d'application.

Démarrage rapide : environnement de développement en 3 minutes

Préparation de l'environnement

# Node.js 18+ requis
node --version  # confirmer >= 18

# Créer un projet avec le scaffolding
npx @flowgram.ai/create-app@latest

Le scaffolding vous proposera de choisir un modèle :

? Choisir un modèle :
❯ Free Layout Demo ⭐️    # Mise en page libre (recommandé)
  Fixed Layout Demo       # Mise en page fixe
  Next.js + Ant Design    # Modèle production
  Vite + React            # Modèle léger

Lancer le projet

cd demo-free-layout
npm install
npm start

Ouvrez http://localhost:3000 dans votre navigateur, vous verrez une interface complète d'éditeur de workflows.

Structure du projet

demo-free-layout/
├── src/
│   ├── components/       # Composants UI
│   ├── nodes/            # Définitions de nœuds personnalisés
│   ├── plugins/          # Configuration des plugins
│   ├── editor.tsx        # Point d'entrée de l'éditeur
│   └── App.tsx           # Point d'entrée de l'application
├── package.json
└── tsconfig.json

Cas pratique : construire un workflow IA de génération de contenu

Utilisons FlowGram pour créer un vrai workflow IA : saisir un sujet → générer un plan → rédiger section par section → peaufiner → produire l'article.

Étape 1 : définir le workflow en JSON

FlowGram décrit les workflows sous forme JSON avec les nœuds et les connexions :

{
  "nodes": [
    {
      "id": "start",
      "type": "start",
      "data": {
        "outputs": {
          "topic": { "type": "string", "value": "Tendances de développement des agents IA" }
        }
      }
    },
    {
      "id": "outline",
      "type": "llm",
      "data": {
        "model": "gpt-4",
        "prompt": "Génère un plan d'article pour le sujet suivant, retourne un tableau JSON : {{start.topic}}",
        "temperature": 0.7
      }
    },
    {
      "id": "write_loop",
      "type": "loop",
      "data": {
        "array": "{{outline.output.sections}}",
        "itemVar": "section"
      },
      "children": [
        {
          "id": "write_section",
          "type": "llm",
          "data": {
            "model": "gpt-4",
            "prompt": "Rédige un contenu détaillé selon le plan {{loop.section}}, sujet : {{start.topic}}",
            "temperature": 0.5
          }
        }
      ]
    },
    {
      "id": "polish",
      "type": "llm",
      "data": {
        "model": "gpt-4",
        "prompt": "Peaufine le contenu de l'article suivant, améliore l'expression et la cohérence : {{write_loop.output}}",
        "temperature": 0.3
      }
    },
    {
      "id": "end",
      "type": "end",
      "data": {
        "outputs": {
          "article": "{{polish.output}}"
        }
      }
    }
  ],
  "edges": [
    { "source": "start", "target": "outline" },
    { "source": "outline", "target": "write_loop" },
    { "source": "write_loop", "target": "polish" },
    { "source": "polish", "target": "end" }
  ]
}

Étape 2 : charger dans l'éditeur

import { FlowGramEditor } from '@flowgram.ai/editor';

function App() {
  return (
    <FlowGramEditor
      initialWorkflow={workflowJson}
      layout="free"
      onExecute={async (nodeId, inputs) => {
        // Logique d'exécution personnalisée
        if (nodeId === 'outline') {
          const response = await fetch('/api/llm', {
            method: 'POST',
            body: JSON.stringify(inputs)
          });
          return response.json();
        }
      }}
    />
  );
}

Étape 3 : implémenter le backend d'exécution

L'éditeur frontend de FlowGram gère l'affichage visuel, mais l'exécution réelle nécessite votre propre logique backend :

// runtime/executor.ts
import { WorkflowRuntime } from '@flowgram.ai/runtime';

const runtime = new WorkflowRuntime({
  // Enregistrer des exécuteurs de nœuds personnalisés
  executors: {
    llm: async (node, inputs) => {
      const { model, prompt, temperature } = node.data;
      const response = await openai.chat.completions.create({
        model,
        messages: [{ role: 'user', content: prompt }],
        temperature,
      });
      return { output: response.choices[0].message.content };
    },
    code: async (node, inputs) => {
      const { language, code } = node.data;
      // Exécuter le code utilisateur en sécurité (utiliser un sandbox en production)
      const fn = new Function('inputs', code);
      return fn(inputs);
    },
    http: async (node, inputs) => {
      const { url, method, headers } = node.data;
      const response = await fetch(url, { method, headers });
      return response.json();
    },
  },
});

// Exécuter le workflow
const result = await runtime.execute(workflowJson, {
  topic: 'Tendances de développement des agents IA'
});
console.log(result.article);

Intégration : intégrer dans votre application React

La plus grande valeur de FlowGram réside dans son intégrabilité. Vous pouvez l'intégrer dans n'importe quelle application React, sans être obligé d'utiliser une plateforme de workflows indépendante.

Intégration de base

import { FlowGramEditor } from '@flowgram.ai/editor';
import '@flowgram.ai/editor/dist/style.css';

function WorkflowBuilder() {
  const [workflow, setWorkflow] = useState(initialWorkflow);

  return (
    <div style={{ height: '100vh' }}>
      <FlowGramEditor
        workflow={workflow}
        onChange={setWorkflow}
        layout="free"
        // Panneaux de nœuds personnalisés
        nodePanels={{
          myCustomNode: MyCustomNodePanel,
        }}
        // Barre d'outils personnalisée
        toolbar={[
          'undo', 'redo', '|',
          'zoomIn', 'zoomOut', 'fitView', '|',
          'execute', 'save',
        ]}
      />
    </div>
  );
}

Types de nœuds personnalisés

Créez vos propres types de nœuds pour étendre les capacités du workflow :

// nodes/DatabaseQueryNode.ts
import { defineNode } from '@flowgram.ai/node-engine';

export const DatabaseQueryNode = defineNode({
  type: 'database-query',
  label: 'Requête base de données',
  icon: 'database',
  // Définition des ports d'entrée
  inputs: {
    sql: { type: 'string', label: 'Requête SQL' },
    params: { type: 'object', label: 'Paramètres' },
  },
  // Définition des ports de sortie
  outputs: {
    rows: { type: 'array', label: 'Résultats' },
    count: { type: 'number', label: 'Nombre de lignes' },
  },
  // Formulaire de configuration
  form: {
    fields: [
      {
        key: 'database',
        type: 'select',
        label: 'Base de données',
        options: ['mysql', 'postgresql', 'sqlite'],
      },
      {
        key: 'timeout',
        type: 'number',
        label: 'Délai d\'attente (ms)',
        default: 5000,
      },
    ],
  },
  // Logique d'exécution
  execute: async (inputs, config) => {
    const { sql, params } = inputs;
    const { database, timeout } = config;
    const result = await queryDatabase(database, sql, params, timeout);
    return {
      rows: result.rows,
      count: result.rows.length,
    };
  },
});

Intégration avec Next.js

FlowGram fournit un exemple officiel pour Next.js (demo-nextjs), supportant le SSR et les API Routes :

// pages/api/execute-workflow.ts
import { WorkflowRuntime } from '@flowgram.ai/runtime';
import type { NextApiRequest, NextApiResponse } from 'next';

const runtime = new WorkflowRuntime({
  executors: {
    // Enregistrer tous les exécuteurs de nœuds
    llm: async (node, inputs) => { /* ... */ },
    'database-query': async (node, inputs) => { /* ... */ },
  },
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { workflow, inputValues } = req.body;
  const result = await runtime.execute(workflow, inputValues);
  res.json({ success: true, data: result });
}

Cas d'usage

FlowGram est particulièrement adapté aux scénarios suivants :

1. Construire un produit de workflows IA

Si vous voulez créer une plateforme de workflows similaire à Coze ou Dify, FlowGram fournit un moteur frontend prêt à l'emploi. Vous devez seulement : - Concevoir votre propre API backend - Implémenter la logique d'exécution des nœuds - Personnaliser le thème UI

Cas réel : Coze Studio (version open source de Coze) est construit sur FlowGram.

2. Plateforme d'automatisation interne

Les entreprises ont souvent divers flux d'approbation et de traitement de données. Avec FlowGram, vous pouvez construire une plateforme de configuration de flux visuelle permettant aux métiers de configurer des processus automatisés par glisser-déposer, sans intervention des développeurs.

3. Orchestration d'agents IA

La collaboration entre plusieurs agents IA peut être exprimée sous forme de workflow. Chaque agent est un nœud, et les échanges de données entre agents sont définis par les connexions. La chaîne de portée des variables de FlowGram est particulièrement adaptée à la gestion du transfert de contexte entre agents.

4. Pipeline de traitement de données

Les processus ETL, les pipelines de nettoyage de données, la génération de rapports et autres scénarios peuvent être construits visuellement avec FlowGram. Chaque étape de traitement est un nœud, les données circulant entre les nœuds.

5. Module de workflow pour plateformes low-code

Si vous développez une plateforme low-code/no-code, l'orchestration de workflows est l'une des fonctionnalités principales. FlowGram peut être directement intégré à votre plateforme en tant que module de workflows.

Limitations et points d'attention

Limitations actuelles

1. Framework purement frontend, sans backend

FlowGram ne fournit que le canevas et l'éditeur frontend, sans service backend. Vous devez implémenter vous-même : - La persistance des workflows (stockage en base de données) - Le moteur d'exécution des nœuds (exécution côté serveur) - L'authentification et les permissions utilisateur - Les interfaces API

Cela représente une charge de travail non négligeable pour les petites équipes.

2. Liaison à React

FlowGram est profondément lié à React et ne peut pas être utilisé dans des projets Vue, Angular ou Svelte. Si votre stack technique n'est pas React, vous devrez évaluer le coût de migration.

3. Documentation encore en cours d'amélioration

Bien que les fonctionnalités principales soient documentées, certaines fonctionnalités avancées (plugins personnalisés, types de variables complexes) manquent encore de documentation détaillée et nécessitent la lecture du code source.

4. Écosystème communautaire encore jeune

Comparé à n8n (59k étoiles) et Dify (67k étoiles), la communauté de FlowGram est encore réduite. Les composants tiers, tutoriels et exemples sont relativement limités.

Recommandations pour la production

• Exécutez le code dans un sandbox : le code soumis par les utilisateurs doit s'exécuter dans un environnement sécurisé pour éviter tout impact malveillant sur le serveur
• Chargez les grands workflows par pagination : pour les workflows de plus de 500 nœuds, un rendu paginé est recommandé pour éviter les ralentissements du canevas
• Gestion de versions : le JSON des workflows devrait avoir un contrôle de version avec support du rollback
• Journaux d'exécution : enregistrez les entrées/sorties de chaque exécution de nœud pour faciliter le débogage

Questions fréquentes (FAQ)

Quelle est la relation entre FlowGram et Coze ?

FlowGram est la version open source du moteur frontend de l'éditeur de workflows de Coze. Coze = FlowGram + service backend + interface utilisateur. FlowGram fournit les capacités de bas niveau (canevas, nœuds, variables, etc.), vous devez implémenter vous-même la logique backend.

FlowGram peut-il être utilisé directement comme plateforme de workflows ?

Non, pas directement. FlowGram est un framework de développement, pas une plateforme clé en main. Vous devez développer votre propre application de workflows par-dessus, en implémentant le moteur d'exécution backend et la persistance des données. Si vous voulez utiliser directement une plateforme de workflows, nous recommandons n8n ou Dify.

Quels frameworks frontend FlowGram supporte-t-il ?

Actuellement, seul React est supporté. Le moteur de canevas, les composants de nœuds et le système de formulaires de FlowGram sont tous construits sur React. Vue, Angular et autres frameworks ne sont pas encore supportés.

Comment personnaliser les types de nœuds ?

Via l'API defineNode, vous définissez le type de nœud, les ports d'entrée/sortie, le formulaire de configuration et la logique d'exécution. Les nœuds personnalisés peuvent être empaquetés en plugins et publiés pour d'autres projets. Voir le chapitre Materials de la documentation officielle.

Les workflows FlowGram peuvent-ils être exportés/importés ?

Oui. Les workflows sont décrits au format JSON, supportant la sérialisation et la désérialisation. Vous pouvez stocker le JSON des workflows en base de données ou l'exporter en fichier pour le partager. Pour l'import, il suffit de passer le JSON à la propriété workflow de l'éditeur.

Conclusion et évaluation

FlowGram est une contribution open source majeure de ByteDance dans le domaine des workflows IA. Il ouvre à la communauté le moteur de workflows de niveau production de Coze, permettant aux développeurs de construire rapidement leurs propres produits de workflows visuels.

Points forts : - Double mode de mise en page (libre + fixe) flexible et puissant - Conception élégante de la chaîne de portée des variables, flux de données clair - Licence MIT, favorable à l'usage commercial - Validation en production issue de Coze, qualité de code élevée - Composants IA intégrés : LLM, conditions, code, etc.

Points faibles : - Framework purement frontend, le backend doit être implémenté soi-même - Supporte uniquement React - Écosystème communautaire encore jeune - Documentation incomplète sur certaines fonctionnalités avancées

Pour qui : - Équipes construisant un produit de workflows - Développeurs d'applications IA ayant besoin de capacités d'orchestration visuelle - Équipes techniques souhaitant construire une plateforme d'automatisation interne

Pas pour qui : - Utilisateurs individuels voulant simplement automatiser des tâches avec un workflow (recommandez n8n) - Équipes utilisant une stack technique autre que React - Ceux qui ont besoin d'une plateforme IA fullstack clé en main (recommandez Dify)

La valeur de FlowGram réside dans l'autonomisation — il ne remplace pas votre produit, il vous aide à le construire plus rapidement. Si vous travaillez sur un projet nécessitant de l'orchestration de workflows, FlowGram mérite une évaluation sérieuse.

Liens de référence : - Dépôt GitHub : bytedance/flowgram.ai - Documentation officielle : flowgram.ai - Démo en ligne : CodeSandbox | StackBlitz