JieGou has always offered multiple ways to view workflows: a step list for quick editing, a diagram for understanding structure, and a DAG view for execution order. But none of them let you build visually — arrange steps on a canvas, draw connections between them, and see the spatial relationships in your automation.
The new visual workflow canvas changes that. It’s a full drag-and-drop SVG editor with zoom, pan, minimap, snap-to-grid, and live execution visualization.
Building on the canvas
The canvas renders each workflow step as a node. Nodes are color-coded by step type — recipe steps, LLM steps, condition branches, loops, parallel groups, approval gates, and more each have their own visual identity.
To add a connection between steps, drag from a node’s output port (bottom) to another node’s input port (top). A blue dashed preview line follows your cursor as you drag, and valid drop targets highlight when you hover over them. Release on a port to create the edge. Edges render as smooth Bezier curves between connected nodes.
Moving nodes is straightforward: click and drag. Nodes snap to a 20-pixel grid, so layouts stay clean without manual alignment. The snap threshold is 10 pixels — close enough to the grid line and the node locks into place, but you still have freedom to position precisely when you need to.
Navigating large workflows
Small workflows fit on one screen. Production workflows don’t. The canvas provides several navigation tools:
Zoom — Mouse wheel (with Ctrl/Cmd) zooms from 0.15x to 2.5x, centered on your cursor position. Keyboard shortcuts work too: Cmd+0 resets to 1x, Cmd+= zooms in, Cmd+- zooms out.
Pan — Scroll horizontally and vertically with your trackpad or mouse wheel. The canvas moves smoothly under the nodes.
Minimap — A 200x140 pixel overview in the bottom-right corner shows the full workflow layout with a white rectangle indicating your current viewport. Click anywhere on the minimap to jump there instantly.
Select all — Cmd+A selects every node on the canvas. Escape deselects all and cancels any in-progress drag.
Live execution visualization
The canvas isn’t just a builder — it’s a viewer for running workflows.
When a workflow executes, the canvas shows execution state in real time. The active step glows. Completed steps show their status. Failed steps are immediately visible. You can watch your automation flow through the graph, step by step, as it runs.
For steps using Claude or other LLMs, a reasoning overlay appears at the bottom of the canvas when you select a running step. It shows the model’s thinking process — the chain of thought behind the output. This is useful for debugging prompts and understanding why the AI made a particular decision.
Multi-agent overlays
For workflows that use multiple AI agents — a coordinator delegating to specialists, a pipeline passing work between role-specific agents — the canvas shows shared memory regions as translucent bounding boxes with dashed borders.
Each region is color-coded by agent role: cyan for coordinators, pink for specialists, green for workers. Region labels show which shared variables connect the agents. This visualization makes it clear how data flows between agents in a multi-agent workflow.
The canvas also runs cycle detection on multi-agent workflows. If circular dependencies exist between steps, the affected nodes glow red and a warning badge appears in the toolbar with a count of detected cycles. Cycles in agent delegation can cause infinite loops — better to catch them at design time than at runtime.
Grid and port system
The grid background uses a dual-layer pattern: 20-pixel dots for fine alignment and 100-pixel dots for major gridlines. The grid is toggleable via the toolbar if you prefer a clean canvas.
Ports — the connection points on each node — are 6 pixels in radius with a 12-pixel hit detection area, making them easy to target even at lower zoom levels. Input ports sit at the top of each node, output ports at the bottom. When you hover near a port during edge creation, it highlights to confirm you’re targeting the right connection point.
Canvas views alongside other modes
The canvas is one of four workflow view modes, available via tabs on the workflow detail page:
- List — The original step list, best for quick edits to individual step configurations
- Diagram — A read-only structural diagram
- DAG — Directed acyclic graph showing execution dependencies
- Canvas — The new visual editor with full interactivity
All four views reflect the same workflow. Edit a step’s configuration in list view, switch to canvas view, and see the change reflected immediately. The canvas is also available in the workflow creation flow — when you generate a workflow from natural language, the canvas shows a preview of the generated steps so you can rearrange them before saving.
Availability
The visual workflow canvas is available on Team and Enterprise plans, alongside DAG execution mode and the full workflow orchestration feature set. Learn more about workflow orchestration or start your free trial.