Visualize a xstate or react-automata statechart as a plantuml state diagram.
npm install xstate-plantuml
import xstate-plantuml and call it's default export using a xstate config or machine
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
@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
}
}
@endumlWhich 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
visualize(config, {
leftToRight: false,
skinParams: ['monochrome true']
});@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
}
}
@endumlcompiles to
