Nine capabilities

A small language.
Useful depth.

Read the compact source. See the same sequence. Switch to Edit and change it without leaving the page.

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

Context stays available.

Tags keep status visible. Tooltips hold supporting detail without turning the main sequence into a wall of text.

@Agent
  icon robot
  tag assistant
@Reviewer
  icon user
  tag human
  tooltip Checks the result

Agent -> Reviewer: Present result
  tag review
  tooltip Include the evidence
  tooltip-icon warning

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 Keep the audit trail
    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.

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

@Agent
@Worker

Agent -> Worker: Start
// Repeated work is summarized.
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.

Choose light, dark, or automatic theming. The same source stays readable in documentation, product interfaces, and editor surfaces.

Light

Dark

Auto

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 agents.md

A small language.Useful depth.