FlowGram im Praxistest: ByteDances Open-Source-Workflow-Engine für visuelle KI-Workflows

ByteDance hat die Workflow-Engine von Coze endlich als Open Source veröffentlicht

Im Februar 2025 hat ByteDance FlowGram auf GitHub veröffentlicht – ein React-basiertes Framework für die Entwicklung visueller Workflows. Bis August 2026 hat das Projekt bereits 8.300+ Stars und 765 Forks gesammelt und ist damit einer der wichtigsten Open-Source-Beiträge von ByteDance im Bereich KI-Workflows.

FlowGram ist keine weitere fertige Workflow-Plattform (wie n8n oder Dify), sondern ein Framework, das beim Aufbau einer Workflow-Plattform hilft. Es bietet alle nötigen Grundfunktionen für den Aufbau visueller Workflows: Canvas-Engine, Knotenformulare, Variablen-Scope-Ketten und sofort einsetzbare Komponenten (LLM, Verzweigungen, Code-Editor usw.).

Kurz gesagt: Wenn du einen Workflow-Editor wie Coze bauen willst, ist FlowGram das Gerüst, das dir die schnelle Umsetzung ermöglicht.

Von Coze zu FlowGram: Vom Produkt zur Engine

Um die Positionierung von FlowGram zu verstehen, muss man seine Herkunft kennen.

ByteDances Coze ist eine AI-Bot-Plattform für Endanwender, deren Kernfunktion die visuelle Workflow-Orchestrierung ist. Benutzer können durch Ziehen von Knoten und Verbinden komplexer KI-Verarbeitungsabläufe erstellen. Dieser Workflow-Editor wurde intern bei Coze in großem Maßstab validiert und hat Millionen von Nutzern bedient.

FlowGram ist genau die Engine-Ebene, die aus diesem produktionsreifen Produkt extrahiert wurde. ByteDance hat das Frontend-Framework des Coze-Workflow-Editors als Open Source bereitgestellt, aber die Geschäftslogik und Backend-Services herausgelöst. Das bedeutet:

• Coze = FlowGram-Engine + Business-Backend + Benutzeroberfläche
• FlowGram = Reines Frontend-Workflow-Framework (Backend muss selbst angebunden werden)

Diese Beziehung ähnelt dem Unterschied zwischen Dify und FlowGram: Dify ist eine Full-Stack-Plattform, FlowGram ist eine Frontend-Engine. Wenn du dich für FlowGram entscheidest, hast du die volle Kontrolle – eigenes Backend, eigenes Datenmodell, eigene Bereitstellung.

Kernfunktionen: Dual-Layout-Modi und vier Engines

Free Layout vs. Fixed Layout

Das herausragendste Merkmal von FlowGram ist die gleichzeitige Unterstützung zweier Canvas-Layout-Modi.

Free Layout (Freies Layout): - Knoten können frei auf dem Canvas platziert werden - Verbindung über freie Kurven - Unterstützt Zoom, Pan und Minimap-Navigation - Ideal für komplexe, unstrukturierte Workflows

Fixed Layout (Festes Layout): - Knoten werden automatisch angeordnet und an definierte Positionen gezogen - Unterstützt komplexe Knoten (Verzweigungen, Schleifen) - Geeignet für Prozesse mit klarer Hierarchiestruktur

Beide Layouts können im selben Projekt koexistieren – das ist bei vergleichbaren Frameworks selten.

Die vier Kern-Engines

Die Architektur von FlowGram besteht aus vier unabhängigen Engines:

1. Canvas Engine React-basiertes, hochperformantes Canvas-Rendering mit flüssiger Interaktion für Tausende von Knoten. Integrierte Undo/Redo-Funktion, Tastenkürzel und Auswahlwerkzeuge.

2. Form Engine Jeder Knoten benötigt Konfigurationsparameter. Die Form Engine rendert dynamisch Konfigurationspanels auf Basis von JSON Schema, mit integrierten Validierungsregeln und Verknüpfungslogik sowie Unterstützung für benutzerdefinierte Komponentenerweiterungen.

3. Variable Engine Verwaltung des internen Datenflusses im Workflow. Unterstützt Scope-Ketten (jeder Knoten kann auf übergeordnete Variablen zugreifen), Typinferenz und Strukturprüfung – Datenflussfehler werden bereits zur Designzeit erkannt.

4. Runtime Engine Die Ausführungs-Engine für Workflows, zuständig für Knoten-Orchestrierung, Datenweitergabe, Fehlerbehandlung und Breakpoint-Debugging. Unterstützt sowohl browserseitige als auch serverseitige Ausführung.

Integrierte Komponenten

FlowGram bietet eine Reihe sofort einsetzbarer Knotenkomponenten:

Alle Komponenten sind austauschbar – du kannst die integrierten ersetzen oder eigene Knotentypen hinzufügen.

Technische Architektur: Modulares Design und Ausführungs-Engine

Die Architektur von FlowGram spiegelt ByteDances Erfahrung mit groß angelegter Frontend-Entwicklung wider. Das gesamte Framework nutzt eine Monorepo-Struktur mit 8 Kernpaketen:

packages/
├── canvas-engine/      # Canvas-Rendering und Interaktion
├── node-engine/        # Knoten-Lebenszyklusverwaltung
├── variable-engine/    # Variablen-Scope und Typinferenz
├── runtime/            # Workflow-Ausführungs-Engine
├── materials/          # Integrierte Knotenkomponenten
├── plugins/            # Plugin-System
├── client/             # Client-SDK
└── common/             # Gemeinsame Hilfsfunktionen

Node Engine

Jeder Knoten ist eine eigenständige Zustandsmaschine mit: - Eingabeports: Empfangen von Daten aus vorgelagerten Knoten - Konfigurationspanel: Vom Benutzer festgelegte Parameter - Ausgabeports: Weitergabe der Ergebnisse an nachgelagerte Knoten - Ausführungslogik: Die Kernverarbeitungsfunktion des Knotens

Knoten bilden über Port-Verbindungen einen DAG (gerichteten azyklischen Graphen), und die Runtime Engine führt sie in topologischer Reihenfolge aus.

Variablen-Scope-Kette

Dies ist die Kerninnovation von FlowGram. Jeder Knoten hat seinen eigenen Variablen-Scope, die zusammen einen Scope-Baum bilden:

Start-Knoten
├── Variable: userInput (string)
└── LLM-Knoten
    ├── Variable: prompt (string, referenziert userInput)
    └── Code-Knoten
        └── Variable: result (object, referenziert prompt)

Untergeordnete Knoten können auf die Variablen übergeordneter Knoten zugreifen, aber nicht umgekehrt. Dieses Design verhindert Variablenkonflikte und macht den Datenfluss übersichtlicher.

Runtime-Ausführungsmodi

FlowGram unterstützt zwei Ausführungsmodi:

Browserseitige Ausführung: - Geeignet für leichtgewichtige Workflows - Kein Backend-Server nötig, rein clientseitig - Einschränkung: Kein Zugriff auf Dateisystem, Datenbank oder andere Backend-Ressourcen

Serverseitige Ausführung: - Geeignet für produktionsreife Workflows - Erfordert Bereitstellung eines Runtime-Services - Unterstützt asynchrone Knoten und langlaufende Aufgaben

Die Runtime Engine bietet Breakpoint-Debugging – du kannst die Ausführung an jedem Knoten anhalten, Variablenzustände prüfen und dann fortfahren oder zurücksetzen.

FlowGram vs. n8n vs. Dify vs. Node-RED: Workflow-Tools im Vergleich

Bevor du dich für ein Workflow-Tool entscheidest, solltest du deine Anforderungen klären. Der folgende Vergleich hilft bei der Orientierung:

Wesentliche Unterschiede:

• FlowGram ist ein Framework, die anderen drei sind Plattformen. Wenn du ein Workflow-Produkt wie Coze bauen willst, wähle FlowGram; wenn du einfach Workflows zur Automatisierung nutzen möchtest, wähle n8n oder Dify.
• n8ns fair-code-Lizenz schränkt die kommerzielle Nutzung ein (ab einem bestimmten Umsatz ist eine Lizenzgebühr fällig). FlowGrams MIT-Lizenz hat diese Einschränkung nicht.
• Dify ist auf KI-Anwendungen spezialisiert, Workflows sind nur eine von mehreren Funktionen. FlowGram ist eine allgemeine Workflow-Engine, bei der KI nur eines der Anwendungsszenarien ist.

Schnellstart: Entwicklungsumgebung in 3 Minuten

Voraussetzungen

# Node.js 18+ erforderlich
node --version  # Bestätigen >= 18

# Projekt mit脚手架 erstellen
npx @flowgram.ai/create-app@latest

Der Generator fragt nach dem Template:

? Template auswählen:
❯ Free Layout Demo ⭐️    # Freies Layout (empfohlen)
  Fixed Layout Demo       # Festes Layout
  Next.js + Ant Design    # Produktionstemplate
  Vite + React            # Leichtgewichtiges Template

Projekt starten

cd demo-free-layout
npm install
npm start

Im Browser unter http://localhost:3000 siehst du eine vollständige Workflow-Editor-Oberfläche.

Projektstruktur

demo-free-layout/
├── src/
│   ├── components/       # UI-Komponenten
│   ├── nodes/            # Eigene Knotendefinitionen
│   ├── plugins/          # Plugin-Konfiguration
│   ├── editor.tsx        # Editor-Einstiegspunkt
│   └── App.tsx           # Anwendungs-Einstiegspunkt
├── package.json
└── tsconfig.json

Praxis: KI-Content-Workflow aufbauen

Bauen wir mit FlowGram einen echten KI-Workflow: Thema eingeben → Gliederung generieren → Abschnittsweise schreiben → Überarbeiten → Artikel ausgeben.

Schritt 1: Workflow-JSON definieren

FlowGram beschreibt Workflows als JSON mit Knoten und Verbindungen:

{
  "nodes": [
    {
      "id": "start",
      "type": "start",
      "data": {
        "outputs": {
          "topic": { "type": "string", "value": "Trends bei KI-Agenten" }
        }
      }
    },
    {
      "id": "outline",
      "type": "llm",
      "data": {
        "model": "gpt-4",
        "prompt": "Erstelle eine Artikelgliederung für folgendes Thema als JSON-Array: {{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": "Schreibe detaillierten Inhalt basierend auf der Gliederung {{loop.section}}, Thema: {{start.topic}}",
            "temperature": 0.5
          }
        }
      ]
    },
    {
      "id": "polish",
      "type": "llm",
      "data": {
        "model": "gpt-4",
        "prompt": "Überarbeite den folgenden Artikeltext, verbessere Ausdruck und Kohärenz: {{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" }
  ]
}

Schritt 2: Im Editor laden

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

function App() {
  return (
    <FlowGramEditor
      initialWorkflow={workflowJson}
      layout="free"
      onExecute={async (nodeId, inputs) => {
        // Eigene Ausführungslogik
        if (nodeId === 'outline') {
          const response = await fetch('/api/llm', {
            method: 'POST',
            body: JSON.stringify(inputs)
          });
          return response.json();
        }
      }}
    />
  );
}

Schritt 3: Eigenes Ausführungs-Backend

Der Frontend-Editor von FlowGram ist für die visuelle Darstellung zuständig. Die tatsächliche Ausführung erfordert eine eigene Backend-Implementierung:

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

const runtime = new WorkflowRuntime({
  // Eigene Knoten-Executoren registrieren
  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;
      // Benutzercode sicher ausführen (in Produktion Sandbox verwenden)
      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();
    },
  },
});

// Workflow ausführen
const result = await runtime.execute(workflowJson, {
  topic: 'Trends bei KI-Agenten'
});
console.log(result.article);

Integration: Einbetten in deine React-Anwendung

Der größte Wert von FlowGram liegt in der Einbettbarkeit. Du kannst es in jede React-Anwendung integrieren, anstatt eine eigenständige Workflow-Plattform nutzen zu müssen.

Grundlegende Integration

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"
        // Eigene Knotenpanels
        nodePanels={{
          myCustomNode: MyCustomNodePanel,
        }}
        // Eigene Werkzeugleiste
        toolbar={[
          'undo', 'redo', '|',
          'zoomIn', 'zoomOut', 'fitView', '|',
          'execute', 'save',
        ]}
      />
    </div>
  );
}

Eigene Knotentypen

Erstelle deine eigenen Knotentypen, um die Workflow-Funktionen zu erweitern:

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

export const DatabaseQueryNode = defineNode({
  type: 'database-query',
  label: 'Datenbankabfrage',
  icon: 'database',
  // Eingabeport-Definition
  inputs: {
    sql: { type: 'string', label: 'SQL-Anweisung' },
    params: { type: 'object', label: 'Parameter' },
  },
  // Ausgabeport-Definition
  outputs: {
    rows: { type: 'array', label: 'Abfrageergebnis' },
    count: { type: 'number', label: 'Zeilenanzahl' },
  },
  // Konfigurationsformular
  form: {
    fields: [
      {
        key: 'database',
        type: 'select',
        label: 'Datenbank',
        options: ['mysql', 'postgresql', 'sqlite'],
      },
      {
        key: 'timeout',
        type: 'number',
        label: 'Timeout (ms)',
        default: 5000,
      },
    ],
  },
  // Ausführungslogik
  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,
    };
  },
});

Integration mit Next.js

FlowGram bietet ein offizielles Next.js-Beispiel (demo-nextjs) mit SSR- und API-Routes-Unterstützung:

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

const runtime = new WorkflowRuntime({
  executors: {
    // Alle Knoten-Executoren registrieren
    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 });
}

Einsatzszenarien

FlowGram eignet sich besonders für folgende Szenarien:

1. KI-Workflow-Produkte bauen

Wenn du eine Workflow-Plattform wie Coze oder Dify erstellen möchtest, bietet FlowGram eine fertige Frontend-Engine. Du musst nur: - Deine eigene Backend-API entwerfen - Knotenausführungslogik implementieren - UI-Theme anpassen

Reales Beispiel: Coze Studio (die Open-Source-Version von Coze) wurde auf Basis von FlowGram gebaut.

2. Interne Automatisierungsplattform

Unternehmen haben oft verschiedene Genehmigungs- und Datenverarbeitungsworkflows. Mit FlowGram lässt sich eine visuelle Prozesskonfigurationsplattform aufbauen, auf der Fachbereichsmitarbeiter durch Ziehen von Knoten Automatisierungsabläufe konfigurieren können – ohne Entwicklerunterstützung.

3. KI-Agenten-Orchestrierung

Die Zusammenarbeit mehrerer KI-Agenten lässt sich als Workflow abbilden. Jeder Agent ist ein Knoten, und der Datenaustausch zwischen den Agenten wird über Verbindungen definiert. FlowGrams Variablen-Scope-Kette eignet sich besonders gut für die Verwaltung des Kontextaustauschs zwischen Agenten.

4. Datenverarbeitungs-Pipelines

ETL-Prozesse, Datenbereinigungspipelines, Berichtsgenerierung und ähnliche Szenarien lassen sich mit FlowGram visuell aufbauen. Jeder Datenverarbeitungsschritt ist ein Knoten, und die Daten fließen zwischen den Knoten.

5. Workflow-Modul für Low-Code-Plattformen

Wenn du eine Low-Code/No-Code-Plattform entwickelst, ist die Workflow-Orchestrierung eine der Kernfunktionen. FlowGram kann direkt in deine Plattform eingebettet werden und als Workflow-Modul dienen.

Einschränkungen und Hinweise

Aktuelle Grenzen

1. Reines Frontend-Framework ohne Backend

FlowGram bietet nur die Frontend-Canvas und den Editor, keine Backend-Services. Du musst selbst implementieren: - Workflow-Persistenz (Speicherung in der Datenbank) - Knotenausführungs-Engine (serverseitig) - Benutzerauthentifizierung und Berechtigungen - API-Schnittstellen

Für kleine Teams ist das ein erheblicher Aufwand.

2. React-Bindung

FlowGram ist eng an React gebunden und kann nicht in Vue-, Angular- oder Svelte-Projekten verwendet werden. Wenn dein Tech-Stack nicht React ist, musst du die Migrationskosten abschätzen.

3. Dokumentation noch im Aufbau

Obwohl die Kernfunktionen dokumentiert sind, sind einige erweiterte Features (wie benutzerdefinierte Plugins, komplexe Variablentypen) noch nicht detailliert genug dokumentiert – hier hilft nur das Lesen des Quellcodes.

4. Community-Ökosystem noch in den Anfängen

Im Vergleich zu n8n (59k Stars) und Dify (67k Stars) ist FlowGrams Community noch relativ klein. Drittanbieter-Komponenten, Tutorials und Beispiele sind begrenzt verfügbar.

Empfehlungen für den Produktivbetrieb

• Code-Knoten in Sandbox ausführen: Benutzercode muss in einer sicheren Sandbox laufen, um bösartigen Code auf dem Server zu verhindern
• Große Workflows seitenweise laden: Workflows mit mehr als 500 Knoten sollten seitenweise gerendert werden, um Canvas-Trägheit zu vermeiden
• Versionsverwaltung: Workflow-JSONs sollten versioniert werden und Rollback unterstützen
• Ausführungsprotokolle: Eingaben/Ausgaben jedes Knotens bei jeder Ausführung protokollieren, um Probleme nachvollziehen zu können

Häufig gestellte Fragen (FAQ)

Wie steht FlowGram zu Coze in Beziehung?

FlowGram ist die Open-Source-Version der Frontend-Engine des Coze-Workflow-Editors. Coze = FlowGram + Backend-Services + Benutzeroberfläche. FlowGram bietet die Canvas-, Knoten- und Variablen-Grundfunktionen, die Backend-Logik muss selbst implementiert werden.

Kann FlowGram direkt als Workflow-Plattform genutzt werden?

Nicht direkt. FlowGram ist ein Entwicklungsframework, keine fertige Plattform. Du musst darauf aufbauend deine eigene Workflow-Anwendung entwickeln, inklusive Backend-Ausführungsengine und Datenpersistenz. Wenn du direkt eine Workflow-Plattform nutzen möchtest, empfehlen wir n8n oder Dify.

Welche Frontend-Frameworks unterstützt FlowGram?

Derzeit nur React. FlowGrams Canvas-Engine, Knotenkomponenten und Formularsystem basieren alle auf React. Vue, Angular und andere Frameworks werden derzeit nicht unterstützt.

Wie definiere ich eigene Knotentypen?

Über die defineNode-API definierst du den Knotentyp, Ein-/Ausgabeports, das Konfigurationsformular und die Ausführungslogik. Eigene Knoten können als Plugin verpackt und für andere Projekte veröffentlicht werden. Siehe die offizielle Dokumentation im Materials-Kapitel.

Können FlowGram-Workflows exportiert/importiert werden?

Ja. Workflows werden als JSON beschrieben und unterstützen Serialisierung und Deserialisierung. Du kannst Workflow-JSONs in der Datenbank speichern oder als Datei exportieren und teilen. Zum Import übergibst du einfach das JSON an die workflow-Eigenschaft des Editors.

Fazit und Bewertung

FlowGram ist ByteDances wichtiger Open-Source-Beitrag im Bereich KI-Workflows. Es stellt die produktionsreife Workflow-Engine von Coze der Community zur Verfügung und ermöglicht Entwicklern den schnellen Aufbau eigener visueller Workflow-Produkte.

Vorteile: - Dual-Layout-Modi (Free + Fixed) flexibel und leistungsstark - Durchdachte Variablen-Scope-Kette für klaren Datenfluss - MIT-Lizenz, kommerziell nutzbar - Produktionsreife Validierung aus Coze, hohe Codequalität - Integrierte LLM-, Bedingungs- und Code-KI-Komponenten

Nachteile: - Reines Frontend-Framework, Backend muss selbst implementiert werden - Nur React-Unterstützung - Community-Ökosystem noch in den Anfängen - Einige erweiterte Funktionen unzureichend dokumentiert

Geeignet für: - Teams, die Workflow-Produkte entwickeln - KI-Anwendungsentwickler, die visuelle Orchestrierung benötigen - Technikteams, die eine interne Automatisierungsplattform aufbauen wollen

Nicht geeignet für: - Einzelne Anwender, die einfach Workflows automatisieren wollen (empfohlen: n8n) - Teams mit Nicht-React-Tech-Stack - Die eine sofort einsatzbereite Full-Stack-KI-Plattform suchen (empfohlen: Dify)

Der Wert von FlowGram liegt in der Befähigung – es ersetzt dein Produkt nicht, sondern hilft dir, es schneller zu bauen. Wenn du an einem Projekt mit Workflow-Orchestrierung arbeitest, ist FlowGram eine sorgfältige Prüfung wert.

Referenzlinks: - GitHub-Repository: bytedance/flowgram.ai - Offizielle Dokumentation: flowgram.ai - Online-Demo: CodeSandbox | StackBlitz