Why VhyxChart

Static diagrams show what exists. Systems are about what happens: a request hops through services, a job fails, a value moves during a sort. VhyxChart diagrams carry that behaviour, so one diagram replaces a slide deck of screenshots.

Comparison

	VhyxChart	Mermaid	D2 / PlantUML	Hand-made animation
Text source, diff-able
Automatic layout
Animated scenarios, many per diagram				one per file
Play / pause / step / scrub
Animated SVG that plays on GitHub				GIF
Line-accurate errors with fixes		partial	partial	—
Size (browser bundle, gzip)	~30 KB	hundreds of KB	server-side	—

The model

Structure is laid out once and never moves. A scenario compiles to a timeline, and every frame is a pure function of time. That is why scrubbing backwards is exact, exports are deterministic, and the same diagram renders identically in Node, the browser and VS Code.

flowchart LR
  push([git push]) --> build[Build]
  build --> unit[Unit tests] & lint[Lint] & e2e[E2E tests]
  unit & lint & e2e --> gate{All green?}
  gate -->|yes| deploy[Deploy]
  gate -->|no| fix[Fix & retry]
  deploy --> prod[(Production)]

scenario Green build
  push -> build
  build is active
  wait 400ms
  build is done
  build -> unit, build -> lint, build -> e2e
  unit, lint, e2e are active
  wait 600ms
  unit, lint, e2e are done
  unit -> gate, lint -> gate, e2e -> gate
  gate -> deploy : yes
  deploy is active
  deploy -> prod
  prod, deploy are done
  caption Shipped to production

scenario Flaky E2E
  push -> build
  build is done
  build -> unit, build -> e2e
  unit is done
  e2e is error
  note e2e : timeout in checkout.spec.ts
  e2e -> gate
  gate -> fix : no
  fix is warn