Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

xstate-plantuml

Package Overview
Dependencies
0
Maintainers
1
Versions
12
Issues
File Explorer

Advanced tools

xstate-plantuml

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

    0.5.0latest
    GitHub

Version published
Maintainers
1
Weekly downloads
637
decreased by-13.45%

Weekly downloads

Readme

Source

xstate-plantuml

npm Travis

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

usage

Options

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

optiondefaultdescription
leftToRighttruewhether 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

  • json
  • puml

alarm

Parallel state

text-editor

History state

payment

Internal transitions

word

Guards, actions and activities

download

Keywords

FAQs

Last updated on 28 May 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc