Digital State Machine Graphic Design

General
1

I suppose this is actually off topic, but I am looking for a graphic design aid for designing DSMs (which will be implemented using node-red-contrib-dsm). So I am looking for something that will let me layout shapes with text inside and lines joining them up, with text alongside the lines to indicate the transitions. If the lines were attached to the state boxes so that one can drag things about and the lines stay joined up that would be good.

It needs to be able to run under Ubuntu.

I have done some searching but not found anything that looks particularly useful, but I am not sure what I should be searching for. Any suggestions?

2

This one uses plain HTML5 Canvas.

http://madebyevan.com/fsm/

s-01
s-01698Ă—852 26.1 KB

1 Like
3

I think I am looking for something a bit more sophisticated than that. I can't work out how to increase the size of the state circles for example. Also I need to be able to save it with my node-red git project and be able to edit it again. I can't see how to import an existing one.

4

I understand. Certainly it can be done with HTML5 Canvas or D3.js. I don´t know how much work it may require. Of course it will depend on the features you want to implement.

5

Take a look at
https://mermaid-js.github.io/mermaid/#/

This allows you to efficiently create all kinds of diagrams using a markdown-like format.

And you could dynamically create them.

1 Like
6

Beat me to it. Was gonna suggest mermaid myself. Should be pretty easy to automate it (as opposed to saving the static states) if necessary by generating the text from your data

7

Have you tried the node-red-contrib-finite-statemachine node?

The states and transitions are entered as JSON and the node outputs a nice graph.

image
image1000Ă—748 24.7 KB

The JSON syntax for the input is pretty easy. Below, states start with ST and transitions with tr.

{
    "state": {
        "status": "ST_INITIALISATION"
    },
    "transitions": {
        "ST_INITIALISATION": {
            "tr_up": "ST_UP"
        },
        "ST_UP": {
            "tr_high": "ST_OPEN"
        },
        "ST_OPEN": {
            "tr_timer": "ST_WARNING"
        },
        "ST_WARNING": {
            "tr_again": "ST_WARNING",
            "tr_timer": "ST_DOWN",
            "tr_light": "ST_OPEN"
        },
        "ST_DOWN": {
            "tr_light": "ST_UP",
            "tr_low": "ST_CLOSED"
        },
        "ST_CLOSED": {
            "tr_light": "ST_UP"
        }
    }
}
8

Thanks for the suggestion @rei_vilo, but I am looking for a graphic tool to help me design the dsm in the first place, rather than show me what I have ended up with.
There is the same issue with mermaid, I think, I need GUI input.

9

These two look quite interesting, they are not specifically designed as state machine design s/w but seem to have the needed features. Will have a play with them.
Dia: http://dia-installer.de/doc/en/index.html
Pencil: http://pencil.evolus.vn/

10

I've used Dia before. A kind of poor-man's Visio :grinning:

There are a number of similar online tools as well.

11

I wouldn't call it that, in some aspects it's better than Visio. :grinning:

And it integrates nicely with LaTeX. I've used it in my diploma thesis many many years ago for all sorts of diagrams, schemas, etc. :slightly_smiling_face:

12

Yes, I think Dia will do the job fine. In fact LibreOffice Draw isn't bad too.

13

Haha, I didn't say it was worse :slight_smile:

Like most Microsoft products, I have a love/hate relationship with Visio. I'm licensed through work and have been for decades so I tend to use it over other tools.

14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.