Feature request: stand-alone state visualizer

[paambaati]

trafficstars

I looked and I could not find an API or a component that would just let me get the graph alone.

Use-case

We’re building our Playwright tests using state machines, and we’d love to show the state machine visualization for each test, as part of the reporter output.

We imagine either generating the images on the fly or as a build step, by enumerating each test and it’s corresponding state path. We might use something like skia-canvas for quickly generating the images and writing them to the file system.

[davidkpiano]

This is a good idea! We're already doing something similar internally: https://twitter.com/statelyai/status/1489664551100420097

We'll look into it as a potential feature.

[zachallaun]

As a possible extension to this, it would be great to expose a data interface for rendering a statechart, where the active state configuration can be specified as JSON. Mermaid, for instance, can render some state diagrams, but not ones as featureful as statecharts allow. It would be great to be able to visualize statecharts that aren't created using XState, but that could be translated into an implementation-agnostic data structure.

[Andarist]

JSON format of XState's configs is already pretty implementation-agnostic and I feel like it's most likely a good common denominator for what the viz should render. Other serializable formats are usually convertible to it.

[zachallaun]

I agree. As in the OP, a standalone API/component that could accept a machine config (not an XState machine) and an active state value would be very useful.