FlowGram.AI: Eine Open-Source-Engine zur schnellen Erstellung nodaler Workflows

Allgemeine Einführung

Flowgram.ai ist eine von ByteDance entwickelte Open-Source-Engine zur Erstellung von Prozessen. Sie basiert auf der Bearbeitung von Knoten und hilft Entwicklern bei der schnellen Erstellung von Arbeitsabläufen, wobei sowohl ein festes Layout als auch der Freidrahtmodus unterstützt werden. Der in TypeScript geschriebene Code des Projekts wird auf GitHub gehostet, ist quelloffen und kostenlos und wurde zuletzt am 26. März 2025 aktualisiert. Flowgram.ai bietet eine intuitive Oberfläche und eine reibungslose interaktive Erfahrung für die Gestaltung visueller Workflows mit klaren Ein- und Ausgaben. Es ist auch geplant, KI-Funktionen einzubauen, um die Prozessintelligenz zu verbessern. Nutzer können die Software online über die offizielle Demo testen oder lokal installieren.

Funktionsliste

• Knoten-EditorZiehen und Ablegen von Knoten und Verbindungen zur schnellen Erstellung von Arbeitsabläufen.
• Unterstützung des DualmodusBietet sowohl die Bearbeitung mit festem Layout als auch mit freien Links.
• interaktives ErlebnisUnterstützt animierte Übergänge, Gesten-Zooming, Rückgängig-Wiederherstellen, etc.
• KI-PotenzialKI: Plan zur Integration von KI zur Verbesserung der Prozessintelligenzanalyse.
• Open-Source-ErweiterungenOffenlegung des Codes und Unterstützung für die Anpassung durch Entwickler.
• Export-OptionenWorkflows können als Bilder oder Code exportiert werden.

Hilfe verwenden

Flowgram.ai ist ein Entwickler-Tool, das Benutzer über eine Online-Demo ausprobieren oder lokal installieren und ausführen können. Im Folgenden finden Sie eine ausführliche Anleitung zur Verwendung des Tools.

Wie man anfängt

Flowgram.ai bietet zwei Möglichkeiten zur Nutzung: Online-Demo und lokale Installation.

Online-Erfahrung

1. Öffnen Sie Ihren Browser und besuchen Sie die offizielle Demo:
   • Festes Layout:https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html
   • Freie Verbindungen:https://flowgram.ai/examples/free-layout/free-feature-overview.html
2. Sie können direkt auf der Leinwand arbeiten, sobald Sie sie betreten haben, es ist keine Installation erforderlich.

lokale Installation

1. Vorbereiten der Umgebung::
   • Installieren Sie Node.js 18+ und führen Sie es aus:nvm install lts/hydrogenlegen Sie die Standardversion fest:nvm alias default lts/hydrogenUmschalten:nvm use lts/hydrogen.
   • Installieren Sie globale Abhängigkeiten:npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0.
2. Klon-Lager::
   • Laufen:git clone git@github.com:bytedance/flowgram.ai.git.
3. Installation von Abhängigkeiten::
   • Rufen Sie den Ordner auf:cd flowgram.ai.
   • Aktualisieren Sie die Abhängigkeiten:rush update.
4. Erstellen Sie das Projekt::
   • Laufen:rush build.
5. Führen Sie die Demo aus::
   • Dokumentation:rush dev:docs.
   • Demo mit festem Layout:rush dev:demo-fixed-layout.
   • Kostenlose Demo von Connections:rush dev:demo-free-layout.
6. Zugriff über einen Browser http://localhost(Port durch Protokoll bestätigt).

Schnelle Installation über npx

• Laufen:npx @flowgram.ai/create-app@latest.
• Wählen Sie Demo:
  • fixed-layout: Bewährte Praktiken für ein festes Layout.
  • free-layoutFree Layout Best Practices.
  • fixed-layout-simple: Festes Layout Grundlegende Verwendung.
  • free-layout-simple: Freies Layout Grundlegende Verwendung.

Installation von Modulen über npm

• Layout-Editor korrigiert:npm install @flowgram.ai/fixed-layout-editor.
• Freelink Editor:npm install @flowgram.ai/free-layout-editor.

Hauptfunktionen

Arbeitsabläufe erstellen

• Beim Betreten der Bearbeitungsoberfläche zeigt die linke Symbolleiste die Knotentypen an (z. B. bedingt, zyklisch).
• Ziehen Sie den Knoten auf die Leinwand und doppelklicken Sie auf den Eingang, z.B. "Start".
• Verbinden Sie die Knoten mit Pfeilen, um den Vorgang abzuschließen.

Fester Layout-Modus

• Öffnen Sie die Fixed Layout Demo oder führen Sie fixed-layout.
• Die Position des Knotens ist festgelegt und kann durch Ziehen und Ablegen an die angegebene Position verschoben werden.
• Zweige und Schleifen können hinzugefügt werden, und mit dem rechten Bedienfeld lässt sich der Stil anpassen.

Freewire-Modus

• Öffnen Sie die Free Link Demo oder führen Sie free-layout.
• Die Knoten können beliebig platziert werden und die Verbindungslinien werden frei gezeichnet.
• Unterstützt automatische Sortier- und Adsorptionsausrichtungsfunktionen.

interaktive Funktion

• Zoom Ziehen: Zoomen Sie mit zwei Fingern auf einem Mac-Trackpad und drücken Sie die Leertaste, um die Leinwand zu ziehen.
• bewegter ÜbergangDie Linie ändert sich gleichmäßig, wenn sich der Knoten bewegt.
• rückgängig machenBedienung mit Strg+Z und Strg+Y.
• Kopieren und EinfügenBox-Knoten, Strg+C kopieren, Strg+V einfügen.

Ausgewählte Funktionen

Dual-Mode-Design

Festes Layout eignet sich für strukturierte Prozesse, wie z. B. Projektplanung, mit festen Knotenpositionen und Unterstützung für Verzweigungen und Kollabieren. Freie Verknüpfung eignet sich für flexibles Design, wie z. B. Mind Map, Knotenposition ist beliebig, freie Verknüpfung.

AI Ermöglichung

Flowgram.ai plant die Einführung von KI-Funktionen wie die automatische Optimierung von Fließwegen. Es befindet sich derzeit in der Entwicklung, also halten Sie ein Auge auf GitHub für Details.

Open-Source-Unterstützung

Entwickler können den Code ändern. Um zum Beispiel einen neuen Knotentyp hinzuzufügen, bearbeiten Sie einfach die @flowgram.ai/free-layout-editor Paket und reichen es ein.

caveat

• Die Online-Demo unterstützt das Speichern nicht, Sie müssen sie lokal installieren, um den vollen Funktionsumfang zu erleben.
• Die Erstinstallation der Abhängigkeit erfordert eine Internetverbindung und kann langsam sein.
• Offizielle Dokumentation (https://flowgram.ai/) wird laufend aktualisiert, Details finden Sie auf GitHub. README.md.

Mit diesen Schritten können Sie schnell einen Workflow mit Flowgram.ai erstellen.

Anwendungsszenario

1. Projektleitung
   Entwerfen Sie den Aufgabenablauf mit einem festen Layout, aus dem die Schritte und die Arbeitsteilung klar hervorgehen.
2. Software-Entwicklung
   Zeichnen Sie ein Flussdiagramm des Codes, indem Sie freie Linien verwenden, um den Datenfluss zu markieren.
3. Demonstration der Lehre
   Der Lehrer erklärt die Konzepte anhand eines knotenbasierten Arbeitsablaufs, der exportiert und für die Schüler freigegeben wird.

QA

1. Ist Flowgram.ai kostenlos?
   Ja, es handelt sich um ein Open-Source-Projekt, der Code kann frei verwendet werden, und die Funktionen müssen eigenständig implementiert werden.
2. Unterstützt es Chinesisch?
   Der Inhalt des Knotens unterstützt chinesische Eingaben und die Benutzeroberfläche ist in Englisch.
3. Wie kann ich einen Arbeitsablauf speichern?
   Die Online-Demo kann nicht gespeichert werden, die lokale Version kann Bilder oder Codes exportieren.