Struktogramm erstellen: Online-Tools (Nassi-Shneiderman)

Der Begriff „Struktogramm“ wird für zwei völlig verschiedene Dinge gesucht. Gemeint ist meistens das Nassi-Shneiderman-Diagramm nach DIN 66261 – eine grafische Darstellung eines Algorithmus, wie sie im Informatikunterricht und in der Programmierausbildung Standard ist. Manche meinen damit aber die Seitenstruktur einer Website. Dieser Beitrag zeigt beides: wie ein echtes Struktogramm aufgebaut ist, wie Sie es Schritt für Schritt zeichnen – direkt im Browser mit kostenlosen Online-Tools – und was zu tun ist, wenn Sie eigentlich die Struktur einer Website planen wollen.

Struktogramm oder Website-Struktur? Kurz einordnen

Ein Struktogramm im engeren Sinn ist kein Website-Diagramm. Es beschreibt den Ablauf eines Programms mit genau drei Grundstrukturen: Sequenz, Auswahl (Verzweigung) und Wiederholung (Schleife). Entwickelt haben es Isaac Nassi und Ben Shneiderman 1972/73; in Deutschland ist die Darstellung seit 1985 in DIN 66261 genormt. Sprünge (GOTO) lassen sich bewusst nicht abbilden – das erzwingt sauber strukturierten Code.

Wenn Sie dagegen die Menü- und Seitenhierarchie Ihrer Website planen wollen (Startseite → Kategorien → Unterseiten), suchen Sie eigentlich nach einer Seitenstruktur bzw. einer Sitemap. Für Schulaufgaben hilft zusätzlich unsere Ideensammlung zum Website-Schulprojekt. Den Rest dieses Artikels widmen wir dem echten Struktogramm.

Die Bausteine eines Struktogramms

Ein DIN-66261-Struktogramm setzt sich aus wenigen, klar definierten Blöcken zusammen, die von oben nach unten und von außen nach innen gelesen werden:

• Sequenz (Anweisung): ein Rechteck mit einer Aktion, z. B. „Passwort einlesen“. Mehrere Sequenzen werden lückenlos gestapelt.
• Verzweigung (if–then–else): ein Rechteck mit einem Dreieck an der Oberkante. Im Dreieck steht die Bedingung, der Ja-Zweig links, der Nein-Zweig rechts. Jeder Zweig enthält eigene Blöcke.
• Mehrfachauswahl (case): eine breitere Verzweigung mit mehreren Spalten für die einzelnen Fälle plus einen „sonst“-Fall.
• Kopfgesteuerte Schleife (while): ein L-förmiger Rahmen, dessen Bedingung oben steht. Die Schleife wird 0- bis n-mal durchlaufen – die Bedingung wird vor dem ersten Durchlauf geprüft.
• Fußgesteuerte Schleife (repeat / do–until): derselbe Rahmen, aber die Bedingung steht unten. Der Rumpf läuft mindestens einmal.
• Aufruf eines Unterprogramms: ein Block, der auf ein separates Struktogramm verweist – so bleiben große Abläufe übersichtlich.

Beispiel: Login mit maximal drei Versuchen

Am besten versteht man ein Struktogramm an einem konkreten Ablauf. Nehmen wir eine Anmeldung, die höchstens drei Fehlversuche erlaubt – ein Szenario, das jede Website mit Login kennt. In Pseudocode sieht der Algorithmus so aus:

versuche   ← 0
angemeldet ← falsch
SOLANGE versuche < 3 UND NICHT angemeldet     (kopfgesteuerte Schleife)
    Passwort einlesen                          (Sequenz)
    WENN Passwort korrekt                      (Verzweigung)
        angemeldet ← wahr
    SONST
        versuche ← versuche + 1
WENN angemeldet                                (Verzweigung)
    Startseite anzeigen
SONST
    Konto vorübergehend sperren

Jede Zeile wird zu einem Block: Die beiden Zuweisungen am Anfang sind gestapelte Sequenzen. Die SOLANGE-Zeile wird zur kopfgesteuerten Schleife, deren Rumpf (einlesen + prüfen) eingerückt darin liegt. Die beiden WENN-Blöcke werden zu Verzweigungen mit Ja- und Nein-Spalte. Weil das Struktogramm keine Sprünge kennt, taucht die Abbruchbedingung sauber in der Schleifenbedingung auf – nicht als „break“ mitten im Rumpf.

Struktogramm online erstellen: die Tools

struktog. – im Browser, ohne Installation

struktog. ist ein kostenloser, quelloffener Struktogramm-Editor, der vollständig im Browser läuft – passend, wenn Sie ausdrücklich eine „Website“ zum Erstellen suchen. Sie fügen Bausteine (Anweisung, Verzweigung, Schleife) per Klick ein, tippen die Texte hinein und exportieren das Ergebnis als Grafik. Weil nichts installiert werden muss, eignet es sich gut für Schule, Klausurvorbereitung und schnelle Skizzen.

Structorizer – kostenlos, mit Code-Export

Structorizer ist ein etabliertes, kostenloses Open-Source-Programm (Java, für Windows, macOS und Linux). Es geht über reines Zeichnen hinaus: Sie können das Struktogramm Schritt für Schritt „ausführen“ lassen und es in echten Quellcode (unter anderem C, Java, Python, Pascal) exportieren. Für Ausbildung und Dokumentation ist es das mächtigste der freien Werkzeuge.

diagrams.net (früher draw.io)

diagrams.net läuft im Browser und als Desktop-App und ist kostenlos. Eine fertige DIN-66261-Formsammlung bringt es allerdings nicht mit; die Blöcke aus Rechtecken und Dreiecken bauen Sie selbst zusammen. Das ist flexibler, aber aufwendiger – sinnvoll vor allem, wenn Sie ohnehin schon mit dem Tool arbeiten. Für reine Website-Strukturen (siehe oben) ist es dagegen erste Wahl.

LaTeX mit dem Paket struktex

Wer Struktogramme in wissenschaftlichen Arbeiten oder Skripten braucht, erzeugt sie reproduzierbar mit dem LaTeX-Paket struktex. Der Einstieg dauert länger, dafür bleiben Schrift und Layout konsistent mit dem restlichen Dokument – und Änderungen am Text ziehen keine Bildbearbeitung nach sich.

Schritt für Schritt zum Struktogramm

1. Algorithmus in Worten festhalten. Beschreiben Sie den Ablauf zuerst in einfachen Sätzen oder Pseudocode – ohne an die Grafik zu denken.
2. Grundstrukturen erkennen. Markieren Sie, was Sequenz, was Auswahl und was Wiederholung ist. Alles muss sich auf diese drei zurückführen lassen.
3. Von außen nach innen zeichnen. Beginnen Sie mit der äußeren Struktur (oft eine Schleife oder eine große Verzweigung) und füllen Sie sie dann.
4. Bedingungen eindeutig formulieren. Jede Verzweigung und jede Schleife braucht eine Ja/Nein-entscheidbare Bedingung, z. B. „Eingabe leer?“.
5. Verschachtelung prüfen. Blöcke dürfen sich nur ineinander schachteln, nie überlappen – das ist der Kernvorteil gegenüber einem Flussdiagramm.
6. Exportieren und gegenlesen. Speichern Sie als SVG oder PNG und lassen Sie das Ergebnis von jemandem prüfen, der den Ablauf nicht kennt.

Typische Fehler und wie Sie sie vermeiden

• Sprünge erzwingen wollen. Ein „break“ oder „GOTO“ mitten im Rumpf lässt sich nicht darstellen. Stellen Sie den Ablauf so um, dass die Abbruchbedingung in die Schleifenbedingung wandert (siehe Login-Beispiel).
• Leeren Zweig weglassen. Hat eine Verzweigung keinen Sonst-Fall, zeichnen Sie den Zweig trotzdem als leeren Block – nicht als fehlende Spalte.
• Kopf- und fußgesteuerte Schleife verwechseln. while prüft vor dem Durchlauf (0-mal möglich), repeat/until prüft danach (mindestens 1-mal). Die Verwechslung ist der häufigste Logikfehler.
• Zu viel in einen Block. Jeder Block sollte genau eine klar benannte Aktion enthalten, sonst leidet die Lesbarkeit.
• Struktogramm mit Programmablaufplan verwechseln. Der Programmablaufplan (PAP, DIN 66001) arbeitet mit Pfeilen und Rauten und erlaubt Sprünge – das Struktogramm ist blockbasiert und sprungfrei.

FAQ

Was ist der Unterschied zwischen Struktogramm und Flussdiagramm? Ein Flussdiagramm bzw. Programmablaufplan (PAP, DIN 66001) verbindet Symbole mit Pfeilen und kann Sprünge abbilden. Ein Struktogramm (DIN 66261) besteht aus ineinander geschachtelten Blöcken ohne Pfeile und lässt nur Sequenz, Auswahl und Wiederholung zu. Es erzwingt damit strukturierte Programmierung und ist meist kompakter.

Kann ich ein Struktogramm kostenlos online erstellen? Ja. Mit dem browserbasierten Editor struktog. zeichnen Sie ohne Installation direkt im Browser; Structorizer ist als kostenloses Desktop-Programm die umfangreichere Alternative mit Ausführung und Code-Export.

„Struktogramm für eine Website“ – was ist damit gemeint? Oft ist gar kein Nassi-Shneiderman-Diagramm gemeint, sondern die Seitenhierarchie einer Website. Dafür planen Sie besser eine Seitenstruktur bzw. Sitemap; Werkzeuge wie diagrams.net eignen sich dafür gut. Ein echtes Struktogramm brauchen Sie dagegen, wenn Sie einen Programmablauf – etwa ein Formular-Skript – dokumentieren wollen.