JieGou hat schon immer mehrere Möglichkeiten angeboten, Workflows anzuzeigen: eine Schrittliste für schnelles Bearbeiten, ein Diagramm zum Verstehen der Struktur und eine DAG-Ansicht für die Ausführungsreihenfolge. Aber keine davon ließ Sie visuell bauen — Schritte auf einem Canvas anordnen, Verbindungen zwischen ihnen zeichnen und die räumlichen Beziehungen in Ihrer Automatisierung sehen.
Der neue visuelle Workflow-Canvas ändert das. Es ist ein vollständiger Drag-and-Drop SVG-Editor mit Zoom, Pan, Minimap, Snap-to-Grid und Live-Ausführungsvisualisierung.
Auf dem Canvas bauen
Der Canvas rendert jeden Workflow-Schritt als Knoten. Knoten sind farbcodiert nach Schritttyp — Recipe-Schritte, LLM-Schritte, Bedingungsverzweigungen, Schleifen, parallele Gruppen, Genehmigungsgates und mehr haben jeweils ihre eigene visuelle Identität.
Um eine Verbindung zwischen Schritten hinzuzufügen, ziehen Sie vom Ausgangsport eines Knotens (unten) zum Eingangsport eines anderen Knotens (oben). Eine blaue gestrichelte Vorschaulinie folgt Ihrem Cursor beim Ziehen, und gültige Ablageziele werden hervorgehoben, wenn Sie darüber schweben. Lassen Sie auf einem Port los, um die Kante zu erstellen. Kanten werden als glatte Bezier-Kurven zwischen verbundenen Knoten gerendert.
Knoten verschieben ist unkompliziert: Klicken und Ziehen. Knoten rasten auf einem 20-Pixel-Raster ein, sodass Layouts ohne manuelles Ausrichten sauber bleiben. Der Einrast-Schwellenwert beträgt 10 Pixel — nah genug an der Rasterlinie und der Knoten rastet ein, aber Sie haben immer noch die Freiheit, bei Bedarf präzise zu positionieren.
In großen Workflows navigieren
Kleine Workflows passen auf einen Bildschirm. Produktions-Workflows nicht. Der Canvas bietet mehrere Navigationswerkzeuge:
Zoom — Das Mausrad (mit Strg/Cmd) zoomt von 0,15x bis 2,5x, zentriert auf Ihre Cursorposition. Tastaturkürzel funktionieren ebenfalls: Cmd+0 setzt auf 1x zurück, Cmd+= zoomt ein, Cmd+- zoomt aus.
Pan — Scrollen Sie horizontal und vertikal mit Ihrem Trackpad oder Mausrad. Der Canvas bewegt sich flüssig unter den Knoten.
Minimap — Eine 200x140 Pixel Übersicht in der unteren rechten Ecke zeigt das vollständige Workflow-Layout mit einem weißen Rechteck, das Ihren aktuellen Viewport anzeigt. Klicken Sie irgendwo auf die Minimap, um sofort dorthin zu springen.
Alles auswählen — Cmd+A wählt jeden Knoten auf dem Canvas aus. Escape hebt die Auswahl auf und bricht jeden laufenden Drag ab.
Live-Ausführungsvisualisierung
Der Canvas ist nicht nur ein Builder — er ist ein Viewer für laufende Workflows.
Wenn ein Workflow ausgeführt wird, zeigt der Canvas den Ausführungsstatus in Echtzeit. Der aktive Schritt leuchtet. Abgeschlossene Schritte zeigen ihren Status. Fehlgeschlagene Schritte sind sofort sichtbar. Sie können beobachten, wie Ihre Automatisierung Schritt für Schritt durch den Graphen fließt, während sie läuft.
Für Schritte, die Claude oder andere LLMs verwenden, erscheint ein Reasoning-Overlay am unteren Rand des Canvas, wenn Sie einen laufenden Schritt auswählen. Es zeigt den Denkprozess des Modells — die Gedankenkette hinter der Ausgabe. Dies ist nützlich zum Debuggen von Prompts und zum Verstehen, warum die AI eine bestimmte Entscheidung getroffen hat.
Multi-Agent-Overlays
Für Workflows, die mehrere AI-Agenten verwenden — ein Koordinator, der an Spezialisten delegiert, eine Pipeline, die Arbeit zwischen rollenspezifischen Agenten weitergibt — zeigt der Canvas geteilte Speicherbereiche als transluzente Begrenzungsboxen mit gestrichelten Rändern.
Jeder Bereich ist farbcodiert nach Agentenrolle: Cyan für Koordinatoren, Pink für Spezialisten, Grün für Worker. Bereichsbeschriftungen zeigen, welche gemeinsamen Variablen die Agenten verbinden. Diese Visualisierung macht deutlich, wie Daten zwischen Agenten in einem Multi-Agent-Workflow fließen.
Der Canvas führt auch eine Zykluserkennung bei Multi-Agent-Workflows durch. Wenn zirkuläre Abhängigkeiten zwischen Schritten existieren, leuchten die betroffenen Knoten rot und ein Warnabzeichen erscheint in der Toolbar mit einer Anzahl erkannter Zyklen. Zyklen in der Agenten-Delegation können Endlosschleifen verursachen — besser, sie zur Entwurfszeit zu erkennen als zur Laufzeit.
Raster- und Port-System
Der Rasterhintergrund verwendet ein zweischichtiges Muster: 20-Pixel-Punkte für feine Ausrichtung und 100-Pixel-Punkte für Hauptrasterlinien. Das Raster kann über die Toolbar umgeschaltet werden, wenn Sie einen sauberen Canvas bevorzugen.
Ports — die Verbindungspunkte an jedem Knoten — haben einen Radius von 6 Pixel mit einem 12-Pixel-Treffererkennungsbereich, was sie auch bei niedrigeren Zoomstufen leicht zu treffen macht. Eingangsports befinden sich oben an jedem Knoten, Ausgangsports unten. Wenn Sie während der Kantenerstellung in die Nähe eines Ports schweben, wird er hervorgehoben, um zu bestätigen, dass Sie den richtigen Verbindungspunkt anvisieren.
Canvas-Ansichten neben anderen Modi
Der Canvas ist einer von vier Workflow-Anzeigemodi, verfügbar über Tabs auf der Workflow-Detailseite:
- List — Die ursprüngliche Schrittliste, am besten für schnelle Bearbeitungen einzelner Schrittkonfigurationen
- Diagram — Ein schreibgeschütztes Strukturdiagramm
- DAG — Gerichteter azyklischer Graph, der Ausführungsabhängigkeiten zeigt
- Canvas — Der neue visuelle Editor mit voller Interaktivität
Alle vier Ansichten spiegeln denselben Workflow wider. Bearbeiten Sie die Konfiguration eines Schritts in der Listenansicht, wechseln Sie zur Canvas-Ansicht, und sehen Sie die Änderung sofort reflektiert. Der Canvas ist auch im Workflow-Erstellungsfluss verfügbar — wenn Sie einen Workflow aus natürlicher Sprache generieren, zeigt der Canvas eine Vorschau der generierten Schritte, damit Sie sie vor dem Speichern neu anordnen können.
Verfügbarkeit
Der visuelle Workflow-Canvas ist in Team- und Enterprise-Plänen verfügbar, zusammen mit dem DAG-Ausführungsmodus und dem vollen Workflow-Orchestrierung-Funktionsumfang. Erfahren Sie mehr über Workflow-Orchestrierung oder starten Sie Ihre kostenlose Testversion.