Diagrams should move when the explanation moves.
Isostate is an open-source toolkit for authoring scroll-driven isometric visual stories in YAML, compiling them at build time, and embedding them as lightweight SVG runtime bundles in documentation, product pages, technical explainers, and presentations.
Enterprise pressure
Enterprise systems are hard to explain because the relevant state changes over time. Static diagrams flatten migration plans, infrastructure flows, product tours, onboarding paths, and architecture decisions into one overloaded picture. Heavy animation stacks create the opposite problem: nice visuals that are difficult to review, version, deploy, or keep close to the documentation source.
Product answer
Isostate keeps the story in YAML. Scenes define elements, layers, connections, transitions, and deltas; the compiler validates the scene at build time and emits a browser-ready SVG runtime bundle. The same source can be driven by scroll, step-through presentation controls, a timeline, or custom documentation UI.
Operating model
Authors write .isostate.yaml scene definitions; the compiler parses, validates, and emits a static runtime bundle with scene data and SVG assets; a page then drives the scene through scroll progress, presentation steps, a timeline, or custom UI.
Decision path
Isostate is for the moment where a diagram is technically correct and still fails the room.
Enterprise architecture, infrastructure, onboarding, and product change are not static pictures. They are sequences: this system appears, that dependency moves, this route activates, this boundary becomes visible, this release changes the operating model.
Isostate turns that sequence into source-controlled visual storytelling. Teams author scenes as YAML, compile them during development or CI, and embed a lightweight SVG runtime bundle wherever the explanation lives.
That makes visual explanation part of the delivery system instead of a fragile design artifact. The source can be reviewed. The output can be statically hosted. The same scene can become a scroll-driven explainer, a presentation, a docs example, or a product tour.
Enterprise relation
Capabilities
YAML scene authoring for elements, layers, connections, transitions, and scene deltas
Build-time parsing, validation, compilation, and static bundle generation
SVG-native output with no browser-side YAML parsing and no 3D engine
Scroll-driven, presentation-style, timeline, or custom controller usage
Themeable scenes through CSS variables and bring-your-own SVG assets
Agent authoring skill for creating and maintaining scene files
Enterprise use cases
Related articles