timdp / swirly

A marble diagram generator.
https://swirly.dev
MIT License
118 stars 3 forks source link
documentation javascript marble-diagrams nodejs observable reactive-programming rxjs svg typescript

Swirly

A marble diagram generator.

npm JavaScript Standard Style

Example

Here's Swirly rendering the effect of the concatAll operator:

concatAll

The image above was built from this marble diagram specification.

Diagram specifications use an extension of the syntax used for RxJS marble testing. Please consult the examples to learn how to create diagrams.

Web Version

You can use Swirly in your browser at swirly.dev.

The Web version allows you to edit diagram specifications in real time and export them to an SVG or a PNG image.

CLI Version

Swirly is also available as a command-line utility. To run it, you need a sufficiently recent version of Node.js.

To install Swirly on your machine, just install the swirly npm package:

npm install -g swirly

Next, create diagram.txt with your diagram specification. Take a look at the examples to learn about the expected syntax.

You can then generate an SVG image from the specification by simply running:

swirly diagram.txt diagram.svg

Swirly can also output PNG images. Since PNG is a raster image format, you may want to increase the resolution to get a higher-quality result. You can do so by passing --scale followed by a percentage. For example, this will render the image at twice its original size:

swirly --scale=200 diagram.txt diagram.png

Author

Tim De Pauw

License

MIT