xstate-plantuml

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

Try online

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

Options

In addition to a state machine, visualize accepts an options map

| option | default | description | | ----------- | ------- | ----------------------------------------------------------------- | | leftToRight | true | whether to render left to right or top to bottom | | skinParams | [] | Additional skinparams to include |

Our previous example with different options

visualize(config, {
  leftToRight: false,
  skinParams: ['monochrome true']
});

@startuml
skinparam monochrome true

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

compiles to

Examples

Hierarchical state

• json
• puml

Parallel state

• json
• puml

History state

• json
• puml

Internal transitions

• json
• puml

Guards, actions and activities

• json
• puml