xstate-plantuml
Visualize a xstate or react-automata statechart as a plantuml state diagram.
Try online
Installation
npm install xstate-plantuml
Usage
import xstate-plantuml
and call it's default export using a xstate config or machine
; const config = key: 'light' initial: 'green' states: green: on: TIMER: 'red' red: on: TIMER: 'green' ; ;
Which returns a string containing the following plantuml source
@startumlleft to right directionstate "light" as light { [*] --> light.green state "green" as light.green { light.green --> light.red : TIMER } state "red" as light.red { light.red --> light.green : TIMER }}@enduml
Which you can render to the following image
Options
In addition to a state machine, visualize
accepts an options map
option | default | description |
---|---|---|
leftToRight | true | whether to render left to right or top to bottom |
skinParams | [] | Additional skinparams to include |
Our previous example with different options
;
@startumlskinparam monochrome true state "light" as light { [*] --> light.green state "green" as light.green { light.green --> light.red : TIMER } state "red" as light.red { light.red --> light.green : TIMER }}@enduml
compiles to