Web Toolarium

FLUSSDIAGRAMM-SIMULATOR

Flussdiagramm-Simulator

Erstellen Sie Flussdiagramme mit Variablen, Abläufen, Verzweigungen und Schleifen und verfolgen Sie beim Ausführen die Wertänderungen.

Läuft im Browser Automatisches Speichern JSON-Import und -Export Kein beliebiges JavaScript PC empfohlen

PC empfohlen: Knoten lassen sich am besten mit einer Maus platzieren, verbinden und bearbeiten.

EDITOR

Flussdiagramm

100%
Fügen Sie Knoten hinzu, um einen Ablauf zu erstellen
Delete: Auswahl löschenCtrl+Z UndoCtrl+Y RedoCtrl+S: speichernDoppelklick: Einstellungen
Automatisch im localStorage dieses Geräts gespeichert

HOW TO USE

Erstellen, ausführen und Wertänderungen nachvollziehen

Fügen Sie links Knoten hinzu und verbinden Sie jeden Ausgang mit dem nächsten Knoten. Bearbeiten Sie Ausdrücke rechts unter Einstellungen.

Wozu dient das? Ein Diagramm allein zeigt nicht, welcher Zweig ausgeführt wird, wie sich Variablen ändern oder ob eine Schleife endet. Beim Ausführen lässt sich die Reihenfolge prüfen.

Verwenden Sie es für Planen Sie Abläufe vor dem Programmieren, erklären Sie Prozesse im Unterricht, prüfen Sie Verzweigungen und Schleifen oder finden Sie Fehler vor der Umsetzung.

  1. Öffnen Sie rechts Variablen und fügen Sie Zahlen-, Text- oder Boolesche Variablen hinzu
  2. Verbinden Sie Knoten von Start bis Ende und legen Sie bei jeder Entscheidung Yes- und No-Zweige an
  3. Wählen Sie „Schritt“, um den aktuellen Knoten und Variablenänderungen zu prüfen
  4. Speichern Sie fertige Abläufe als JSON und verwalten Sie mehrere Varianten über Öffnen

Ausdrücke werden mit einer eingeschränkten, sicheren Ausdruckssprache ausgewertet. Es wird kein beliebiges JavaScript ausgeführt, und Diagramme oder Variablen verlassen den Browser nicht.

GUIDE

Grundlagen und Bedienung von Flussdiagrammen

Ein Flussdiagramm stellt die Reihenfolge von Abläufen und bedingte Verzweigungen mit Formen und Verbindungen dar. Dieses Tool führt den erstellten Ablauf aus.

Was ist ein Flussdiagramm?

Ein Diagramm für Aufgaben oder Programme mit Formen und Verbindungen von oben nach unten. Es macht Reihenfolge, Verzweigungen und Schleifen sichtbar und erleichtert so die Planung und Erklärung.

Aufgabe der einzelnen Formen

Anschluss (Start/Ende)
Kennzeichnet Anfang und Ende eines Ablaufs.
Einrichtung:Fügen Sie links einen Start- oder Endanschluss hinzu. Den Typ können Sie rechts in den Einstellungen ändern.
Beispiel:Start → Verarbeitung → Ende
Verarbeitung
Stellt einen auszuführenden Vorgang dar, etwa eine Variablenzuweisung oder Berechnung.
Einrichtung:Geben Sie rechts in den Einstellungen einen Anzeigenamen und einen Verarbeitungsausdruck ein. Schreiben Sie eine Zuweisung pro Zeile.
Beispiel:Anzeigename „Hochzählen“, Ausdruck count = count + 1
Entscheidung
Prüft eine Bedingung und verzweigt in zwei Richtungen: Yes und No.
Einrichtung:Geben Sie rechts in den Einstellungen eine Bedingung ein und verbinden Sie die Ausgänge Yes und No.
Beispiel:Bedingung score >= 70. Bei true zu Yes, bei false zu No.
Anzeige
Fügt ein Berechnungsergebnis oder eine Nachricht rechts zur Ausgabe hinzu.
Einrichtung:Geben Sie rechts in den Einstellungen einen Anzeigenamen und einen Ausgabeausdruck ein.
Beispiel:Ausdruck für Ausgabe "count=" + count
Schleifenstart
Solange die Bedingung true ist, wird der Schleifenkörper ausgeführt. Bei false geht es danach weiter.
Einrichtung:Geben Sie rechts eine Bedingung ein und ordnen Sie ein passendes Schleifenende zu.
Beispiel:Bedingung count < 5. Bei true in den Körper, bei false nach der Schleife.
Schleifenende
Am Ende des Schleifenkörpers kehrt der Ablauf zum passenden Start zurück. Bei einer falschen Bedingung geht es danach weiter.
Einrichtung:Wählen Sie rechts in den Einstellungen den passenden Schleifenstart aus.
Beispiel:Platzieren Sie ihn nach der Erhöhung von count. Die Schleife wiederholt sich, solange count kleiner als 5 ist.

So erstellen Sie das Diagramm

Allgemeine Schritte

  1. Ziehen Sie eine Form aus der Knotenliste links auf die mittlere Arbeitsfläche.
  2. Ordnen Sie die Formen von Start bis Ende in der richtigen Reihenfolge an. Verschieben Sie Knoten per Drag-and-drop.
  3. Klicken Sie auf einen Knoten und wählen Sie „Verarbeitung bearbeiten“, um Namen oder Ausdruck festzulegen.

Platzierung und Einstellungen je Form

Anschluss (Start/Ende)

Platzierung:Setzen Sie einen Start an den Anfang und ein Ende an den Schluss des Ablaufs.

Verbindung:Verbinden Sie Start mit genau einem OUT zum nächsten Knoten. Ende hat nur einen IN und keinen OUT.

Verarbeitung

Einstellungen:Wählen Sie „Verarbeitung bearbeiten“, um Namen und Ausdruck einzugeben. Eine Zuweisung pro Zeile.

Verbindung:Verbinden Sie den vorherigen Knoten mit IN und einen OUT mit dem nächsten. Beispiel:count = count + 1

Entscheidung

Einstellungen:Geben Sie eine Bedingung ein, deren Ergebnis true oder false oder

Verbindung:Verbinden Sie die unteren Yes- und No-Ausgänge jeweils mit einem Knoten. Beispiel:score >= 70

Anzeige

Einstellungen:Geben Sie einen Namen und Ausgabeausdruck ein. Bei der Ausführung erscheint das Ergebnis rechts unter Ausgabe.

Verbindung:Verbinden Sie den vorherigen Knoten mit IN und einen OUT mit dem nächsten. Beispiel:"count=" + count

Schleifenstart

Einstellungen:Geben Sie eine Bedingung ein und ordnen Sie diesen Knoten dem Schleifenende mit gleicher Farbe und Nummer zu.

Verbindung:Verbinden Sie einen OUT mit dem Schleifenkörper. Bei false wird die Schleife automatisch verlassen.

Schleifenende

Einstellungen:Wählen Sie rechts den passenden Schleifenstart aus und platzieren Sie diesen Knoten ans Ende des Schleifenkörpers.

Verbindung:Verbinden Sie einen OUT mit dem Ablauf nach der Schleife. Eine direkte Rückverbindung ist nicht nötig.

Verbindungen und Regeln

  1. Wählen Sie „Verbinden“ oder „Verbindung starten“ im Knotemenü.
  2. Klicken Sie unter dem Quellknoten auf OUT oder bei einer Entscheidung auf Yes / No.
  3. Klicken Sie über dem Zielknoten auf IN, um die Verbindung herzustellen.
  4. Ein normaler OUT kann eine Verbindung haben. Ein IN kann Verbindungen von mehreren Knoten annehmen.
  5. Wenn Sie denselben OUT mit einem anderen Knoten verbinden, wird die alte Verbindung automatisch ersetzt.
  6. Wählen Sie zum Löschen einer Verbindung die Linie aus und drücken Sie Delete.
  7. Verschieben Sie die Knoten so, dass sich Verbindungen nicht kreuzen.
Nur ein OUT
Verarbeitung A
Verarbeitung B

Von einem OUT kann nur eine Verbindung ausgehen. Beim Verbinden mit einem anderen Knoten wird die alte Linie ersetzt.

IN kann mehrere Verbindungen annehmen
Verarbeitung A
Verarbeitung B
Verarbeitung C

Mehrere OUTs können mit demselben IN verbunden werden. So führen Sie Abläufe nach einer Verzweigung zusammen.

Verbinden Sie Yes und No nur bei einer Entscheidung getrennt. Ordnen Sie Schleifenstart und -ende in den Einstellungen zu, ohne sie direkt zu verbinden.

Die Bereiche rechts

Ausgabe
Zeigt Ergebnisse ausgeführter Anzeigeknoten in Reihenfolge. Übersprungene Knoten werden nicht hinzugefügt.
Hinweis:Vor dem Start wird „Noch keine Ausgabe“ angezeigt. Während der Ausführung öffnet sich Ausgabe automatisch.
Variablen
Legen Sie Variablennamen, Typen und Anfangswerte fest. Während der Ausführung sehen Sie die aktuellen Werte.
Verlauf
Prüfen Sie durchlaufene Knoten, Bedingungen und Variablenänderungen Schritt für Schritt.
Einstellungen
Bearbeiten Sie Name, Verarbeitung, Bedingung oder Ausgabeausdruck des ausgewählten Knotens.

Ausgabe prüfen

  1. Geben Sie in den Einstellungen des Anzeigeknotens einen Ausgabeausdruck ein. Beispiel:"count=" + count
  2. Gehen Sie mit Schritt oder Ausführen bis zum Anzeigeknoten.
  3. Bei der Ausführung eines Anzeigeknotens wird das ausgewertete Ergebnis zu Ausgabe hinzugefügt.
  4. Wird ein Anzeigeknoten in einer Schleife mehrfach ausgeführt, wird jedes Ergebnis der Reihe nach hinzugefügt.
  5. Um die Ausgabe von Anfang an zu prüfen, wählen Sie vor dem Start im Bearbeitungsmodus Leeren.

Beispiel:Variablen count ist 1 , lautet der Ausgabeausdruck "count=" + count ergibt count=1 .

Während der Ausführung ist die Bearbeitung deaktiviert. Rechts sehen Sie Variablenwerte und Ausgabe. Wählen Sie Ausführung beenden, um weiterzubearbeiten.

Ausführen

SchrittFührt den aktuellen Knoten einzeln aus.

AusführenFührt automatisch mit der gewählten Geschwindigkeit aus.

PausierenPausiert die fortlaufende Ausführung.

Ausführung beendenBeendet die Ausführung und kehrt zur Bearbeitung zurück.

Geschwindigkeit: NormalWählen Sie die Geschwindigkeit für die fortlaufende Ausführung.

  1. Ziehen Sie eine Form aus der Knotenliste links auf die mittlere Arbeitsfläche.
  2. Ziehen Sie Knoten auf der Arbeitsfläche an die gewünschte Position.
  3. Klicken Sie auf einen Knoten und wählen Sie „Verarbeitung bearbeiten“, um den Inhalt zu ändern.
  4. Klicken Sie auf eine Verbindung und drücken Sie Delete, um sie zu entfernen.
  5. Schritt führt einen Knoten einzeln aus; Ausführen startet automatisch. Wählen Sie Ausführung beenden, um zu stoppen.
  6. Projekte werden auf diesem Gerät gespeichert und können als JSON gesichert werden.

Arithmetische Operatoren und Beispiele

TypSymbolBeispielBedeutung
Addition+score + 1010 zu score addieren
Subtraktion-count - 11 von count abziehen
Multiplikation*price * quantityprice mit quantity multiplizieren
Division/total / 2total durch 2 teilen
Rest%count % 2 == 0Prüfen, ob die Zahl gerade ist

Vergleichs- und logische Operatoren

TypSymbolBeispielBedeutung
Gleich==score == 70score ist gleich 70
Ungleich!=score != 0score ist nicht 0
Größer als>score > 70score ist größer als 70
Größer oder gleich>=score >= 70score ist mindestens 70
Kleiner als<count < 5count ist kleiner als 5
Kleiner oder gleich<=count <= 5count ist höchstens 5
UND&&score >= 70 && count < 5Beide Bedingungen sind wahr
oder||score < 0 || score > 100Mindestens eine Bedingung ist wahr
NICHT!!isFinishedKehrt einen booleschen Wert um

= weist in einer Verarbeitung einen Wert zu, während== vergleicht Werte in einer Bedingung.!isFinished Wenn Sie isFinished registrieren Sie es als boolesche Variable. Setzen Sie komplexe Bedingungen in Klammern, zum Beispiel (score + bonus) >= 70 .

Fehler bei der Ausführung beheben

Fehlermeldung Gründe für den Startfehler erscheinen unter den Ausführungsschaltflächen. Fehlerhafte Knoten sind auch auf der Arbeitsfläche markiert; beheben Sie jeden Hinweis.

  1. Prüfen Sie bei Strukturfehlern den Knotennamen und die angezeigten Verbindungen.
  2. Klicken Sie auf den Knoten, wählen Sie „Verarbeitung bearbeiten“ und korrigieren Sie den passenden Ausdruck.
  3. Fehlt eine Verbindung, verbinden Sie den Ausgang mit dem passenden Eingang.
  4. Beenden Sie bei einem Fehler die Ausführung, korrigieren Sie ihn und prüfen Sie erneut mit Schritt.

Verbindungen und Struktur prüfen

  • Verwenden Sie genau einen Startknoten und verbinden Sie den Ablauf bis zum Ende.
  • Jeder Knoten außer Entscheidungen und Ende braucht genau eine nächste Verbindung.
  • Verbinden Sie jede Entscheidung mit genau einem Yes- und einem No-Zweig.
  • Ordnen Sie Schleifenstart und -ende mit derselben Nummer einander zu.

Ausdrücke und Werte prüfen

  • Verwenden Sie eine Zuweisung pro Zeile und legen Sie Variablen vor der Verwendung an.
  • Mischen Sie Zahlen-, Text- und boolesche Typen nicht.
  • Bedingungen für Entscheidungen und Schleifen müssen true oder false .
  • Prüfen Sie auf Division durch null sowie nicht geschlossene Klammern oder Zeichenfolgen.

LOCAL PROJECTS

Gespeicherte Projekte