Visualize a xstate or react-automata statechart as a plantuml state diagram
npm install xstate-plantuml
Visualize a xstate or react-automata statechart as a plantuml state diagram.
#### Try online
``
npm install xstate-plantuml
import xstate-plantuml and call it's default export using a xstate config or machine
`js
import visualize from 'xstate-plantuml';
const config = {
key: 'light',
initial: 'green',
states: {
green: {
on: {
TIMER: 'red'
}
},
red: {
on: {
TIMER: 'green'
}
}
}
};
visualize(config);
`
Which returns a string containing the following plantuml source
`plantuml
@startuml
left to right direction
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
`
Which you can render to the following image
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
`js`
visualize(config, {
leftToRight: false,
skinParams: ['monochrome true']
});
`plantuml
@startuml
skinparam 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
!word