Zustandsdiagramme mit Mermaid.js

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

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

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.

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.

Ü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.

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:

1

---

2

config:

3

  theme: neutral           

4

  layout: fixed

5

---

6

flowchart TD

7

    Z0["Z0"] -- $$\frac{}{\text{Init}}$$ --> Z1(("Z1 <br> Idle"))

8

    Z1 -- $$\frac{Start}{\text{HeaterON}}$$ --> Z2(("Z2 <br> Heating"))

9

    Z2 -- $$\frac{TemperatureOK}{\text{HeaterOFF,TimerStart}}$$ --> Z3(("Z3 <br> Maintaining"))

10

    Z2 -- $$\frac{Stop}{\text{HeaterOFF}}$$ --> Z1

11

    Z3 -- $$\frac{TimeOver}{\text{OpenValve}}$$ --> Z4(("Z4 <br> Flushing"))

12

    Z3 -- $$\frac{Stop}{\text{HeaterOFF}}$$ --> Z1

13

    Z4 -- $$\frac{Empty}{\text{ValveClose}}$$ --> Z1

14

    Z0@{ shape: sm-circ}

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

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.