Diagrams that move.
Write architecture, flows, sequences and algorithms as plain text. Add a scenario and watch requests travel, services change state and values sort — in docs, READMEs, VS Code and React.
npm install @vhyxchart/react
---
title: Checkout request
---
flowchart LR
client([Browser]) --> gw[API Gateway]
gw -->|verify| auth[Auth]
gw --> orders[Orders]
orders --> db[(Postgres)]
orders -.-> queue{{Queue}}
queue --> mail[Email worker]
subgraph backend [Backend]
auth
orders
db
end
scenario Happy path
client -> gw : POST /checkout
gw -> auth : token
auth is done
gw -> orders
orders is active
orders -> db : insert
db is done
orders -> queue, orders -> gw
note orders : Order #42 created
queue -> mail : receipt
mail is done
gw -> client : 201 Created
orders is done
scenario Token expired
client -> gw : POST /checkout
gw -> auth
auth is error
note auth : JWT expired
gw -> client : 401
client is warn
A request travels through a gateway into services and a queue. Two scenarios: the happy path and an auth failure.
Structure plus a story
The structure is ordinary diagram text: nodes, edges, groups. A scenario block adds the story — tokens travel along edges, nodes become active, done or failed, notes appear. One diagram can hold many scenarios: the happy path, the timeout, the retry.
Layout is computed once and never jumps. Every frame is a pure function of time, so scrubbing backwards is exact and the same text renders the same everywhere.
Built for real documentation
Scenarios
Many stories on one layout. Switch between success, failure and edge cases.
Play, step, scrub
Keyboard controls, reduced-motion support, pauses when off-screen.
Animated on GitHub
SMIL-animated SVG plays inside README images — no JavaScript, no GIFs.
Bring existing diagrams
Flowcharts, sequence and state diagrams you already have render unchanged.
Helpful errors
Invalid text never crashes: you get the line, the problem and a suggestion.
Tiny and deterministic
~30 KB gzipped, zero dependencies, identical output in Node and the browser.
When a static diagram isn’t enough
Architecture docs
Show how a request really moves through your services — not just which boxes exist.
Incident reviews
Replay the failure path step by step: the timeout, the retry, the queue backing up.
Teaching algorithms
Values swap and pointers move, so sorting and search finally make sense.
API and auth flows
Walk through OAuth, webhooks and handshakes one message at a time.
Use it wherever you write
One text format, four ways to show it.
GitHub READMEs
npx @vhyxchart/cli render flow.vhyx 
Animated SVG that plays inside images. No JavaScript.
React
<VhyxChart source={source} autoplay controls />Interactive player, headless hook, server component.
Any web page
<vhyx-chart> flowchart LR a --> b </vhyx-chart>
One script tag and a custom element.
VS Code
```vhyx flowchart LR a --> b ```
Live preview in Markdown and .vhyx files.
Part of the Vhyxara family
This page is built with VhyxUI and publishes a VhyxSeal manifest for AI agents.
Make your next diagram move
Write it as text, add a scenario, and ship it to your docs, README or app.