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

karfau/xstate-plantuml

This branch is 204 commits ahead of lucmartens/xstate-plantuml:master.

Folders and files

NameName
Last commit message
Last commit date
Apr 17, 2022
Apr 17, 2022
Apr 17, 2022
Aug 25, 2018
Feb 22, 2021
May 7, 2020
Mar 17, 2021
Apr 17, 2022
Apr 30, 2022
Feb 19, 2021
Mar 17, 2021
Nov 8, 2020
Nov 8, 2020
Apr 30, 2022

Repository files navigation

xstate-plantuml

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

This fork was created to add improved support for xstate@v4 and is currently installable by adding the following to package.json:

  "@karfau/xstate-plantuml": "github:karfau/xstate-plantuml#{TAG OR HASH}"

Installation

  "@karfau/xstate-plantuml": "github:karfau/xstate-plantuml#{TAG OR HASH}"

peerDependencies

Peer dependencies are optional: the methods that need them have an optional argument to pass alternatives that provide the same API.

  • xstate
    used by visualize(see Options)
    to install, run npm install xstate
  • execa used by src/transfer:transfer.plantuml
    to install, run npm install execa

Usage

visualize

import @karfau/xstate-plantuml and call it's default export using a xstate config or machine

import visualize from '@karfau/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
xstate xstate (resolved module with that name) to pass alternative implementaitons (e.g. for testing)

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

transfer

To directly use plantuml to transform a puml file to an image (or anything else) and only do that after updating the puml file.

There are some extra dependencies required for that:

  • execa (see peerDependencies)
  • depending on the command used to execute plantuml:
    • docker
    • java and a local copy of plantuml.jar

test-transfer.js shows how it can be used.

To import the transfer module in your project:

import transfer from '@karfau/xstate-plantuml/src/transfer';

transfer({...});

Examples

Not all examples are listed here, please check examples for more

Hierarchical state

alarm

Parallel state

text-editor

History state

payment

Internal transitions

word

Guards, actions and activities

xstate@v3:

download

xstate@v4:

download

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%