Der Flussdiagramm-Editor zeigt Flussdiagramme (Programmablaufpläne) an, lässt sie bearbeiten und Schritt für Schritt durchspielen. Er ist für Tablets gebaut und funktioniert genauso am Rechner. Vorlagen werden als Mermaid-Code hinterlegt; vorhandener Mermaid-Code für Flussdiagramme kann meist unverändert übernommen werden. Die Vollversion liegt unter Tools › Flussdiagramm-Editor.

Das Tool einbinden

Der Editor wird über den Meta-Tag features eingebunden:

----
Features: flussdiagramm
----

Beispiel 1: Diagramm anzeigen und durchspielen

Die Vorlage liegt als Datei beispiel.mmd im Seitenordner. Im Modus anzeigen erscheint das Diagramm wie ein eingebundenes Bild und hält die Seite schlank. Ein Tipp darauf zeigt einen Knopf mit nach außen zeigenden Pfeilen (mit der Maus beim Darüberfahren), ein weiterer Tipp klappt das Bild an Ort und Stelle zur Ansicht mit Werkzeugleiste auf: Dort lässt sich zoomen, der Ablauf durchspielen, das Diagramm als Bild oder Datei speichern und auf Vollbild schalten. Der Knopf mit den nach innen zeigenden Pfeilen klappt es wieder zum Bild zusammen. Verändern lässt es sich nicht.

<div class="flussdiagramm" data-filename="beispiel.mmd" data-config='{"modus":"anzeigen"}'></div>

Mit "breite":"300px" wird das Bild schmaler, wie width bei einem img. Soll die Anzeige von Anfang an aufgeklappt mit Leiste im Rahmen stehen (wie der Editor), hilft "darstellung":"rahmen"; die Höhe der aufgeklappten Ansicht legt hoehe fest.

Beispiel 2: Bearbeiten mit Vorlage im Seitentext

Kurze Vorlagen können direkt in ein pre-Element geschrieben werden. Das Attribut v-pre ist dabei Pflicht: Ohne es würde die Seite Teile des Mermaid-Codes (z. B. {{…}}) als eigene Platzhalter deuten.

<pre class="flussdiagramm" v-pre data-config='{"id":"bsp2"}'>
flowchart TD
    A(Start) --> B[Anweisungssequenz]
    B --> C(Ende)
</pre>

flowchart TD
    A(Start) --> B[Anweisungssequenz]
    B --> C(Ende)

Beispiel 3: Leerer Editor

Ohne Vorlage startet der Editor mit Start und Ende.

<div class="flussdiagramm" data-config='{"id":"eigenes"}'></div>

Beispiel 4: Weniger Symbole, Prüfhinweise

Mit symbole bietet der Editor nur die genannten Symbole an, hier für Spacebug Start/Ende, Anweisung und Verzweigung. Der Knopf Prüfen (Haken im Kreis) listet typische Fehler auf und markiert die betroffenen Elemente; ein Tipp auf einen Hinweis wählt das Element aus. Die Liste läuft beim Weiterarbeiten mit. Die Vorlage hier ist absichtlich unfertig.

<div class="flussdiagramm" data-filename="spacebug-luecke.mmd"
     data-config='{"id":"bsp4","symbole":["start/ende","anweisung","verzweigung"]}'></div>

Mitgelieferte Muster

Für häufige Schemata bringt der Editor fertige Muster mit. Statt einer eigenen Datei genügt der Name in muster; Korrekturen am Muster wirken dann auf allen Seiten, die es verwenden.

<div class="flussdiagramm" data-config='{"modus":"anzeigen","muster":"solange-wiederhole"}'></div>

Ein Muster lässt sich auch im Modus bearbeiten als Startpunkt verwenden, etwa für eine Aufgabe „Ergänze das Flussdiagramm“.

Weitere Muster kommen als .mmd-Datei in den Ordner assets/thirdparty/flussdiagramm/muster/; der Dateiname (nur Kleinbuchstaben, Ziffern und Bindestriche) ist der Name des Musters.

Optionen

• data-filename: Vorlage als Datei im Seitenordner, auch mit ../. Ohne dieses Attribut wird ein Muster (muster) oder der Text im Element verwendet.
• data-config (JSON, alles optional):
  • modus: "bearbeiten" (Standard) oder "anzeigen"
  • muster: Name eines mitgelieferten Musters, z. B. "fallunterscheidung-zweiseitig"
  • durchspielen: false blendet das Durchspielen aus
  • symbole: Symbole in Symbolleiste und Formwahl, als Liste oder kommagetrennt, z. B. ["start/ende","anweisung","verzweigung"]. Möglich sind start/ende, anweisung, verzweigung, ein-ausgabe (auch eingabe/ausgabe), unterprogramm und verbinder. Standard: die ersten vier. Elemente aus der Vorlage behalten ihre Form auch dann, wenn sie nicht in der Liste steht.
  • pruefung: false blendet den Knopf Prüfen aus (nur im Modus bearbeiten)
  • hoehe: CSS-Höhe des Editors, Standard min(70vh, 600px) (im Modus anzeigen: Höhe der aufgeklappten Ansicht; das Bild selbst ist so hoch wie das Diagramm)
  • darstellung: nur im Modus anzeigen: "bild" (Standard) oder "rahmen"
  • breite: höchste Breite der Bilddarstellung als CSS-Länge, z. B. "300px"
  • beschriftung: "wahr/falsch" (Standard) oder "ja/nein" für neue Ausgänge von Verzweigungen
  • dateiname: Name für exportierte Bilder und Dateien, Standard flussdiagramm
  • id: fester Name für den Zwischenspeicher im Browser. Empfohlen, sobald eine Seite mehrere Editoren hat oder später Editoren dazukommen könnten – sonst zählt die Position auf der Seite.
  • export: false blendet Bild- und Dateiexport aus
  • codewort: false blendet das Speichern per Codewort aus
  • mermaid: false blendet die Mermaid-Ansicht aus

Vorlagen erstellen

• Ohne Mermaid-Kenntnisse: Diagramm in der Vollversion zeichnen, dann Datei › Datei zum Weiterarbeiten (.mmd) und die Datei in den Seitenordner legen. Die Positionen der Elemente bleiben erhalten.
• Mit Mermaid: Code schreiben oder vorhandenen Code übernehmen. Ohne Positionsangaben ordnet der Editor das Diagramm automatisch an.
• Bilder für Arbeitsblätter (auch Typst) gibt es über Datei › Bild als SVG.

Unterstützter Mermaid-Code

• Kopf: flowchart oder graph mit TD/TB oder LR
• Formen: A(Start) und A([Start]) für Start/Ende, A[…] Anweisung, A{…} Verzweigung, A[/…/] Ein-/Ausgabe, A[[…]] Unterprogramm, A((…)) Verbindungsstelle
• Pfeile: -->, ---, ---->, -.->, ==>, Ketten wie A --> B --> C und A & B --> C
• Beschriftungen: -->|wahr| oder -- wahr -->
• Farben: style A fill:blue (wird einer Farbe der Palette zugeordnet)
• Texte mit Klammern oder Sonderzeichen in Anführungszeichen: B["move()"]; Zeilenumbruch mit <br>
• %%{init: …}%% und Kommentare werden übergangen.

Nicht unterstützt sind subgraph, classDef/class, click und Icons. Solche Zeilen werden übergangen; die Browser-Konsole listet sie auf („Hinweise zur Vorlage“).

Gut zu wissen

• Änderungen der Lernenden werden automatisch im Browser gespeichert (je Seite und id). Über Datei › Zurücksetzen auf die Vorlage geht es zurück zur Vorlage.
• Prüfen erkennt: fehlenden oder mehrfachen Start, fehlendes Ende, Elemente ohne Verbindung, Verzweigungen ohne genau zwei Ausgänge, andere Elemente mit mehreren Ausgängen, Sackgassen, nicht erreichbare Elemente und Schleifen ohne Ausweg. Es sind Hinweise, keine Bewertung: Ob das Diagramm die Aufgabe löst, prüft es nicht.
• Mit Speichern erhalten Lernende ein Codewort aus vier Wörtern; der Link öffnet das Diagramm in der Vollversion.
• In Vorlagen im Seitentext werden Zeichen wie < vom Browser als HTML gelesen. Für Bedingungen wie x < 3 besser eine .mmd-Datei verwenden.