Embedding state-machine-cat scripts in html

In your head:

<script
      src="https://state-machine-cat.js.org/state-machine-cat-inpage.min.js"
      type="module" defer> </script>

In your body:

      <script type="text/x-smcat"> on [color="darkgreen" active], off
      [color="maroon"]; on => off [color="red"]: flickSwitch() /
      makeNoise("off.wav"); off => on [color="#009900"]: flickSwitch() /
      makeNoise("on.wav"); </script>

result:

Introduction

When you include the state-machine-cat 'inpage' script in the head of your page like so ...

<script
      src="https://state-machine-cat.js.org/state-machine-cat-inpage.min.js"
      type="module" defer> </script>

... it will extend html with three script types, which will render into state machine diagrams:

type	what's it do?
text/x-smcat	accepts smcat
text/x-scxml	accepts SCXML
text/x-smcat-json	accepts smcat's abstract syntax tree format

When that is done, you can use scripts with one of the types above in the body of your page (e.g. <script type="text/x-smcat">a=>b;</script>).

These scripts take optional data attributes you can use to influence how things get rendered:

attribute	description
data-direction	Direction the graph should be rendered in. Possible values: top-down (default), left-right, bottom-top, right-left.
data-output-type	What you want to have rendered. Defaults to svg (for diagrams), but it's also possible to re-render the state machine in one of the avaible description languages: smcat, scxml and json.
data-engine	state-machine-cat currently uses GraphViz as a render engine. With the `data-engine` attribute it's possible to influence which layout algorithm GraphViz uses. By default it's dot, but it's also possible to specify other values are e.g. fdp or osage.
data-desugar	Boolean attribute that, when included, will make the render engine desugar the diagram.

Examples

Read from an url

Pass the url in the src attribute of the script tag:

<script type="text/x-smcat"
      src="samples/cat.smcat"></script>

Orientation with data-direction

In this example the states get layed out from left to right instead of top down because the script includes the data-direction attribute:

      <script type="text/x-smcat" src="samples/cassetteplayer.smcat"
      data-direction="left-right"> </script>

De-sugaring a state machine

If you want to render a state machine without any pseudo states that only exist for 'syntactic sugar', you can do this with the `data-desugar` attribute.

as is

      <script src="samples/desugarable.smcat" type="text/x-smcat"
      data-direction="left-right" </script>

de-sugared

      <script src="samples/desugarable.smcat" type="text/x-smcat"
      data-direction="left-right"
      data-desugar=true> </script>

You'll notice the choice is replaced by two regular transitions and the junction on the right with all permutations of transitions it describes:

Using SCXML

It's possible to embed SCXML:

      <script
      type="text/x-scxml"> <scxml
      xmlns="http://www.w3.org/2005/07/scxml" version="1.0"> <state id="off">
      <onentry><log expr="winston.log('switched lamp on')"/></onentry>
      <transition event="switch_flipped" target="on"/> </state> <state
      id="on"> <transition event="switch_flipped" target="off"/> </state>
      </scxml> </script>

or likewise, using a src attribute to load SCXML from somewhere else:

<script
      type="text/x-scxml" src="samples/sprint-states.scxml"></script>

Output formats other than svg

If you, for some reason don't want to render an svg, but one of the textual formats, you can specify an output type. This example specifies json to show the abstract syntax tree (AST):

<script type="text/x-smcat" data-output-type="json"> off: entry/
      <log expr="winston.log('switched lamp on')"/>, on; off => on:
      switch_flipped; on => off: switch_flipped; </script>

which will render this AST:

Error handling

When the render engine detects an error it will show the error. E.g. trying to render an invalid script, like so...

<script type="text/x-smcat">a => nosemicolon</script>

... will yield this:

... or when it couldn't find the script at the other end of the URL ...

<script src="this_thing_doesnot_exist" type="text/x-smcat"/>