xstate-plantuml

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

xstate-plantuml

★ 19 Open GitHub ↗

Visualization of xstate statecharts using plantuml

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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:

```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:

[*] - -> 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
--></g></svg>

(Thanks to PlantText for the rendering services!)

xstate-plantuml

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

xstate-plantuml

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README