Statechart diagramming/generating tool

[macasas]

I am aware that if I build a hisma/hisma_flutter app I get a visma diagram to see how it is working.

But in order to build that app, I would like to design a statechart.

Is there a text-based DSL, or diagramming tool like plantuml, that can help me create a statechart at the design stage, and then perhaps generate hisma, or hisma_flutter code from that text-based statechart design?

Does something like that exist?
I have seen generators from some DSL to C++, Java, Python and Lua, but nothing so far for Flutter/Dart.

[tamas-p]

Having a text (state machine model represented in e.g. plantuml notation or scxml) to text (dart code utilizing hisma) conversion is however certainly possible it was not implemented so far for the following reasons:

• It would be one directional transformation and that would have the problem that any changes in the generated dart code would make the source model out of sync of the dart implementation.
• I also found writing the hisma dart classes simple enough (with the benefits of working in a dart IDE with code completion, syntax highlighting, static type checking, refactoring) not wanting to have one more layer on top of it for modelling. Instead, it was satisfactory to do the modelling in dart as well - given that I can visually follow the process with the help of visma: I simply run my program while editing and thanks to hot reload/restart in Flutter I can see my model evolve and as a bonus I also see live how the machines are changing active states during operation. This could be further improved by introducing an IDE (e.g. vscode) plugin to show the state machine diagram in the IDE while editing the dart code, but that would be almost the same as the before mentioned method, that's why the vscode plugin implmemtation is set to lower priority.

One can argue however, that when you initially design your machine you need a creative tool that is higher level than writing dart code. For those cases I could imagine using plantuml or any modelling tool or even hand drawn state machine diagrams. It could be seen as the initial source that after conversion to dart it would be left alone (and you would continue only working in dart).

Another method could be that the state machine implementation in dart would read its configuration (states, transitions, actions...) from text (e.g. json, xml format). There the model (that is the configuration text) could be commonly used for both the dart state machine implementation and a visual editor for state machines. One initial drawback of this approach would be that those benefits of dart IDE mentioned above, e.g. code completion, would not be available out of the box, we would need to implement that specifically for the chosen state machine configuration format or solely rely on the visual editor.

To sum, the strategy with hisma and visma was to have a solution that

• keeps code and state machine diagram in tight sync
• can use your dart IDE to craft machines in declarative style easily with the help of IDE and language features
• allows viewing the state machine diagram progressively while coding the state machines
• allows visual monitoring of your machines while using your program

[macasas]

I understand your reasoning behind the complexity of syncing design with code in a two-way process.

I am trying to incorporate domain-driven design, business processes etc… and these are iterative processes involving the client, so design once and leave behind as you mention, in a waterfall style approach is not really a suitable solution either.

What I end up with is a Problem-Space domain model, linked to a Technical Solution diagram(s) and after failing to use FSM state diagrams, C4 models etc… I have high hopes that a Harel statechart such that you are using would be suitable and do the job.

I asked this question not because I was expecting you to take up the challenge, but to find out if there was something suitable that already existed.

I had a look at xstate, which used to have a text-based statechart visualiser but has since moved to a GUI.

Another interesting idea is sismic
https://github.com/AlexandreDecan/sismic/tree/master
https://sismic.readthedocs.io/en/latest/index.html

which uses a yaml format to define the statechart

and has a cli
sismic-plantuml for generating plantuml diagrams

as well as
sismic-bdd to load cucumber features and scenarios, together with coded steps

but the sismic package ends up generating python code, but there may be elements that I can use.

But none of these solves the dart generation or sync problem you mentioned, but as software development is not just coding, and it is essentially an iterative process involving business as well as technical people, I think it is a problem that needs solving, somehow, somewhere. Well designed apps are the future, because the creation is getting easier with no code and get created (making it very easy to build poorly designed apps), but even these methods without a good solid design will be left wanting when a well designed/crafter app appears.