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:

(Thanks to PlantText for the rendering services!)