State Machine Add-On

[dw-bst]

We at Bosch Sensortec GmbH extended WaveDrom with a state machine add-on (see the picture below for an example) - similar to the existing schematic and bit field editors. This uses d3.js as an external library.

According to the contribution guidelines this issue is to collect votes to have it integrated into WaveDrom. Please leave your comments below or click the thumbs up button to give a like.

[cmarqu]

I like this feature (but, admittedly, I'm biased since Dirk is my colleague).

[drom]

Hi @dw-bst , @cmarqu The idea of having WeveDrom like state machine rendering engine is awesome.
What algorithm do you use to place nodes on the diagram?
How does the textual description look like?

[dw-bst]

First time writing the description new nodes are just placed cheaply next to each other and have to be aligned via dragging by the user.

After dragging, the coordinates are transferred back to/updated in the WaveJSON.

For the above it looks like this:

{
  fsm: [
    { state: '0',							next: [{ state: 'one', cond: 'start', color: 'darkred' }] },
    { state: 'one',   def: 'STYLE_01',			next: [{ state: 'two',  def: 'TRDEF',  cond: 'm:fs(30){ult}i\nline\n:fs(12){wi}th :fs(23){\'\\n\'}' }] },
    { state: 'two',	  action: 'colored state',		next: [{ state: ['three', 'four'],	   cond: ['colored\nY-transition', 'to three', 'to :bf{four}'], color: 'orange',  def: 'ACTION' }] },
    { state: 'three',						next: [{ cond: 'self-transition\n(omit \'state\' in \'next\')' }, { state: 'two', cond: 'drag transition text', textcolor: 'red' }] },
    { state: 'four',  name: ':bf{four}', def: ['STYLE_06'] }
  ],
  def: {
    0:		  { color: 'darkred',  textstyle: 'bf' },
    one:	  { color: 'violet',   		name: 'nameoverride', textcolor: 'white',     action: 'italic :it{state action}' },
    two:	  { fill: 'lightblue', namecolor: 'blue', actcolor: 'rgb(64,128,255)', linecolor: 'darkblue' },
    four:	  { actionstyle: 'it' },
    'Note 7': { fill: 'pink',	    textcolor: 'darkred' },
    TRDEF:	  { condcolor: '#AABC56',  action: 'transition\n:fs(20){action}', actcolor: 'rgb(155,20,30)', linecolor: 'pink' },
    STYLE_01: { textstyle: ['bf'],		 fill: 'darkred' },
    STYLE_06: { namestyle: ['fs(60)'], action: 'italic def action', fill: 'green', linecolor: 'lightgreen', textcolor: 'lightgreen' },
    ACTION:	  {  actstyle: 'bf',	   action: [, 'bold def action'] }
  },
  notes: [
    { id: 'Note',	text: 'Drag a note\'s body.\nOr drag the tip to move whole note.\nOr click it to make the tip handle appear\nto change the tip\'s position only.', fill: 'rgb(255,222,222)' },
    { id: 'Note 2', text: 'Drag the background to change the viewport.' },
    { id: 'Note 3', text: 'Drag a state.', fill: 'lightblue' },
    { id: 'Note 4', text: 'Click a state to show all bezier handles\nof neighboring transitions.',  fill: 'lightgreen', textcolor: 'darkgreen' },
    { id: 'Note 5', text: 'Click a transition to show all\nbezier handles of this transitions.',    fill: 'violet' },
    { id: 'Note 6', text: 'Text can be :bf{bold},\n:it{italic},\nand/or changed in :fs(20){size}.', fill: 'rgb(255,96,64)' },
    { id: 'Note 7', text: 'Properties for states, transitions and notes can be outsourced to the :it{def} object.\nThe :it{def} property can be omitted for states and notes as the reference is also to the :it{state} and :it{id} property respectively.' }
  ],
  coord: {
    offset: [-260,-40],
    states: [['0',-150,90],['one',150,100],['two',600,150],['three',150,300],['four',-50,310]],
    transitions: [['0','one',-102,155,-5,159,0,0],['one','two',367,2,483,43,-34,-7],['two','three','four',624,243,438,332,346,364,541,296,350,299,185,390,56,25,-29,-17,-67,25],['three','three',58,247,142,199,3,-38],['three','two',332,237,325,91,-75,-20]],
    notes: [['Note',-116,202,-188,22],['Note 2',-106,-8,-94,7],['Note 3',150,25,150,63],['Note 4',614,27,601,106],['Note 5',595,364,477,326],['Note 6',450,219,450,225],['Note 7',117,425,107,425]]
  }
}

[damnsavage]

Cool, nice and compact representation.

[drom]

Automatic layout option would be useful.
You can use try https://github.com/dagrejs/dagre for automatic node placement.

[dw-bst]

Without dagre you can try it out from here:
https://github.com/dw-bst/wavedrom.github.io

[drom]

Here are some experiments around the topic:
https://beta.observablehq.com/@drom/circular-graph-layout

[dw-bst]

Thank you for your notes about initial placement.
I tried circular placement in in the beginning, but as fsm can get really big with lots of states I discarded that idea. Also, if you have states which already have coordinates how to handle these together with new states (which don't have coordinates)? That's why I think dagre isn't very suitable.
For initial stuff this might be helpful, but the user have to drag them to his/her liking anyway.

[lu94sca]

Are there any news about State Machine integration?

[gretzteam]

Hi
Was the state machine add-on ever implemented?

[wuliqunyy]

Hi,
Same question again....
Is the state machine add-on available?
Thanks,

[cmarqu]

It was indeed implemented, but not merged: wavedrom/wavedrom.github.io@master...dw-bst:master

[LucienMP]

I also would like this, and since then dagre-d3 has answered this problem I think, what is stopping us merging the above code, or wrapping dagre-d3 ?

Note the interesting application of using DOT DSL for representing DAG via DAGRE-dot parser.
(https://dagrejs.github.io/project/dagre-d3/latest/demo/interactive-demo.html)

@drom > could you comment please?

[drom]

I think the state-machine dialect should be discussed and designed as a separate project. Similar to https://github.com/wavedrom/bitfield and when it can be integrated into wavedrom.
Here are some initial sketches:

• https://github.com/wavedrom/circo
• https://observablehq.com/@drom/state-diagram
• https://beta.observablehq.com/@drom/circular-graph-layout

[drom]

I created a separate project for this add-on.

[cmarqu]

Since the original rendered image is not accessible anymore, I'm uploading it again here.
@drom Would you copy it to the initial post please?