Guides

Designing an agent graph

A bubble is a sub-agent. An edge is a handoff. Vibisual reads the graph you draw and launches the matching Claude Code workflow.

Updated 2026-08-18

Bubbles are sub-agents

Double-click empty canvas to place a bubble, then fill in its panel. Every field maps to something the CLI already understands, so a graph is a visual spelling of a configuration you could have written by hand.

modelopus / sonnet / haiku, per agent
permission modedefault · acceptEdits · auto · dontAsk · plan · bypassPermissions
toolsallow-list, e.g. Read, Bash, Grep
isolationshared tree · own git worktree
max turnshard stop for runaway loops
rulesfree text appended to that agent’s prompt

Task edges

Draw an edge from A to B to say that B starts when A hands off. An agent with no inbound edge starts with the run; an agent with an unresolved inbound edge stays idle and is drawn with a dashed line.

Edges are not documentation. Vibisual holds the downstream agent until the upstream one closes, which is what keeps a doc-writer from documenting a build that failed.

Isolation

Give each writing agent its own worktree when their file sets overlap. Read-only agents can share the main tree safely — a test-runner restricted to read-only src/** cannot undo the work it is checking.

Isolation is enforced by the harness, not by the model. It holds even if an agent decides it would rather edit something else.

vibisual {{ verBadge }}
{{ t.eyebrow }}

{{ t.h1a }} {{ t.h1em }}

{{ t.nameLine }}

{{ t.sub }}

{{ stat1 }} ★{{ t.st1 }} {{ stat2 }} ⤓{{ t.st2 }}
{{ stat3 }} ◉{{ t.st3 }}
{{ stat4 }} ◧{{ t.st4 }}
{{ t.canvasHint }} vibisual · canvas
{{ b.count }} {{ b.label }} {{ b.badge }}
{{ l.text }}
{{ g.text }}
{{ t.bubDblHint }}

{{ t.canvasCaption }}

IDE → ADE → VDE

{{ t.vdeLead }}

IDE {{ t.vde1 }} VS Code, Cursor
ADE {{ t.vde2 }} Warp
VDE {{ t.vde3 }} Vibisual

{{ t.whatTitle }}

01

{{ t.f1t }}

{{ t.f1b }}

SessionStart → node created · orchestrator UserPromptSubmit → "split the checkout refactor" PreToolUse Task → edge → api-builder PreToolUse Edit → bubble · routes/checkout.ts PostToolUse Bash → 41 passed
02

{{ t.f2t }}

{{ t.f2b }}

node · test-runnerunsaved
modelclaude-sonnet-4.6 toolsBash, Read, Grep rulesnever edit src/** in-edgeapi-builder → test-runner
03

{{ t.f3t }}

{{ t.f3b }}

stream files diff terminal
routes/checkout.ts - const total = items.reduce(sum) + const total = priceWithTax(items) + if (!total) throw new BadRequest() 2 files changed · saved to the agent's branch
walkthrough {{ t.videoTitle }} {{ t.videoSub }} ▶

{{ t.instTitle }}

{{ t.instLead }}

{{ t.instWin }}
› {{ f.name }}

{{ t.instWinBody }}

Releases →
{{ t.instSrc }}
$ git clone https://github.com/Vibisual/vibisual.git $ cd vibisual && pnpm install $ node scripts/runapp.mjs # pnpm build:win

{{ t.instSrcBody }}

Contributing →
{{ t.statusLabel }}

{{ t.statusBody }}

{{ t.secLabel }}

{{ t.secBody }}

{{ t.ctaTitle }}

{{ t.ctaSub }}
{{ ui.blog }}

{{ ui.blogTitle }}

{{ ui.blogLead }}
{{ art.date }}{{ art.tag }}{{ art.read }}

{{ art.title }}

{{ art.excerpt }}

{{ pa.v }}
{{ art.author }}
{{ ui.docs }}/{{ doc.g }}/{{ doc.title }}

{{ doc.title }}

{{ doc.lead }}

{{ ui.updated }} {{ doc.updated }}

{{ s.h }}

{{ pa.v }}
{{ c.v }}
{{ r.k }} {{ r.v }}
note

{{ s.note }}
{{ pick.title }} {{ t.ideWindowTag }}
{{ pick.label }} {{ pick.typeLabel }}
{{ pick.agentTabName }}
{{ tb.name }}
{{ ac.under }} {{ ac.badge }}
{{ pick.rootName }}
{{ tr.name }}
{{ pick.selPath }}
{{ as.you }} {{ ideAsk }}

{{ pick.body }}

{{ as.activity }} {{ pick.toolRun }} {{ tn.v }}
Read {{ pick.readTarget }}
{{ as.output }}
{{ pr.k }}{{ pr.v }}

{{ nt.head }}

{{ nt.body }}
{{ pick.runWord }} {{ ideAsk }}
All Model {{ pick.localModel }}
{{ dn.v }}
{{ as.follow }}
> {{ as.ph }} {{ as.run }}
{{ as.readOnly }}
{{ term.note }} {{ term.fontSize }}
{{ tl.a }}{{ tl.b }}
{{ pick.stBadge }} {{ pick.stState }} {{ pick.stModel }} {{ pick.stCtx }} {{ pick.stTok }} {{ pick.stAc }} {{ pick.stSess }}
{{ brain.title }} {{ brain.project }} {{ brain.howTo }}
{{ brain.search }} {{ bty.v }}
{{ sp.title }} {{ sp.hint }} {{ sp.count }}
{{ brain.topicsLabel }}
{{ tp.v }} {{ tp.n }}
{{ brain.axesTitle }} {{ brain.turnOff }}
{{ ax.t }} {{ ax.h }}

{{ brain.keepsData }}

{{ brain.docTitle }}

{{ brain.docPath }}

{{ bc.ti }}

{{ bc.typeName }} {{ bc.alwaysLabel }} {{ bc.needsLabel }} {{ bc.curLabel }} {{ bc.ckey }} {{ bc.ago }} {{ bc.help }}

{{ bc.needsText }}

{{ bc.stillValid }} {{ bc.markStale }}

{{ bc.body }}

{{ bc.file }}
{{ bc.detail }}

{{ t.ideAnnoLead }}

{{ an.n }} {{ an.h }}

{{ an.b }}

{{ an.k }}
{{ t.ideNextTag }} {{ t.ideNextBody }}