matthewp / robot

🤖 A functional, immutable Finite State Machine library
https://thisrobot.life
BSD 2-Clause "Simplified" License
1.92k stars 88 forks source link

A library to visualise Robot3 state machines #178

Open jbreckmckye opened 2 years ago

jbreckmckye commented 2 years ago

I already shared this on Twitter, but I thought I would raise an 'issue' to give it more visibility.

Robot3-Viz is a library for visualising Robot 3 finite state machines. You can use it with a plain JS API or with React.

For instance, given a state machine like

export const invokePromises = createMachine({
  idle: state(
    transition('load', 'loading')
  ),
  loading: invoke(async () => Promise.resolve(true),
    transition('done', 'idle',
      reduce((ctx: any, ev: any) => ({ ...ctx, user: ev.data }))
    ),
    transition('error', 'error',
      reduce((ctx: any, ev: any) => ({ ...ctx, error: ev.error }))
    ),
    transition('abort', 'idle')
  ),
  error: state()
})

The library outputs a visualisation like this

image

The library requires a DOM to render. If you want to use it as part of an automated process, it needs to be on a machine with either a screenbuffer or XVFB.

Documentation and more examples are in the README.

matthewp commented 2 years ago

Whoa! Did you tag me? I must have missed it.