Lines & Arrows features

Actors stay recognizable.

Declare each participant once and give it an icon from the built-in catalog. 

@Agent
  icon robot
@API
  icon cloud
@Worker
  icon gear-six

Agent -> API: Submit request
API -> Worker: Dispatch work
Rendering actors

Important constraints stay visible.

Tags name the contract on an actor or message. Tooltips explain why it matters without crowding the sequence. 

@Payments API
  icon cloud
  tag PCI boundary
  tooltip Handles cardholder data
  tooltip-icon shield-check
@Ledger
  icon database
  tag sole writer
  tooltip Serializes balance changes
  tooltip-icon lock-key

Payments API -> Ledger: Apply settlement
  tag idempotent
  tooltip Safe to retry\nusing the same settlement ID
  tooltip-icon key
Rendering context

Groups show the shape of work.

Wrap repeated, critical, or parallel steps. Groups can stand alone or nest when one concern belongs inside another. 

@Agent
@Worker

repeat Process each task
  Agent -> Worker: Start task
  critical
    Worker -> Worker: Save evidence
  Worker --> Agent: Task complete

parallel Continue working
  Agent -> Worker: Queue next task
Rendering groups

Sections name the alternatives.

Each | section holds one outcome or parallel lane, under the same actors. 

@Agent
  icon robot
@Tool
  icon wrench

Agent -> Tool: Run
choice Tool response
  | complete
    Tool --> Agent: Result
  | needs input
    Tool --> Agent: Ask for context
Rendering alternatives

Missing time remains visible.

A gap marks elapsed time or an omitted step. Header comments give the whole document its context. 

// Repeated work is summarized.
@Agent
@Worker

Agent -> Worker: Start
repeat Until complete
  Worker -> Worker: Process step
  gap Next event loop
  Worker --> Agent: Progress
Rendering the gap

The icon library covers real systems.

Use the built-in Phosphor catalog for browsers, infrastructure, queues, storage, people, and the tools between them. 

@Browser
  icon browser
@Cloud
  icon cloud
@Queue
  icon queue
@Database
  icon database

Browser -> Cloud: Upload
Cloud -> Queue: Schedule
Queue -> Database: Store result
Rendering icon choices

Text remains the source of truth.

Names, arrows, and indentation carry a complete workflow without storing layout instructions in the document. 

@Agent
  icon robot
@Planner
  icon tree-structure
@Worker
  icon gear-six

Agent -> Planner: Plan the task
repeat Each step
  Planner -> Worker: Run step
  choice Worker response
    | complete
      Worker --> Planner: Evidence
    | needs input
      Worker --> Agent: Ask for context
  gap Next step
Planner --> Agent: Final result
Rendering the workflow

Undo and redo are built in.

Every diagram fits its page.

Give the renderer a few host colors and a transparent canvas. It derives actors, lifelines, group overlays, metadata, and editor controls while gradients and patterns remain part of the page.

Midnight Cobalt Transparent

Phosphor Terminal Transparent

Newsprint Monochrome Pattern

Next steps

Put one on a page.

Start from the live diagram or hand the concise authoring guide to an agent.

Open the live diagram Read the agent guide