Lines & Arrows features

Actors stay recognizable.

Declare each participant once, then give services, people, and tools icons that remain consistent through the sequence. 

@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 surface contracts and constraints worth keeping in view. Tooltips explain why they matter without crowding the sequence. 

@Payments API
  icon cloud
  tag PCI boundary
  tooltip Handles cardholder data
  tooltip-icon shield-check
@Ledger
  icon database
  tag single 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.

Split a group into labeled outcomes while keeping the same actors and shared sequence in view. 

@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.

Header comments explain the source. Gaps reserve visible time in both the document and the rendered sequence. 

// 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.

Edit without fear. Canvas controls and familiar keyboard shortcuts step backward or forward while keeping the diagram and its text in sync.

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

The next line is yours

Ready to 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