Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mogsie/xstate-plantuml
Visualization of xstate statecharts using plantuml
https://github.com/mogsie/xstate-plantuml
Last synced: about 1 month ago
JSON representation
Visualization of xstate statecharts using plantuml
- Host: GitHub
- URL: https://github.com/mogsie/xstate-plantuml
- Owner: mogsie
- License: mit
- Created: 2018-01-25T22:42:16.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-01T07:15:15.000Z (over 6 years ago)
- Last Synced: 2024-08-02T09:27:38.715Z (4 months ago)
- Language: JavaScript
- Homepage: https://mogsie.github.io/xstate-plantuml/
- Size: 6.84 KB
- Stars: 18
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome_xstate - XState PlantUML
README
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
or (if not installed globally)
npm run main
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:
```json
{
"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": {}
}
}
}
}
}
}
```
```plantuml
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:
OffAonentry / startUnblockTimeronexit / cancelUnblockTimerBFLICKUNBLOCKOnConentry / startUnblockTimeronexit / cancelUnblockTimerDonentry / turnOnonexit / turnOffEonentry / startUnblockTimeronexit / cancelUnblockTimerGFLICKFUNBLOCKUNBLOCKFLICKFLICK
(Thanks to PlantText for the rendering services!)