xstate-plantuml
Advanced tools
Weekly downloads
Readme
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
}
}
@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
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
}
}
@enduml
compiles to
FAQs
Visualize a xstate or react-automata statechart as a plantuml state diagram
The npm package xstate-plantuml receives a total of 496 weekly downloads. As such, xstate-plantuml popularity was classified as not popular.
We found that xstate-plantuml demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.