lucmartens / Xstate Plantuml
Licence: mit
Visualize a xstate or react-automata statechart as a plantuml state diagram
Stars: ✭ 52
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Xstate Plantuml
Netbeans Mmd Plugin
Free mind map and PlantUML editor with plugins for both NetBeans and Intellij
Stars: ✭ 283 (+444.23%)
Mutual labels: plantuml
Arkit
JavaScript architecture diagrams and dependency graphs
Stars: ✭ 671 (+1190.38%)
Mutual labels: plantuml
Swiftplantuml
A command-line tool and Swift Package for generating class diagrams powered by PlantUML
Stars: ✭ 34 (-34.62%)
Mutual labels: plantuml
Aws Icons For Plantuml
PlantUML sprites, macros, and other includes for Amazon Web Services services and resources
Stars: ✭ 309 (+494.23%)
Mutual labels: plantuml
Aws Plantuml
PlantUML sprites, macros, and other includes for AWS components.
Stars: ✭ 565 (+986.54%)
Mutual labels: plantuml
Asciidoctor Plantuml.js
Extension for Asciidoctor.js that provides integration with PlantUML using PlantUML Server. As a bonus it works in Antora.
Stars: ✭ 24 (-53.85%)
Mutual labels: plantuml
plantuml2ddl
Intellij IDEA plugin- MySQL DDL and PlantUML convert to each other.
Stars: ✭ 23 (-55.77%)
Mutual labels: plantuml
Lein Plantuml
A Leiningen plugin for generating UML diagrams using PlantUML
Stars: ✭ 43 (-17.31%)
Mutual labels: plantuml
Vscode Markdown Pdf
Markdown converter for Visual Studio Code
Stars: ✭ 571 (+998.08%)
Mutual labels: plantuml
Goplantuml
PlantUML Class Diagram Generator for golang projects
Stars: ✭ 352 (+576.92%)
Mutual labels: plantuml
Plantuml Gradle Plugin
Gradle plugin to build PlantUML diagrams from code (for living and up-to-date documentation)
Stars: ✭ 27 (-48.08%)
Mutual labels: plantuml
Markdown Preview Enhanced
One of the 'BEST' markdown preview extensions for Atom editor!
Stars: ✭ 3,478 (+6588.46%)
Mutual labels: plantuml
Plantuml Styler
Online tool to make your PlantUML diagrams look great.
Stars: ✭ 35 (-32.69%)
Mutual labels: plantuml
Cleancppproject
Clean C++ project for you to use. Features: Modern CMake, CPack, Doxygen, PlantUML, Catch Unit testing, static analysis
Stars: ✭ 276 (+430.77%)
Mutual labels: plantuml
Pandoc Plantuml Filter
Pandoc filter for PlantUML code blocks
Stars: ✭ 51 (-1.92%)
Mutual labels: plantuml
Grunt Md2html
Small Grunt MultiTask to convert Markdown files to HTML, supporting Grunt >= 1.0.0
Stars: ✭ 37 (-28.85%)
Mutual labels: plantuml
Tbls
tbls is a CI-Friendly tool for document a database, written in Go.
Stars: ✭ 940 (+1707.69%)
Mutual labels: plantuml
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
Parallel state
History state
Internal transitions
Guards, actions and activities
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].