Zustandsdiagramme mit Mermaid.js

[J. V. (janvi)]

Neulich bin ich über ein Open Source Projekt Mermaid.js gestossen, 
welches zum Erstellen verschiedenster Diagramme durchaus nützlich zu 
sein scheint.

Für Nassi-Shneiderman gibt es ja zwischenzeitlich gleich mehrere gute 
Editoren aber für Zustandsdiagramme (und Datenflussdiagramme) habe ich 
noch nichts gescheites. Hier interessiert mich weniger die UML 
Darstellung als die ältere Darstellung nach Ward & Mellor.

Beiliegend habe ich probiert, ein Zustandsdiagramm aus Ward&Mellor Band1 
Seite 68 nachzustellen. Es ist eigentlich nicht wirklich relevant ob die 
Zustände nun viereckig, abgerundet oder als Kreis dargestellt sind. Ein 
Kreis ist mein Favorit. Ebenso die Übergangspfeile eckig oder als 
Bezier. Bezier ist viel hübscher. Bis dahin macht mermaid.js eigentlich 
noch Alles richtig.

Bei Ward&Mellor gibt es mehrere mögliche Folgezustände ohne daß hierfür 
ein überflüssiges "Entscheidungssymbol" erforderlich wäre. Das ist 
meiner Meinung nach der Übersichtlichkeit sehr zuträglich. Das hat mit 
mermaid.js auch noch geklappt. Ich glaube man kann sogar den Stil bzw. 
Form der Zustandsboxen beeinflussen (?)

Was ich leider nicht geschafft habe, war die Übergangspfeile zu 
beschriften. Vorzugsweise in der Form mit Bruchstrich Bedingung/Aktion 
nach Ward&Mellor.

Wäre großartig wenn sich da jemand auskennt und zeigt was geht bzw. was 
nicht.

stateDiagram-v2
    [*] --> Idle
    Idle --> Heating
    Heating --> Maintaining
    Heating --> Idle
    Maintaining --> Flushing
    Maintaining --> Idle
    Flushing --> Idle

[J. V. (janvi)]

Die Unterbrechungen der Zustandsübergänge sehen ziemlich unbeholfen aus, 
aber immerhin.

[J. V. (janvi)]

Noch etwas besser, aber verschiedene Variablen zur Beeinflussung des 
Stils funktionieren nur bei passenden Diagrammarten. Zustandsdiagramme 
haben da sehr wenig bis gar keine Variablen.

[J. V. (janvi)]

Malt man die Zustandsdiagramme als Flussdiagramm, gibt es einige 
nützliche zusätzliche Funktionen. Die runde Form der Zustände macht sich 
grafisch gut, weil der Anschlusswinkel der Pfeile ringsum ansehlich 
verteilt werden kann. Leider auch hier (noch?) keine Beschriftung der 
Pfeile möglich.

Alles in Allem ein sehr nettes Spielzeug, wird seit 2015 entwickelt. 
PlantUML scheint eines der Kopiervorlagen von Mermaid zu sein. Dort 
funktioniert die Beschriftung von Zustandsübergängen weit besser, 
wenngleich auch trotzdem nicht nach Ward&Mellor.

[N. M. (mani)]

J. V. schrieb:
> Neulich bin ich über ein Open Source Projekt Mermaid.js gestossen,
> welches zum Erstellen verschiedenster Diagramme durchaus nützlich zu
> sein scheint.

Ich nutze auch gerne Mermaid. Lässt sich z.B. auch gut in eigene 
Websites usw integrieren.

Es gibt aber auch noch Alternativen wie z.B. PlantUML oder Graphviz.
Kannst du dir ja auch Mal noch anschauen.

[J. V. (janvi)]

Über PlantUML bin ich auch gestolpert und habe das vor deinem Post schon 
erwähnt. Bei der Eingabe hatte ich etwas Probleme mit der 
Auto-Vervollständigung. Aber hier die PlantUML Version welche in der 
Beschriftung der Pfeile am besten ist. Die Beschriftung ist immer rechts 
vom Pfeil. Manchmal hätte sie auch links etwas mehr Platz aber ich habe 
nicht herausgefunden wie man das steuern kann.

Beide Tools haben viele überflüssige Funktionen für Zustandsdiagramme. 
Aber ich glaube das kommt von der UML. Insbesondere verschachtelte 
Zustände, Entscheidungssymbole und Gleichzeitigkeiten mit fork-join. Ein 
Zustandsdiagramm ist kein Petri-Netz sondern hat immer genau einen 
aktiven Zustand! Planttext ist der Aufsatz der PlantUML benutzt. 
PlantUML ist der Aufsatz welcher Graphviz benutzt. Graphviz 
unterscheidet gar nicht selbst welche Art von Diagramm gemalt werden 
soll sondern überlässt die Regeln komplett dem Benutzer.

[J. V. (janvi)]

Mermaid versteht die TEX Syntax. Damit kann man natürlich einen 
Bruchstrich nach Ward&Mellor darstellen. Funktioniert aber nur als 
Flussdiagramm und die Textpostion kann ich bislang nicht beeinflussen. 
Erstellung im Code wird schnell unübersichtlich so daß man sich eine 
angepasste grafische Oberfläche wünscht. Komischerweise wird Z1 als 
Kreis zu klein dargestellt, so daß die Idle Beschriftung des 
Zustandsnamens verschluckt wird. Man kann sie darstellen, indem man 
Design->Layout->Hierarchical einschaltet.

Hier mal der Code für die Zwischenablage:

---
config:
  theme: neutral           
  layout: fixed
---
flowchart TD
    Z0["Z0"] -- $$\frac{}{\text{Init}}$$ --> Z1(("Z1 <br> Idle"))
    Z1 -- $$\frac{Start}{\text{HeaterON}}$$ --> Z2(("Z2 <br> Heating"))
    Z2 -- $$\frac{TemperatureOK}{\text{HeaterOFF,TimerStart}}$$ --> Z3(("Z3 <br> Maintaining"))
    Z2 -- $$\frac{Stop}{\text{HeaterOFF}}$$ --> Z1
    Z3 -- $$\frac{TimeOver}{\text{OpenValve}}$$ --> Z4(("Z4 <br> Flushing"))
    Z3 -- $$\frac{Stop}{\text{HeaterOFF}}$$ --> Z1
    Z4 -- $$\frac{Empty}{\text{ValveClose}}$$ --> Z1
    Z0@{ shape: sm-circ}

[Max G. (l0wside)]

N. M. schrieb:
> Es gibt aber auch noch Alternativen wie z.B. PlantUML oder Graphviz.
> Kannst du dir ja auch Mal noch anschauen.

Ich nutze dafür qfsm. Ist auch nicht der Weisheit letzter Schluss, hat 
aber schon einige Zustandsdiagramme generiert, die dann halbautomatisch 
zu switch...case mutiert sind.
https://github.com/AaronErhardt/qfsm

[Falk S. (falk_s831)]

Mermaid, PlantUML -> hauptsächlich GraphViz-Derivate, d.h. die sind 
irgendwo limitiert, weil sie eigentlich eher Graphen beschreiben (das 
auch gut), dafür aber halt nur einen eingeschränkten Satz an Operationen 
bereitstellen - muss man aber auch dann leben damit.

Für mehr Darstellungsmöglichkeiten ist halt sowas wie der Enterprise 
Architect oder das Dassault-Zeug (MagicDraw?) besser geeignet, da diese 
das UML-Metamodell besser unterstützen und noch besser die Modellierung 
unterstützen. D.h. Zustandsdiagramme hierarchisch zerlegen, 
Eventbehandlung, aber auch State-Actions (Operationen, die bei Betreten, 
während oder beim Verlassen eines Zustands ausgeführt werden). Das geht 
schon sehr weit und lässt auch Schnittmengen mit den anderen 
Diagrammtypen zu (z.B. Objektdiagramme). Kann aber zugegebenermaßen 
etwas Einarbeitungsaufwand erfordern, solches mächtiges Tooling zu 
nutzen und haben mitunter ihre Tücken. Sequenzdiagramme im EA können 
sich mitunter auch etwas als - vorsichtig gesagt - "geduldsfördernd" 
gestalten... bei den Statecharts geht aber eigentlich.