Each diagram below is rendered from the source under it, by the current renderer, when the site is built. They are grouped by kind; the first line of a source names its kind.
Flow
flow v0
Routed nodes and edges on a grid the author lays out: columns, rows and the sides each edge leaves and enters.
The ub-agents delivery loop
The loop that runs on Uberblick's repositories: labels, agent roles, a rework column on the left and a person's decision on the right.
loop.flow
flow v0
# The starter ub-agents loop, as drawn by hand on the explainer page.
# Every placement here is the author's choice; the renderer only draws it.
columns rework main stop
section "Issue"
text start col=main "A maintainer adds the first label"
pill needs-preparation tone=muted
box issue-preparer "writes scope and criteria"
pill ready tone=done
section "Pull request"
box implementer "codes, checks, opens the PR"
pill needs-review tone=agent
box reviewer "reviews the exact head SHA"
pill ready-to-merge tone=done
box integrator "updates base, checks, merges"
end merged "Merged · issue closed"
pill needs-changes col=rework row=reviewer tone=rework
panel human col=stop row=needs-review span=3 tone=stop
pill needs-human
muted "or an Action needed comment"
rule
strong "A person decides"
text "adds the trigger of any role"
muted "blocked, same role: retry"
start --> needs-preparation
needs-preparation --> issue-preparer : trigger
issue-preparer --> ready : prepared
ready --> implementer
implementer --> needs-review : handed-off
needs-review --> reviewer
reviewer --> ready-to-merge : approved
ready-to-merge --> integrator
integrator --> merged : merged
reviewer --> needs-changes tone=rework : changes-requested
ready-to-merge -.-> needs-changes tone=rework to=bottom.2 : on-conflict · launcher
integrator --> needs-changes tone=rework to=bottom.1 : changes-requested
needs-changes --> implementer tone=rework from=top to=left label=end : revise the same PR
issue-preparer --> human tone=stop to=top.2 : needs-human
implementer --> human tone=stop to=top.1 : blocked
reviewer --> human tone=stop : blocked
integrator --> human tone=stop : maintainer-merge, blocked
legend
pill tone=done "GitHub label" sample=ready
box "agent role"
panel tone=stop "a person decides"
dashed tone=rework "set by the launcher"
The same loop with a role inserted
A security review after the reviewer. The marked lines are the whole edit: every other node keeps its column and row, and the rows below simply make room.
loop-insert.flow · marked lines differ from loop.flow
flow v0
# Edit test: loop.flow with a security review inserted after the reviewer.
columns rework main stop
section "Issue"
text start col=main "A maintainer adds the first label"
pill needs-preparation tone=muted
box issue-preparer "writes scope and criteria"
pill ready tone=done
section "Pull request"
box implementer "codes, checks, opens the PR"
pill needs-review tone=agent
box reviewer "reviews the exact head SHA"
pill needs-security tone=agent
box security-reviewer "checks secrets and permissions"
pill ready-to-merge tone=done
box integrator "updates base, checks, merges"
end merged "Merged · issue closed"
pill needs-changes col=rework row=reviewer tone=rework
panel human col=stop row=needs-review span=3 tone=stop
pill needs-human
muted "or an Action needed comment"
rule
strong "A person decides"
text "adds the trigger of any role"
muted "blocked, same role: retry"
start --> needs-preparation
needs-preparation --> issue-preparer : trigger
issue-preparer --> ready : prepared
ready --> implementer
implementer --> needs-review : handed-off
needs-review --> reviewer
reviewer --> needs-security : approved
needs-security --> security-reviewer
security-reviewer --> ready-to-merge : approved
ready-to-merge --> integrator
integrator --> merged : merged
reviewer --> needs-changes tone=rework : changes-requested
security-reviewer --> needs-changes tone=rework : changes-requested
ready-to-merge -.-> needs-changes tone=rework to=bottom.2 : on-conflict · launcher
integrator --> needs-changes tone=rework to=bottom.1 : changes-requested
needs-changes --> implementer tone=rework from=top to=left label=end : revise the same PR
issue-preparer --> human tone=stop to=top.2 : needs-human
implementer --> human tone=stop to=top.1 : blocked
reviewer --> human tone=stop : blocked
security-reviewer --> human tone=stop : blocked
integrator --> human tone=stop : maintainer-merge, blocked
An online order
section groups rows into bands, here checkout and fulfilment.
One step and its ordered outcomes, each with a reason and a destination, for when why an outcome happens matters as much as where it goes.
Whether approval permits a run
Five lines of source, no edges and no placement to decide.
approvals.flow
fan-out v0
step "Check whether approval permits the run"
outcome "Approved" reason="A maintainer started it and the input is unchanged" destination="Start the run" tone="done"
outcome "Outside input" reason="The input has not been cleared by a maintainer" destination="Ask a maintainer" tone="stop"
outcome "Edited since" reason="The input changed after the maintainer started it" destination="Ask a maintainer" tone="stop"
Who builds this.
Uberblick, ub-agents and the small libraries beside them, such as wireframe and ablauf, are made by a team in Berlin that likes to find out how far AI engineering can go. What holds up in our own work becomes a framework and a few products that run on GitHub alone, so a team no longer needs Notion, Linear or Jira beside it. Take them as a starting point for your own variant.