Language Reference

component key "Display Name" shape:shape multi:stack style::tierN,utilities,#color icon:name,badge [tags]

component key "Display Name"
  Initial body
end

source -> target: label

edge from:source to:target "label"

edge from:source to:target
  label
end

branch routes from:source to:[left,right] marker:arrow

path guide "Guide" from:source to:target style:stroke-dashed

source -> middle -> target: label

source -> [target-a, target-b]: label

source -> target mark:dropped,#error: label

component: content

state component: content

state component
  Markdown body
end

component:
  Markdown body

component:
  pairs:
    status: ok

component mark:destroyed: content

component <mark:destroyed>: content

group key "Display Name" shape:shape style:stroke,radius-12px,title-hidden,#color icon:name [tags]
  component key
end

group "Display Name"
  existing-key
end

artifact key "Name" icon:name

source -> target: label %artifact

%artifact:
  Markdown body

%artifact:
  pairs:
    status: ok

%artifact#copy

#success

#error

#warning

#info

#red #blue #green #yellow #purple #gray #orange #pink #cyan #primary #secondary

#gray-50 #gray-100 #gray-200 ... #gray-900 #gray-950

#abc #7c3aed #7c3aedff

circle "Label"

rect id style:stroke-dashed,#color

ellipse id @target style:#warning "Label"

diamond id:
  Markdown body

diamond id:
  pairs:
    status: ok

text "Display Text"

text display-text "Display Text"
view
  text:display-text: text-style:font-size-24px,weight-700
end

text @target |
  Markdown body

text @target marker:|
  Markdown body

text @target |
  pairs:
    status: ok

text @target style:#info ->
  Markdown body

icon check

icon check status

icon server api "API"

icon check @target status style:#success

icon sparkles swarm multi:swarm style:#info

icon motion-clock job-clock @worker

icon motion-progress ingest-progress

tree flow "Title" shape:decision style:separate-edges
  - State (state)
    -- event
      - Next (next)
end

tree flow "Title" shape:decision style:separate-edges
  - Decision? (decision)
    -- yes
      - Continue (next)
end

tree mytree "Title" shape:decision style:separate-edges
  - State (state)
    -- event
      - Next (next)
  scenario advance: state -> next
end
@mytree advance

# stage: Title

# Description line

# note: Text

# note pause: Text

# note n 5s #warning: Text

# overlay: Text

# overlay pause: Text

# overlay 10s: Text

callout @target "Text"

callout explanation @api style:#warning:
  Text

--play explanation

emphasis @target match:"Text" style:#warning

emphasis @api shape:circle match:"Text"

--clear api:emphasis

--dim target

--show target

--hide target

--outline target

--play target 2x

--pause target

--clear target

--clear target:emphasis

--wait 1s

--travel 1s

--dwell 1s

--gap 200ms

--speed 5

--autonumber

repeat 3
  ...
end

parallel
  ...
end

block name
  ...
end

@name

*repeat name
  ...
end

--detach @name

--attach @name

$name: value

$name:
  Markdown body

$name:
  pairs:
    status: ok

$name.field: value

$name.field++

$name.field--

text label:
  $name

rect status:
  $name.pairs

component:
  pairs:
    field: $name.field

// Groups are bare labels; indentation creates nesting
Platform (platform) ~#blue [production]
  Services
    [server,cloud] API (api) -badge [backend]

// Component and icon primitive marker families
[] Service (service)
[[cpu,server]] Workers (workers)
(postgresql) Database (db)
<shield> Gateway (gateway)
{check} @service (status)
{{sparkles}} (swarm)
[bot,icon] Agent (agent)

// Child and related components
[] Parent (parent)
  - Child
  -- {sheet} Related
[,server] fractalform.io
  -- [,text] /share

// > is the Quick Notation replay shorthand
client > api > db: query
edge from:api to:db "static label"

// Initial content and attached descriptions
[] API (api)
  : Ready
  / Handles requests
  | Public endpoint

// Canvas text, primitive shapes, and paths
/ Request flow ~#info
[.] Boundary (boundary) ~opacity-75
(.) Cache
<.> Region
<<.>> Decision
((.)) Pool
path divider "Divider" ~#gray

// Stages, notes, and overlays
/// Request flow
  Follow the request from ingress to storage.
## Validate input ..
### Five minutes later 5s..

// Indentation closes blocks; do not write end
repeat 3
  client > api: retry

parallel
  api > db
  api > cache

// Named and detached blocks also close on dedent
block healthcheck
  api > db: ping

*repeat heartbeat
  monitor > api: GET /health

// Addressable decision tree
?tree retry-policy "Retry policy" =decision ~separate-edges
  - Closed (closed)
    -- failure
      - Open (open)