Create a flowchart online: free editor
Use this editor to create flowcharts based on DIN 66001 from blocks or pseudocode. It arranges the symbols automatically: for example, type “WHILE x < 10” to get a decision diamond, loop body and loopback line. Switch to a structogram of the same process with one click, and export as PNG, SVG or PDF.
Built by Justin Schuessler
Free, with no sign-up or installation: the editor runs entirely in your browser, and your diagrams aren't sent to us.
Process complete? Try the code directly on your own VPS or web hosting plan.
Block builder
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
Flowcharts without dragging boxes around
You describe the process; the editor places the symbols according to DIN 66001, draws the lines and keeps both views up to date.
Symbols based on DIN 66001
Terminators, processes, decisions, input/output and predefined processes, connected by flow lines and lines that lead back for loops.
Switch to structogram
The same process as a structogram based on DIN 66261 (Nassi–Shneiderman), without having to redraw anything.
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 contains the diagram in its URL. Nothing is stored on our servers.
How it works
How to create a flowchart
Start with a template or a blank flow and work whichever way you prefer.
Step 1
Load a template or start from scratch
Choose one of nine sample templates, such as factorial, leap year or bubble sort, or start an empty flowchart with “New”.
Step 2
Build a flowchart with clicks
Choose a block in the builder and place it before or after a step, or inside a block. Double-click to edit the text directly in the diagram.
Step 3
Or write pseudocode
Write the steps in the pseudocode field using German or English keywords. The diagram is laid out automatically, and the editor flags typos with line numbers.
Step 4
Export or share
Download the flowchart as a PNG, SVG or PDF (A4), save the project file (JSON), or copy a share link.
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.
Control structures
Loops and branches in flowcharts
See how the editor draws common control structures and how to write them in pseudocode using German or English keywords.
Branch
The diamond contains the condition. The branches split to the left and right, then merge again. Pseudocode: WENN … DANN … SONST … ENDE WENN (German) or IF … THEN … ELSE … END IF (English).
Switch-case statement
A diamond containing the expression, with one branch per case and an optional default branch. Pseudocode: FALLS x … FALL 1: … SONST: … ENDE FALLS (German) or SWITCH x … CASE 1: … DEFAULT: … END SWITCH (English).
Pre-test loop
The diamond comes before the body. The loopback line leads back on the left to the condition, while the No branch continues on the right. Pseudocode: SOLANGE … ENDE SOLANGE (German) or WHILE … END WHILE (English).
Post-test loop
The body runs at least once, followed by the decision diamond containing the condition. Pseudocode: WIEDERHOLE … BIS … (German) or REPEAT … UNTIL … (English).
Counting loop
Drawn as an initial assignment, a condition, a body and an increment of the counter. Pseudocode: FÜR i VON 1 BIS 10 … ENDE FÜR (German) or FOR i FROM 1 TO 10 … END FOR (English), optionally with SCHRITT or STEP.
Infinite loop with break
A pair of loop boundary symbols encloses the body; a break leads through a connector to a point after the loop. Pseudocode: ENDLOSSCHLEIFE … ABBRUCH … ENDE ENDLOSSCHLEIFE (German) or LOOP … BREAK … END LOOP (English).
Examples
Flowchart examples for practice
Nine typical exercises from school, vocational training and university are included as templates. Load one with “Load sample template”, explore the finished flowchart and its pseudocode, and make changes.
- 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.
Discover more
More tools
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
Nassi–Shneiderman diagram editor
NewCreate Nassi–Shneiderman diagrams online according to DIN 66261: use a block builder or pseudocode, switch to a program flowchart, 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 flowcharts, DIN 66001 and this editor.
A program flowchart shows the steps of a program or algorithm as a sequence of standardized symbols connected by arrows. It shows the order of instructions, inputs, outputs and decisions, independently of any programming language. It's also called a flow diagram or simply a flowchart.
Load a sample template in the editor, or start an empty flowchart with “New”. Add blocks with a click or write the process as pseudocode; both stay in sync. The editor arranges the symbols automatically: branches split left and right before merging again, and loopback lines run to the left of the loop body. Finally, export as PNG, SVG or PDF. It's free and requires no sign-up.
The symbols are defined in DIN 66001 and internationally in ISO 5807. The editor uses the terminator (oval) for start and end, the process (rectangle), the decision (diamond), input/output (parallelogram), the predefined process (rectangle with double vertical edges), flowlines with arrowheads, the connector (lettered circle), and a pair of loop boundary symbols for infinite loops.
A loop consists of a decision and a loopback line. In a pre-test loop, the diamond comes before the body: if the condition is met, the body runs and the line leads back to the diamond; otherwise, the flow continues to the right. In a post-test loop, the diamond comes after the body. A counting loop is drawn as an initial assignment, a condition, a body and an increment of the counter. The editor draws an infinite loop with a pair of loop boundary symbols; a break leads through a connector to a point after the loop. A switch-case statement becomes a diamond with one branch per case and an optional default branch.
Write one step per line, using keywords for blocks: IF … THEN … ELSE … END IF; FALLS x with FALL 1: and SONST: through ENDE FALLS; SOLANGE … ENDE SOLANGE; WIEDERHOLE … BIS …; FÜR i VON 1 BIS 10 … ENDE FÜR; ENDLOSSCHLEIFE … ENDE ENDLOSSCHLEIFE with ABBRUCH; plus EINGABE, AUSGABE and AUFRUF. English keywords (IF, SWITCH, WHILE, REPEAT, FOR, LOOP, BREAK, INPUT, OUTPUT, CALL) work too; you can switch between the two in the pseudocode field. The editor doesn't recognize keywords in other languages and treats those lines as simple instructions. Just paste pseudocode you've written elsewhere into the field. If there's a typo, the editor highlights the line with a hint and keeps the last valid diagram.
Both describe the same process. A flowchart connects symbols with arrows; loops use lines that lead back. A structogram (DIN 66261, Nassi–Shneiderman diagram) nests blocks inside one another and has no jumps, making it more compact and enforcing a structured approach. You can switch between the two views in this editor because both are drawn from the same process.
Yes. Export it as a high-resolution PNG or SVG and insert the file into Word, PowerPoint or another document. For printing, there's a PDF on an A4 page. The project file (JSON) lets you save your flowchart and reopen it in the editor later.
The editor is free to use without signing up. It 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 stored in the part of the URL after #, which is not sent to the server.
Any more questions?
Contact SupportTry the code for your flowchart 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.
No setup. No risk. Online in seconds.
Looking for more tools? View all developer tools
Preferred source on Google
