With German keywords
PROGRAMM Fakultät
EINGABE n
ergebnis := 1
FÜR i VON 1 BIS n
ergebnis := ergebnis * i
ENDE FÜR
AUSGABE ergebnisFree tool
Create a structogram online: Nassi-Shneiderman diagram editor
Create structograms online as Nassi-Shneiderman diagrams following DIN 66261: click to add blocks or write pseudocode with German or English keywords. Switch the same process to a flowchart with one click and export as PNG, SVG, or PDF. Free, no sign-up required, and entirely in your browser.
Built by Justin Schuessler
Process complete? Try the code directly on your own VPS or web hosting plan.
Block builder
100 %
Diagram keyboard shortcuts: ↑/↓ select block, Enter edit text, Alt+↑/↓ move, Delete remove, Insert add block, Ctrl+Z/Ctrl+Y undo/redo, Ctrl+X/C/V cut/copy/paste.
Pseudocode syntax
PROGRAM Name INPUT x / OUTPUT x CALL procedure(x) IF condition THEN … ELSE IF … ELSE … END IF SWITCH x CASE 1: … DEFAULT: … END SWITCH WHILE condition … END WHILE REPEAT … UNTIL condition FOR i FROM 1 TO n STEP 1 … END FOR LOOP name … BREAK name … END LOOP
Every other line is an instruction; a line starting with \ is always an instruction, even if it begins with a keyword.
Indentation and capitalization do not matter, and you can mix German and English keywords. No actual program code is generated or executed.
Click a block in the diagram to edit it here. Double-click to edit its text directly in the diagram.
Save and export
Everything runs in your browser: the current state is saved only locally, and the share link contains the diagram itself. No data is sent to us.
Features
Draw Nassi–Shneiderman diagrams without drawing lines
You describe the flow; the editor arranges the blocks according to DIN 66261 and keeps both views up to date.
Standards-compliant structure blocks
Statements, branches, case selections, pre-test and post-test loops, counting loops, infinite loops, exits, and subroutine calls according to DIN 66261.
Switch to flowchart
The same flow as a flowchart according to DIN 66001, automatically arranged with arrows that loop back.
Click-and-build editor
Add blocks before, after or inside another block; edit text directly in the diagram; move, delete and undo.
Two-way pseudocode
Text and diagram stay in sync. The editor shows the line number and a hint for typos, while the diagram remains visible.
Export and project file
PNG and SVG for documents, A4 PDF for printing, and a project file (JSON) to save and reopen.
Share without an account
The share link puts the diagram in the part of the URL after the #. Nothing is stored on our servers.
How it works
How to create a structogram online
Five steps from template to export, with no account or download required.
Step 1
Load a template or start from scratch
Under “Load example template,” choose one of the nine exercises, such as bubble sort or grade calculation. Select “New” to start with a blank diagram.
Step 2
Insert blocks
Choose a block such as a branch or counting loop from the block library, select an existing block, and insert the new one before, after, or inside it. Double-click to edit text directly in the diagram.
Step 3
Or write pseudocode
In the “Pseudocode” field, write one line per step using German or English keywords. The diagram and text stay in sync; if you make a typo, the editor highlights the line with a hint.
Step 4
Check and switch views
Move, copy, or delete blocks and undo steps. If needed, switch to the flowchart view to see the same process as a flowchart.
Step 5
Export or share
Download the structogram as PNG, SVG, or PDF (A4), save the project file (JSON), or create a share link.
Basics
What is a Nassi–Shneiderman diagram?
A structogram, also known as a Nassi–Shneiderman diagram, N-S diagram or Chapin diagram, shows the steps of an algorithm as nested blocks. Isaac Nassi and Ben Shneiderman published this representation in 1973; in Germany, its symbols are standardized in DIN 66261.
Because there are no arbitrary jumps, a structogram encourages structured programming: sequences, branches, and loops are visibly nested. Students and trainees use them to plan algorithms before choosing a programming language.
Use this editor to create structograms online without drawing lines or measuring boxes: it calculates the blocks from your steps and can draw the same process as a flowchart.
Pseudocode
From pseudocode to structogram
Write one line per step, and the structogram updates as you type. The editor recognizes German and English keywords; capitalization and indentation do not matter. Here is the “Factorial” template shown when you first open the editor:
With English keywords
PROGRAM Factorial
INPUT n
result := 1
FOR i FROM 1 TO n
result := result * i
END FOR
OUTPUT result| Building block | German | English |
|---|---|---|
| Input | EINGABE x | INPUT x |
| Output | AUSGABE x | OUTPUT x |
| Subroutine | AUFRUF p(x) | CALL p(x) |
| Branch | WENN … DANN … SONST … ENDE WENN | IF … THEN … ELSE … END IF |
| Case selection | FALLS x FALL 1: … SONST: … ENDE FALLS | SWITCH x CASE 1: … DEFAULT: … END SWITCH |
| Pre-test loop | SOLANGE … ENDE SOLANGE | WHILE … END WHILE |
| Post-test loop | WIEDERHOLE … BIS … | REPEAT … UNTIL … |
| Counting loop | FÜR i VON 1 BIS n … ENDE FÜR | FOR i FROM 1 TO n … END FOR |
| Infinite loop | ENDLOSSCHLEIFE … ENDE ENDLOSSCHLEIFE | LOOP … END LOOP |
| Exit (break) | ABBRUCH | BREAK |
The editor does not recognize keywords in other languages; it treats those lines as simple instructions. You can write the text inside blocks—conditions, instructions, and names—in any language. If you make a typo, the editor highlights the line with a hint and keeps the last valid diagram.
Practice templates
Structogram examples for practice
Nine common exercises from computer science classes, vocational training, and university courses are ready to use. Load one with “Load example template” and then edit it freely. The templates use whichever keywords are selected for the pseudocode field: German or English.
- Factorial
- Grade calculation
- Login with 3 attempts
- Leap year
- Maximum of a list
- Bubble sort
- Vending machine
- Prime number test
- Number guessing
DIN 66261
Key Nassi–Shneiderman diagram symbols
The Nassi–Shneiderman structure blocks the editor can draw. Each block has exactly one entry at the top and one exit at the bottom. The editor does not support parallel processing as defined in DIN 66261.
Instruction (structure block)
A rectangle represents a single processing step, such as an assignment or calculation.
Sequence
Blocks stacked vertically run in sequence from top to bottom. Input and output are ordinary instruction blocks.
Branch (selection)
A triangle containing the condition splits the flow into a Yes branch and a No branch. An empty branch is marked with ∅.
Case selection (multiple choice)
Exactly one case runs depending on the value of an expression. The case values appear directly below the diagonal; the final case (often “otherwise” for all remaining values) is in the right-hand triangle.
Pre-test loop
The condition is at the top and is checked before each iteration. If it is false at the start, the loop body does not run at all.
Post-test loop
The condition is at the bottom: the loop body runs at least once and repeats until the condition is met.
Counting loop
A pre-test loop with a counter variable, start and end values, and an optional step size.
Subroutine call
A block with double side lines calls a separate subroutine described elsewhere.
Infinite loop
A repetition without a condition: a top bar (optionally labeled), a bar on the left, and a bottom bar. It can only be exited with an exit block.
Exit (break)
The wedge on the left exits the innermost surrounding loop; the label names the block being exited. Execution then continues with the block after that loop.
DIN 66001
Key program flowchart symbols
The DIN 66001 symbols used by the editor for program flowcharts. The flow is arranged automatically, so you do not need to move anything.
Terminator (start/end)
The oval marks the start and end of the program flowchart.
Operation
A rectangle represents a processing step, such as an assignment or calculation.
Input/output
The parallelogram shows where data is read or output.
Branch
The diamond contains a condition. Depending on the result, the flow continues through the Yes or No exit.
Subroutine
A rectangle with double side lines calls a subroutine with its own flowchart.
Flow line
Lines with arrowheads connect the symbols and show the sequence. The normal flow runs from top to bottom.
Branch with merge
After a branch, both paths merge at one point before the flow continues.
Loop boundary (infinite loop)
A hexagon with beveled top corners marks the start of a loop; one with beveled bottom corners marks its end. The editor uses this pair for an infinite loop.
Exit point
A lettered circle connects two points without a long line. An exit ends at circle A, and the flow resumes at circle A after the loop.
Loop with return path
A loop is formed by a branch and a return line leading back to the condition.
Discover more
More tools
Compare text online (Diff Checker)
Compare text online: Compare two texts, configs, or code versions, see differences line by line and word by word, and copy them as a Unified Diff. Runs entirely in your browser.
Built by Dimitri Heissler
Regex Tester
Test regular expressions live against the native JavaScript engine—with match highlighting, capture groups, and replace mode, all in your browser.
Built by Jakub Martyniak
Markdown Editor
Write Markdown online with a live preview: GitHub READMEs and Discord messages, tables from Excel, and PDF or HTML export. Entirely in your browser.
Built by Dimitri Heissler
Flowchart editor
NewCreate program flowcharts online according to DIN 66001: use automatic layout, a block builder, or pseudocode; switch to a Nassi–Shneiderman diagram; and choose from 9 exam templates with PNG, SVG, and PDF export.
Built by Justin Schuessler
Convert hex to decimal (binary, hex, decimal, octal)
NewNumber base converter: Convert hex to decimal, binary to decimal, and back, plus octal and any base up to 36. Includes step-by-step calculations, two's complement, and clickable bits.
Built by Luca Stanek
FAQ
Frequently asked questions
Quick answers about structograms, Nassi-Shneiderman diagrams, DIN 66261, and this editor.
A structogram shows the flow of a program or algorithm graphically without committing to a programming language. Each processing step is a rectangle, and branches and loops are nested blocks. Because there are no jumps, it encourages a clearly structured flow. Isaac Nassi and Ben Shneiderman published this representation in 1973, which is why it is also called a Nassi-Shneiderman diagram, N-S diagram, or Chapin diagram.
Right here in the editor: it’s free, needs no account, and runs entirely in your browser. Your current work is stored only in your browser’s local storage, and exports are created directly on your device. In a share link, the diagram is in the part of the URL after the #, which is not sent to the server.
Instruction, sequence, input, output, branch, case selection, pre-test loop, post-test loop, counting loop, infinite loop, exit (break), and subroutine call. The symbols follow DIN 66261 (symbols for Nassi-Shneiderman diagrams, 1985). Parallel processing is the only element from the standard that the editor does not support.
Both show the same process. A structogram nests blocks and has no arbitrary jumps. A program flowchart (DIN 66001) connects symbols with arrows; loops use arrows that lead back. In this editor, you can switch between the two views with one click because both are drawn from the same process. Go to the flowchart editor
A pre-test loop (while) has its condition at the top and checks it before each iteration, so its body might never run. A post-test loop (repeat … until) checks at the bottom, so its body runs at least once. A counting loop (for) is a pre-test loop with a counter variable, start and end values, and an optional step size. An infinite loop has no condition and can only be exited with a break.
Write one line per step. Open and close blocks with fixed keywords in German (IF, SWITCH, WHILE, REPEAT … UNTIL, FOR … FROM … TO) or English (IF, SWITCH, WHILE, REPEAT … UNTIL, FOR … FROM … TO); choose the language at the pseudocode field. The editor does not recognize keywords in other languages, but you can write the text inside blocks in any language. It does not convert Java or Python code or generate program code. If you make a typo, it highlights the line with a hint and keeps the last valid diagram.
Export as a high-resolution PNG, an SVG for further editing, or a PDF on an A4 page for printing. You can insert the PNG into Word or LibreOffice Writer as an image. Save your work as a project file (JSON) and reopen it later; it includes a version number so older files work in newer versions of the editor.
Yes, there are nine templates with common exercises: factorial, grade calculation, login with 3 attempts, leap year, maximum in a list, bubble sort, vending machine, primality test, and number guessing. Load one with “Load example template” and edit it freely. If you need to draw a diagram by hand in an exam, the editor can help you practice and check your work.
Any more questions?
Contact SupportFrom flow to program
Try out the code from your diagram on your own server
On a ZAP-Hosting VPS, you have full root access for any language. PHP and MySQL are ready to use on a web hosting plan.
4.4/5 Trustpilot32,000+ Active serversSince 2010
No setup. No risk. Online in seconds.
Flexible TermCancel anytimeOnline in 60 seconds
Looking for more tools? View all developer tools
Preferred source on Google
