Construct

Minimal form

Examples

# bare declaration
component api

# with title
component api "API"

# title, shape, icon, tags
component api "API" shape:hexagon icon:server [backend]

# trailing marker opens a body
# indented lines render as markdown
component api "API":
  Handles HTTP ingress.

# guide bar marker
component api "API":
  Handles requests.
  - validates input

# brace marker
component policy "Policy" }
  Never trusts metadata.

# simple edge
api -> db

# with label
api -> db: SELECT users

# with modifier and color
api -> upstream: timeout edge:dropped,#ff4d4f

# expands to adjacent pairs
client -> api -> db

# mixed arrow types
client -> api --> cache ->> queue

# synchronous
->

# optional
-->

# weak
..>

# streaming
~>

# async fire-and-forget
->>

# bidirectional
<->

# one-to-many
api -> [worker-a, worker-b]

# fan-out with label
api -> [worker-a, worker-b]: job

# fan-in
[service-a, service-b] -> api: result

# visual boundary
group
  ...
end

# display name only
group "Backend"

# key, name, shape, icon
group infra "Infra" shape:rect icon:cloud

# free-floating canvas annotation
text title "Request Flow"

# with shape and color
text title "Request Flow" shape:rect,solid,xl,#info

# markdown body
text:
  **Legend:** public request path

# component content update
api: Processing request

# structured data
api: {status: ok}

# markdown body
api:
  Handles **requests**

# phase: Authentication

# phase: Authentication
# Validates credentials and issues a token.

# phase: Token refresh
# Exchanges a valid refresh token for a new access token.

# note: Text

# note pause: Text

# auto-dismiss after 3s
# note 3s: Text

# auto-numbered
# note n: Text

# canvas-level message
# overlay: Text

# overlay: This is a basic overlay# overlay pause: <icon:clock> Wait for the viewerMore…

# artifact travels with the message
api -> user: ... %jwt

# full declaration
artifact jwt "JWT Token" icon:key-round

# named instance
%jwt#admin

# dim a component
--dim api

# restore
--show api

# remove from canvas
--hide legacy

# ghost outline
--outline future-service

# clear all state
--clear

# clear specific components
--clear api, cache

# clear an artifact
--clear %jwt

# insert a delay
--wait 2s

# change step duration
--step 750ms

# set playback speed
--speed 5

# reset to default
--speed

# enable from 1
--autonumber

# start from 10
--autonumber 10

# disable
--autonumber off

# loop N times
repeat 3
  ...
end

# counted loop
repeat 3

# inline detached repeat
*repeat heartbeat

# concurrent commands
parallel
  ...
end

# fetch from cache and database together
parallel
  api -> cache: read user
  api -> db: SELECT user
end

# reusable block
block healthcheck
  ...
end

# invoke
@healthcheck

# run in background
--detach @healthcheck

# wait for completion
--attach @healthcheck

# set a variable
$state: value

# set a field to 0
$state.count: 0

# increment
$state.count++