jssm-viz-cli is a command-line interface for jssm-viz, a flowchart vizualizer for fsl finite state machines, using jssm to render FSMs.
npm install jssm-viz-cliRun the machines with jssm, or visualize within code (instead of at the CLI) with jssm-viz.
See the fsl.tools website 😊
If you want to use this as a CLI in general, install globally, which creates a command-line wrapper:
``bash`
npm install -g jssm-viz-cli
And now you can do things like
`bash`
jssm-viz -i traffic-light.fsl --png
or
`bash`
jssm-viz -i traffic-light.fsl --png
If you'd prefer to use this as a CLI tool in a specific project, install it local to that project instead:
`bash`
npm install --save jssm-viz
And now you can add things to your scripts block in package.json like
`javascript`
{
scripts: {
"graph-fsl": "jssm-viz -i ./src/fsl/*.fsl --jpeg"
}
}
The underlying svg converter, sharp.js,
only exists for certain platforms.
This includes most common platforms.
1. If you're on Windows, make sure node is 64-bit.node
1. On any platform, make sure you're on versions 8, 12, or 13.
1. You'll need python
If any of these are a problem, the jssm-viz github action
can do it for you with no hassle.
Assuming that in the file traffic-light.fsl we have the FSL machine
`fsl
machine_name: "Traffic light example";
Green 'next' => Yellow 'next' => Red 'next' => Green;
[Red Yellow Green] ~> Off -> Red;
`
We can run the command
`bash`
jssm-viz -s traffic-light.fsl
You will produce the following image as SVG, in traffic-light.svg:
To write four images and two pieces of source to disk, run
`bash`
jssm-viz -s traffic-light.fsl --svg --png --jpeg --webp --dot --tree
This will produce traffic-light.fsl.svg, traffic-light.fsl.png, traffic-light.fsl.jpeg, traffic-light.fsl.webp, and two special cases: traffic-light.fsl.dot, which is the intermediate stage that's run through graphviz to produce the final graph, and a parse tree in jssm's internal format, in json, and traffic-light.fsl.tree, the JSON parsing of the source to the intermediate data state.
If one or more of the format flags are provided, those are the formats which will be produced. If none are provided, svg will be assumed.
There is also a --jpg, which produces JPEGs with the extension .jpg. Internally it's treated like a different format, so, if you specify both --jpg and --jpeg, you'll get two matching images under slightly different filenames.
Images will be placed in the same directory as the source, unless otherwise specified. This can be relevant if you're using globs to pick up multiple source files, by example.
For the non-vector non-source formats, it may be useful to control the render width. jssm-viz will attempt to set a sensible default, but if you prefer to handle it yourself, this would create a 1234 px wide render of the machine foo:
`bash`
jssm-viz -s foo.fsl --png --width 1234
The source flag -s takes a glob, which can be a filename, but doesn't have to be.
By example, if you want to render all machines from the current directory downwards into both PNGs and SVGs, try
`bash`
jssm-viz -s ./*/.fsl --png --svg
This will produce two images per source file.
Putting images where the source is isn't always desirable, and when you have a lot of machines, moving them after the render can be tedious.
jssm-viz-cli offers three output placement modes:
* In-place
* To directory
* To in-place directory
* To sourcenamed directory
`bash`
jssm-viz -s foo.fsl --inplace
In-place, the default mode, produces an image with the source's filename and the relevant extension, in the same place that the source was found.
`bash`
jssm-viz -s foo.fsl --todir ./renders
To directory allows you to specify a single directory that will contain all output. In this example, the directory renders would contain output (or be created if it didn't already exist.)
However, sometimes this causes filename conflicts, when different machines in different directories have the same filename.
Two modes help avoid those conflicts:
`bash`
jssm-viz -s foo.fsl --toinplacedir ./renders
To in-place directory will produce a path tree mimicing the original path tree under the target directory for matching fsl files, and place images there. For example, a/b/c/foo.fsl aimed at renders will produce renders/a/b/c/foo.svg.
`bash`
jssm-viz -s foo.fsl --tosourcenameddir ./renders
To sourcenamed directory will produce, for a/b/c/foo.fsl, a--b--c--foo.svg, which allows a flat directory to contain most patterns in a non-colliding easily slugged way.
Github action coming Real Soon Now ™
This is the above example:
`xml``
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
viewBox="0.00 0.00 125.08 260.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
Don't mind the mess: this just got started Dec 28 of 2019. Usable momentarily...