xstate-plantuml
xstate-plantuml copied to clipboard
mogsie
Visualization of xstate statecharts using plantuml
Visualization for xstate using plantuml
Given an xstate definition of a statechart, this tool will output a plantuml source rendering of the statechart.
Installation:
(global install)
npm -g install
Usage:
xstate-plantuml <requireablepackage>
or (if not installed globally)
npm run main <requireablepackage>
The code will "require" the first argument, expecting it to be a full machine definition, and will print out a plantuml source code that corresponds to the statechart.
Example invocation:
xstate-plantuml ./on-off
will load the ./on-off.json file and print out the PlantUML diagram source code
For example, given the following statechart:
{
"initial": "Off",
"states": {
"Off": {
"on": {
"FLICK": "On"
},
"initial": "A",
"states": {
"A": {
"on": {
"FLICK": "A",
"UNBLOCK": "B"
},
"onEntry": {
"type": "startUnblockTimer",
"delay": 2000
},
"onExit": {
"type": "cancelUnblockTimer"
}
},
"B": {}
}
},
"On": {
"on": {
"FLICK": "Off"
},
"initial": "C",
"states": {
"C": {
"on": {
"UNBLOCK": "D"
},
"onEntry": {
"type": "startUnblockTimer",
"delay": 500
},
"onExit": {
"type": "cancelUnblockTimer"
}
},
"D": {
"onEntry": {
"type": "turnOn"
},
"onExit": {
"type": "turnOff"
},
"initial": "E",
"states": {
"E": {
"on": {
"UNBLOCK": "F"
},
"onEntry": {
"type": "startUnblockTimer",
"delay": 500
},
"onExit": {
"type": "cancelUnblockTimer"
},
"initial": "G",
"states": {
"G": {
"on": {
"FLICK": "G"
}
}
}
},
"F": {}
}
}
}
}
}
}
left to right direction
@startuml
[*] --> Off
state Off {
[*] --> A
Off --> On: FLICK
state A {
A --> A: FLICK
A --> B: UNBLOCK
A: onentry / startUnblockTimer
A: onexit / cancelUnblockTimer
}
state B {
}
}
state On {
[*] --> C
On --> Off: FLICK
state C {
C --> D: UNBLOCK
C: onentry / startUnblockTimer
C: onexit / cancelUnblockTimer
}
state D {
[*] --> E
D: onentry / turnOn
D: onexit / turnOff
state E {
[*] --> G
E --> F: UNBLOCK
E: onentry / startUnblockTimer
E: onexit / cancelUnblockTimer
state G {
G --> G: FLICK
}
}
state F {
}
}
}
@enduml
This results in the following diagram, after running it through PlantUML:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="342px" preserveAspectRatio="none" style="width:1496px;height:342px;" version="1.1" viewBox="0 0 1496 342" width="1496px" zoomAndPan="magnify">
[] - -> Off state Off { [] - -> A Off - -> On: FLICK state A { A - -> A: FLICK A - -> B: UNBLOCK A: onentry / startUnblockTimer A: onexit / cancelUnblockTimer } state B { } } state On { [] - -> C On - -> Off: FLICK state C { C - -> D: UNBLOCK C: onentry / startUnblockTimer C: onexit / cancelUnblockTimer } state D { [] - -> E D: onentry / turnOn D: onexit / turnOff state E { [*] - -> G E - -> F: UNBLOCK E: onentry / startUnblockTimer E: onexit / cancelUnblockTimer state G { G - -> G: FLICK } } state F { } } } @enduml
PlantUML version 1.2018.00(Thu Jan 04 19:42:56 UTC 2018) (GPL source distribution) Java Runtime: Java(TM) SE Runtime Environment JVM: Java HotSpot(TM) 64-Bit Server VM Java Version: 1.7.0_25-b15 Operating System: Linux Default Encoding: UTF-8 Language: en Country: US -->
(Thanks to PlantText for the rendering services!)
mogsie