Visualizer

Caution

This component is being built to provide interactive examples in the docs.

It may eventually become a separate public NPM package, but right now it is quite basic.

Non-interactive (no initial state)

Astro

import StateChart from '../../../components/StateChart/StateChart.astro';

<StateChart
  start="off"
  states={['off', 'on']}
  transitions={[
    { from: 'off', to: 'on', label: 'TOGGLE'},
    { from: 'on', to: 'off', label: 'TOGGLE'}
  ]}
  />

HTML

<script>
  import '../../../components/StateChart/YmChart';
  import '../../../components/StateChart/YmState';
  import '../../../components/StateChart/YmTransition';
</script>

<ym-chart start="off">
    <ym-state name="off"/>
    <ym-state name="on"/>
    <ym-transition from="off" to="on" label="TOGGLE"/>
    <ym-transition from="on" to="off" label="TOGGLE"/>
</ym-chart>

Renders

Interactive (with initial state)

Astro

import StateChart from '../../../components/StateChart/StateChart.astro';

<StateChart
  start="off"
  initial="off"
  states={['off', 'on']}
  transitions={[
    { from: 'off', to: 'on', label: 'TOGGLE'},
    { from: 'on', to: 'off', label: 'TOGGLE'}
  ]}
  />

HTML

<script>
  import '../../../components/StateChart/YmChart';
  import '../../../components/StateChart/YmState';
  import '../../../components/StateChart/YmTransition';
</script>

<ym-chart start="off" current="off">
    <ym-state name="off"/>
    <ym-state name="on"/>
    <ym-transition from="off" to="on" label="TOGGLE"/>
    <ym-transition from="on" to="off" label="TOGGLE"/>
</ym-chart>

Renders