Canvas system

Make complex workflows easier to read.

Nodes, connectors, flow controls, and user activities share a consistent grammar across the builder.

Each feature added more types of work to the canvas. I helped keep nodes, states, and connections consistent as the builder expanded.

Historical CanvasSwitch themes to compare the light and dark designs.

Node library

Node states and sizes

These studies compare node states and sizes in light and dark modes.

  1. 01 · Key statesCompare state behavior.
  2. 02 · Size variantsCompare the scalable vocabulary.

Human work in the flow

User activities stay connected to the canvas.

I added a green User Activity family for tasks that need a person’s input.

The sequence shows how authors add an activity, configure its form, and return to the workflow.

Form sequence

  1. 01 · Place

    Add the activity

    A human-work container enters the automated flow while surrounding context stays visible.

  2. 02 · Configure

    Shape the interaction

    Form setup stays in context, so the activity can develop without losing its place in the workflow.

  3. 03 · Resolve

    Return to the flow

    The completed activity resolves back into the workflow as a readable part of the whole.

Canvas evolution

A visual system that kept expanding.

These examples show the existing builder, a V2 workflow, and a view of agent relationships.

I supported the agent canvas vision by helping align it with the workflow builder and its components.

  1. 01 · Current builderAs-is workflow context.
  2. 02 · V2 workflow evolutionExpanded workflow vocabulary.
  3. 03 · V2 agent hierarchyAgent relationships and delegation paths.

Workflow vocabulary

The studies below show individual flow controls, their containers, an example workflow, and the points where connections attach.

  1. 01 · ElementsName the available controls.
  2. 02 · ContainersContain behavior in the workflow.
  3. 03 · ApplicationPut the vocabulary to work.
  4. 04 · AnchorsKeep connection points legible.

Throughline

One system for automation, specialized work, and human judgment.

These studies show how the same components could support several kinds of work.

Illustration of a person and workflow elements connected across a shared canvas
A shared canvas keeps specialized work connected to the larger system.