[code4teaching]

Requested by Holger · project thread

Was

Vierte Welt VisuFlow (…/app/?visuflow, Farbe Violett): einen PAP (flowchart) frei zeichnen. Nur Zeichnen, keine Simulation, kein Code.

• Leiste „Symbole“: Start, Anweisung, Ein-/Ausgabe, Verzweigung, Unterprogramm, Ende (DIN 66001, Farben wie im Baustein „PAP bauen“).
• Antippen hängt das Symbol unter das gewählte und verbindet es; Ziehen legt es frei auf die Fläche. Text sofort eintippen, nochmal antippen oder Doppelklick ändert ihn.
• Pfeile vom Punkt am Ausgang zum nächsten Symbol ziehen; Raute mit ja/nein (Knopf „ja/nein tauschen“), rechtwinklige Pfeile, Schleifen laufen rechts herum.
• Verschieben (Maus, Finger, Pfeiltasten, 20-px-Raster), Löschen, Rückgängig/Wiederholen, Titel, Beispiel „Tee kochen“.
• Speichern/Öffnen als .visuflow (JSON), der letzte Plan bleibt im Browser. Export PNG, SVG, PDF (A4, nutzt den vorhandenen PDF-Schreiber).
• Welten-Auswahl (Start-Dialog und Zahnrad in allen Welten) hat jetzt vier Knöpfe in zwei Reihen.
• Texte de/en/pt, andere Sprachen fallen auf Englisch zurück.

Neue Dateien: web/src/core/flowModel.ts, web/src/ui/flowApp.ts, Test web/test/flowModel.test.ts. Keine neuen Abhängigkeiten.

Offen

• Eigene Startseite und Eintrag in der Welten-Leiste der Webseite (noch nicht enthalten).

Test

npm test (472 grün), npm run build:site, im Browser mit Playwright: Beispiel, Antippen/Ziehen, Pfeil ziehen, Export PNG/PDF, Wechsel VisuStruct ⇄ VisuFlow.

---

Generated by Claude Code