Support for visualising statecharts

tommens commented 8 years ago

It would be great, some time in the future, to have support for statechart visualisation. This would/should include

[ ] Support for creating images of SISMIC-compatible statechart models using some generic graphical editing tool of choice (e.g. DIA), preferably with predefined templates that enforce the syntax to avoid making syntactic erros
[ ] Automatic support for importing YAML files from their corresponding visual model (in that case, of course, the visual model should not be a bitmap image, but it should be in a format from which the YAML file can be generated easily
[x] Automatic support for exporting YAML files to a visual editor, in order to be able to (i) visualise them; (ii) generate an image from them; (iii) edit them
[x] For all of the above, the intended visual support should take into account the new features of SISMIC, such as the ability to express contracts at different levels (in a nice and consistent visual way), and the ability to express multiple statecharts that communicate. For example, w.r.t. contracts we could either model them visually (at least for states) in the same way as entry/ and exit/ actions on states (i.e. by specifying one or more optional before/, after/, and always/ inside the state). For transitions we could do the same, but the notation would become a bit "heavy". So, alternatively, we could have some kind of "note" notation (similar to UML's note/comment notation) that can be attached to any model element, and in which we can formally describe the contract. This would make sense, as it is more or less "compatible" with the way in which additional OCL constrains can be expressed on UML model elements...

AlexandreDecan commented 8 years ago

I plan to add a way to export YAML statecharts to a graphical representation (either static, or dynamic through a GUI). We should not expect the other items to be satisfied in short terms, given how hard it is (even for large communities of developers !) to make (or embed in) modeling tools.

evdokim commented 8 years ago

I agree with @tommens. I think that a visualisation feature will make Sismic a truly great tool, something like a swagger for lifecycle description. @AlexandreDecan I wish a success with your amazing tool!

AlexandreDecan commented 8 years ago

Thanks @evdokim!

tommens commented 8 years ago

A perhaps "simple" solution would be to use an external tool, like e.g. PlantUML http://plantuml.sourceforge.net to visualise diagrams. It does have the disadvantage of requiring to install a different tool for this purpose, and I do not know if all features of statecharts are already supported by that tool (for example, I does not seem to have history states). See http://plantuml.com/state.html PlantUML requires the installation of GraphViz as well, which is a general purpose graph-based visualisation tool.

evdokim commented 8 years ago

A similar solution would be generating dot files that can be used as an input for GraphViz.

AlexandreDecan commented 8 years ago

@tommens the problem is not to display the statechart, but to compute a layout. Exporting to PlantUML's file format (for example) should not be hard. But it does not solve the problem.

@evdokim I tried few weeks ago to export statecharts using DOT, because one can automatically compute a layout from such a file. The problem is that DOT does not properly support (multiple) nested graphs layouts. I did not manage to automatically calculate the position and size of nested sub-graphs in a satisfactory way.

To design a UI to display statecharts (or to provide a way to graphically export a statechart) is not difficult if the layout is provided by the user. What is really difficult is to automatically compute the position and size of elements in order to have a "human-friendly" representation of a statechart.

I will soon try to design a UI with GTK or QT. It will support (at least!) the same features than what is currently available in the "ui" branch of this repository (a tiny toy UI to execute statecharts, using tkinter). After that, I'll look to offer a statecharts display feature directly in the UI, with the ability to drag&drop elements and to save the resulting layout. This should not be so difficult to implement. I hope so;)

AlexandreDecan commented 7 years ago

As a first step, please consider https://radiogiorgio.github.io/statechart-visualizer/ (by @radiogiorgio)

AlexandreDecan commented 6 years ago

We are close to something usable:

Branch "amola" contains a preliminary support for import/export with Amola, a language used in ASEME, a tool that can be used to create and edit statecharts;
Branch "plantuml" contains a (experimental) support to export statecharts to PlantUML, that now has usable automatic layouts for statecharts.

We also plan to support EMF UML2 (used in Papyrus for instance).

AlexandreDecan commented 6 years ago

https://github.com/AlexandreDecan/sismic-extensions

AlexandreDecan / sismic

Support for visualising statecharts #12