geelen&company
a project · built with agentic engineering

Workflow Designer

Draw an agentic workflow the way you would sketch it on a whiteboard — swimlanes, tasks, gateways, handoffs. The same file a human draws is the file an agent runs. No translation, no drift.

Status Active · stabilization
Repository Internal build — source not public
Stack Vanilla JS · HTML · CSS · BPMN
The Workflow Designer BPMN editor — an 'investigate' workflow drawn across the AEF authority-model swimlanes (Sovereignty · Human, Authority · Framework, Initiative · Agent): from investigation request through load context, decompose, fan-out search, join, synthesize, sufficiency check, write report, and human review & route.

The Workflow Designer canvas — a BPMN workflow whose swimlanes are the authority model: human, framework, agent.

Purpose & goals

The Workflow Designer is a visual editor for authoring Agentic Engineering Framework workflows as a subset of BPMN — the standard notation for business processes. It lets a human draw a workflow on a swimlane canvas while producing a typed, schema-validated file that an agent can read and run directly. Both audiences work from the same source rather than from separate, drifting views: the diagram a person edits and the definition a machine executes are one and the same file.

Modules & architecture

The whole editor is a single self-contained HTML file — no server, no build step. Its swimlanes map straight onto the AEF authority model: Human / Sovereignty, Framework / Authority, and Agent / Initiative. The palette covers eight BPMN element types — start and end events; service, user, and script tasks (agent, human, and framework work respectively); exclusive and parallel gateways; and off-page link connectors for handing off between workflows. Design documentation — architecture, schema, and a user guide — lives alongside the tool.

Functionality & technology

It is built in plain JavaScript, HTML, and CSS, deliberately with zero external libraries — no charting toolkit, no BPMN engine, no build tool, everything in one inline script. It supports drag-and-drop node placement, automatic connector routing with loop-back detection, multi-select and group-drag, a properties panel, and import/export as BPMN XML (with a small AEF extension namespace) as well as a canonical YAML form. It sits at the “stabilization” rung of its own maturity ladder — core editing, save and load, and lane management are in; niceties like undo/redo and pan/zoom are on the list. Because it is a single file, it demos instantly: open it in any modern browser and the editor runs, pre-loaded with a worked example.

← Back to Agentic Engineering

VALUES INTENT AND OUTCOME OVER METHOD AND PRECEDENT