AI Agents And Human Workflows

Use the included software collection to explain how work moves between people, AI agents, service records, tools, and model providers. Every object is a photorealistic isometric sprite with transparent surroundings and a checked one-cell anchor. The collection browser shows the current inventory and searches labels, ids, tags, and product aliases.

Choose a story, open it in the editor, and replace the labels with your own workflow. The illustrations describe roles; your application supplies the actual agent execution, integration, and approval behavior. Provider and ServiceNow objects are conceptual illustrations rather than official vendor logos.

Choose The Right Object

These logical sprite ids are placeable. Sheet namespace ids are catalog containers and cannot be used as an element’s asset.

Choose the role that answers the viewer’s question. ai-reviewer is an agent reviewing a result; human-approver is a person making a decision; agent-await-human is the workflow’s waiting state. ai-rag describes retrieval augmentation, while infra-vector-database describes the store it may query. ai-model-router selects models; agent-router routes workflow work.

Redis assets deliberately separate caching, Streams, and Pub/Sub. Label each with the behavior you are explaining, such as “cached context”, “task event stream”, or “live updates”. A single generic Redis object can obscure which of these roles matters to the story.

Keep ServiceNow Records Distinct

The intake conversation can lead to a request or incident. It does not need to be drawn as the same record. For a catalog request, show the catalog offering, REQ, RITM, and fulfillment task as separate objects when their distinction is part of the explanation. Do not draw an incident as a generic catalog order.

These meanings follow ServiceNow’s official interaction documentation, request tracking example, request task templates, and problem management overview.

Name Model Platforms Clearly

Microsoft documents the transition from Azure AI Foundry to Microsoft Foundry in its Foundry overview. The provider/platform distinction follows the official Amazon Bedrock overview and Google Cloud platform overview and Gemini API documentation. Google now presents Vertex AI within Gemini Enterprise Agent Platform; the collection preserves the familiar Vertex AI label and stable sprite id, with the current platform name available as a search alias. Use your deployment’s product name in a label rather than changing the sprite id.

Example 1: Migrate A Human Workflow

Open the migration example or download its YAML and compiled module.

The four stops build one story through scene deltas:

1. Manual baseline: requester → email → interaction → human triage → fulfillment.
2. Agentic automation: retain intake and the interaction; replace manual fulfillment with AI triage, REQ, RITM, catalog task, knowledge lookup, and a prepared tool action.
3. Human review: add a waiting state and an approver. A separate expert lane shows where an unclear case can be escalated. The action remains prepared.
4. Completed: remove the waiting and escalation branch; show the approved action executing, the closed task, completion, and the decision audit.

Only changed objects appear in later scenes. Every connection attached to a removed object is explicitly removed in the same delta. This example explains approval before execution: adapt the branch conditions and responsibilities to your own process.

For example, a label update preserves the existing position and styling:

- id: completed
  update:
    elements:
      - id: task-label
        text: { value: "Task closed" }

Example 2: Providers, Retrieval, And Tools

Open the routing example or download its YAML and compiled module.

1. Select provider: an orchestrator can route work to Microsoft Foundry, Amazon Bedrock, or Google Vertex AI.
2. Retrieve context: select Bedrock, remove the other provider branches, and introduce RAG, a vector store, and cached context.
3. Execute tools: add a tool runner, an API tool, a Redis Stream for events, and validation of the result.
4. Review and complete: a human reviews the validated output before delivery.

The providers are alternatives, not a required chain. The diagram is a visual explanation of your architecture rather than executable routing logic. Replace Bedrock with a different provider sprite when explaining another deployment.

Place, Label, And Connect

Copy the collection into your public asset folder as described in Software Architecture Assets. The editor loads /assets/software-architecture/manifest.json and registers every logical sprite. Placing one copies its checked crop and anchor into your scene’s header. For manual authoring, start with an example’s header rather than guessing pixel rectangles or duplicating a sheet namespace as a placeable asset.

Use whole grid cells and size: 1 for these sprites. Use caption labels for short object names and separate label cells for longer explanations. Keep branch outcome labels beside their lane, close to the destination they explain.

- id: reviewer
  asset: human-approver
  at: [4, 10]
  size: 1
- id: reviewer-label
  asset: text
  layer: labels
  at: [4, 10]
  text:
    value: Human approval
    placement: caption
    fontSize: 10
    fill: var(--iso-label)

Draw real connections rather than stretching arrow illustrations:

connections:
  - id: waiting-to-reviewer
    from: { element: waiting, side: auto }
    to: { element: reviewer, side: auto }
    routing: { mode: orthogonal, avoid: objects }
    style: { stroke: "var(--iso-flow)", strokeWidth: 2 }
    end: arrow

Define --iso-label and --iso-flow in your host CSS. Split a large workflow into scene stops so the active objects and connections stay within 50 objects and remain legible on a phone. The examples keep each resolved stop under that limit. Validate and compile after editing; see Use The CLI.

Read The Active Work

The live examples use rounded dimensional beam tracks and a small number of moving messages. Mint marks processing, amber marks a wait, and green marks completed work. The text labels and status glyphs carry the meaning alongside the color. Use Pause motion in the gallery to inspect a step; your system’s reduced-motion setting keeps messages and activity indicators static.

In the migration story, the existing triage element changes from ai-agent to agent-await-human, then to agent-complete. Its id and connected routes stay stable. Review stops disable earlier message streams explicitly and return prior processing nodes to idle or a completed state. In the provider story only the selected Bedrock branch carries traffic; retrieval and tool messages take over at later stops.

Human-to-human, human-to-AI, and AI-to-human handoffs are distinct roles. The catalog labels and sprite ids human-handoff, human-to-ai-handoff, and ai-to-human-handoff make that direction explicit. Pair a directional handoff object with the corresponding connection direction and a short caption.

See Animation And Connections for message ranges, status states, and whole-object patch semantics.