Skip to content

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

License

Notifications You must be signed in to change notification settings

lucmartens/xstate-plantuml

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

xstate-plantuml

npm Travis

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

usage

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

options

Examples

Hierarchical state

alarm

Parallel state

text-editor

History state

payment

Internal transitions

word

Guards, actions and activities

download