- Exciting release!Introducing "safe npm". Learn more →
xstate-plantuml
Advanced tools
- Version published
- Maintainers
- 1
- Weekly downloads
- 637
- decreased by-13.45%
Weekly downloads
Readme
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
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
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
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
Examples
Hierarchical state
Parallel state
History state
Internal transitions
Guards, actions and activities
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.