Getting started

VhyxChart turns plain text into diagrams that move. The structure uses familiar flowchart and sequence syntax; a scenario block adds the story: tokens travel along edges, nodes change state, notes appear. Play, pause, step and scrub like a video.

Your first diagram

flowchart LR
  user([User]) --> app[Web app] --> api[API] --> db[(Database)]

scenario Save a profile
  user -> app : click Save
  app -> api : PATCH /me
  api is active
  api -> db : UPDATE
  db is done
  api -> app : 200
  api is done
  note app : Saved

Three ideas are all you need:

• Structure — nodes and edges: a[Label] --> b[(Database)].
• Scenario — a -> b : label sends a token along the edge (either direction).
• State — api is active | done | error | warn colours a node until changed.

Where it runs

• Markdown: ```vhyx fences in docs sites, VS Code preview, and GitHub READMEs (via animated SVG export).
• React: <VhyxChart>, a headless hook, and a server-rendered component.
• Any page: one script tag and a <vhyx-chart> element.
• The playground — edit and share.

Install

pnpm add @vhyxchart/react        # React
pnpm add @vhyxchart/core         # framework-free engine + player
pnpm add -D @vhyxchart/cli       # render .vhyx / README.md to animated SVG