xstate-plantuml

xstate-plantuml

Visualize a xstate or react-automata statechart as a plantuml state diagram.

Installation

npm install xstate-plantuml

Usage

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 compile to the following image

Examples

Hierarchical state

• json
• puml

Parallel state

• json
• puml

History state

• json
• puml

Guards and actions

• json
• puml