Demo gallery

Select a node and its lines come forward in ink while the rest fade; a line crossing a card is lifted above it and dashed. One option, highlightConnected, and a trace mode that follows the whole path.

A ManyChat-style chatbot builder: message cards whose every button owns its own connection dot, orange and red branches for "on reply" and "no reply", a step editor that re-measures the card as you type, and a Preview that runs the bot along the lines you drew.

A top-down marketing automation builder: a trigger with removable criteria chips, a spine of steps, Branches whose paths fan out under chips, a computed layout that re-flows with a short animation on every edit, a "+" on every line and at the end of every path, a property panel with a hint under each field, undo for everything, Save / Load, and a Test flow in which a token walks a sample contact through the automation while delays fast-forward.

Program a multi-use robot arm on a timeline docked along the bottom, and watch it work in 3D. Open the Library and drag commands into place (Pick, Place, Insert into, Close lid, Stamp…), set each one in a Fieldia popup, and wrap steps in a Repeat loop whose way back runs port to port. Press Run: the six-axis cobot in the centre reaches, grips, inserts, presses and stamps while its A1–A6 joint angles count, the cards light up in turn, and a map of the cell from above and a run log follow along. Simple mode is one line for one arm; Advanced puts two arms, a conveyor and a vision camera in lanes on a time ruler, where a dashed line makes one step wait for another. The program is checked as you edit: a Place with an empty gripper or a seventh box for a six-slot pallet is flagged on its card, and Run says what to fix.

A deployment-automation builder: a GitLab push runs through a Condition and a health-check Switch to Kubernetes, Datadog, PagerDuty, Jira, ServiceNow and Slack steps. Add steps with the "+" on any output (the flow re-arranges itself), edit each step in the side panel, group a sub-flow in a sticky note, undo anything, save and load, and press Test workflow to watch the run take the branch its rules decide.

A workflow editor built only on Grafloria's public APIs. Steps are data-driven templates whose rows anchor their ports; a Switch's outputs follow its rules in one undo step; “+” on free outputs and on links asks the page for the next step; insertion makes room downstream; Tidy lays the flow out in port order; a run streams over the flow without touching the document; read-only is one switch; and a refused connection says why.

An order-to-cash process across four lanes: every step sits in the lane of whoever does it, and the connections cross lanes. Move a step to another lane, resize a lane by its border, reorder lanes by their titles, fold a lane to a band, lay the pool out: every edit is one undo step.

The DEFAULT mode of `dashboard()`: no width authored, so the board is 100% of its container at zoom 1 — laid out at real CSS pixels, the way gridstack and react-grid-layout lay out, never a picture the camera scales. Rows keep their height (GROW, the fluid default): drag or resize one tile and no other tile changes size; the board extends downward and the wheel scrolls it. Shrink the container ("Narrow container") and the board follows; the type stays 30 px. Switch to FIT and the board keeps its height instead — FIT MEANS BOUNDED: rows squeeze so everything stays on one screen, the row floor is a capacity, and "+ Add a row" is REFUSED, visibly, when there is no room; nothing is ever painted past the board's edge. `mode: 'fixed'` (or an explicit width) keeps the framed-world behaviour for a dashboard embedded inside a larger diagram — see dashboard/dashboard-builder.html. "Drag" picks the handle: anywhere on the card; BY CAPTION (`dragHandle: true`, the DevExpress caption drag — the caption strip is the only grip, so a table body scrolls and a legend clicks instead of starting a move); or BY GRIP (`{ grip: true, position, placement }` — a painted grip, left / center / right, INSIDE the header band or OUTSIDE as a tab above the card like the DevExpress item bar; it shows on the SELECTED widget only — click a widget to select it, click the board to clear). `handle.setDragHandle()` switches it live. The OPERATIONS row is a SECTION (a widget carrying `widgets`) with a CAPTION painted by the kit (0.4.22): a 44 px band with a subtitle, an ⓘ and two action buttons, reserved above its children; a press on the band selects the section, an action fires `onCaptionAction`, "Caption" switches it live through `handle.setCaption()` — a tab above the frame, centred and uppercase with its own fill, on hover only, or none.

A Kanban board built from dashboard() data: each column is a one-column section with gravity, so cards stack, a gap closes when a card leaves, and a card dropped between two others pushes them down. A card dragged into another column is adopted live, and one undo puts the whole move back. Cards are autoHeight — as tall as their text, re-measured when the width changes — and canDrop keeps cards inside columns and refuses a column at its WIP limit, saying why. From the keyboard, Ctrl+← and Ctrl+→ move a card to the next column, where a full column stops it and says why, and Ctrl+↑ and Ctrl+↓ move it within its column.

A full team board built from dashboard() options. Lists are sections that only trade places (movable: 'row'), keep their cards in order (stack), carry a frosted tint (background) and an "Add a card" footer; new lists come from addWidget. Cards are autoHeight widgets with covers, labels, due dates, checklists and people; canDrop holds the work-in-progress limits. Click a card for the full editor — description, checklist, attachments, comments, cover, move, copy, archive — and it resizes as you go.

The diagrams Claude and ChatGPT hand-write as SVG — zones with corner captions, a name over a muted line, coloured labels riding their lines — drawn by Grafloria, from the native API or from Mermaid.

The look of an AI-drawn architecture diagram — zones as regions, boxes sized to their words in rows, straight lines where boxes line up, bends in the gutters, a note beside what it warns about — from Grafloria Mermaid with no coordinates in it.

Design a database on the board and get live SQL: table cards with inline names, types and UQ / NN switches, foreign keys made by dragging a column's grip onto another table, coloured groups that fold away, DDL for SQLite, PostgreSQL or MySQL that rewrites itself on every edit, DDL import and export, and a query runner that builds the schema in a real in-browser database — all of it undoable.

Mermaid's architecture-beta and block-beta, read by Grafloria: groups as regions, services placed where their sided lines say, a block grid with spans and holes, a classic 3-tier application with security down every layer — laid out, editable, and written back as the same Mermaid.