Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
xstate-plantuml
Advanced tools
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 513 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 for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.