The basics
The smallest animation is a title, an animation style and a couple of items. Every keystroke re-renders live in the Code tab.
show:— the reveal order on the timeline (0, 1, 2 …).animation:— how items enter (see below).staticshows everything at once.- Layout and arrow routing are automatic — you never place coordinates by hand (unless you want
layout: free).
Items & looks
Each item has a look and content. Common fields:
| Field | Meaning |
|---|---|
text / sub | Main label and an optional sub-label. |
look | card, pill, circle, oval, node, note, image, star, text … |
icon | One of 33 built-in icons (user, db, server, cloud, lambda …) or your own uploaded image. |
color | A palette name — blue, green, purple, orange, pink … |
show | Reveal step; motion adds a looping wiggle (pulse, float …). |
Use look: text for a plain, borderless text label — great for titles and annotations.
Arrows
Arrows connect items by name and route themselves around other shapes.
say:— a label on the arrow.style: dashed,head: none,from-side/to-sideto fine-tune.- Flowing (animated) arrows follow the reveal order automatically.
Components & the scene
Group items into named components (titled, tinted containers), then order the whole picture with a scene timeline.
Components can nest, and can be saved to your local Studio library and reused across diagrams.
Animations & timing
Set a document-wide animation:, or override per item / component. There are 30+ entrances and looping motions.
- Entrances:
pop,fade,rise,slide,draw,typewriter,motion,static. - Motions (looping):
pulse,float,spin,jello,shake— with loop, ping-pong or play-once. - Speed & timing: control the overall pace and stagger; reveal items one-by-one or all together.
Diagram one-liners
Whole diagram types compile from a compact syntax — no manual layout:
- Sequence —
user -> api: login, one message per line. - Flowchart, class, ER, state, mind map, journey, pie, bar/line charts, venn, timeline, gantt.
- Or import them from mermaid or draw.io and edit here.
Themes & export
Four built-in themes — light, dark, midnight, cream — plus per-item colors and custom backgrounds.
- Diagrams: export an animated GIF (supersampled) or a PNG / JPEG still at 3× resolution.
- Video studio: export MP4 or WebM.
- An optional slicerflow corner mark can be toggled on; it's off by default.
Full reference
The complete, always-current language reference — every look, icon, field and diagram type, with a searchable icon gallery — lives in the studio's Docs tab. Open it alongside your canvas so examples render live as you read.