Skip to content
A marble diagram generator.
JavaScript CSS HTML Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
examples
lib
scripts
src
.babelrc
.editorconfig
.gitattributes
.gitignore
LICENSE
README.md
index.js
now.json
package.json
rollup.config.js
yarn.lock

README.md

Swirly

npm Dependencies JavaScript Standard Style

A marble diagram generator. Produces both vector and raster images.

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. You can find a few examples in this repository.

Web Version

You can use Swirly in your browser at swirly.now.sh.

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. It was written in JavaScript and so requires 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

You can’t perform that action at this time.