Flowchart Maker for Algorithms and Processes

Online tool for building flowcharts of algorithms and business processes. The diagram exists as a drawing and as Mermaid text at the same time: type a line and a block appears, move a block and the text changes, and your manual placement survives edits to the text. The editor itself handles the layout and routes arrows around blocks.

How to build a diagram

Start from a sample or from text

Four starters: a simple process, a decision, an algorithm with a loop and a diagram with lanes. A line like “A[Action] --> B{Condition?}” creates two blocks and an arrow.

Edit right on the diagram

“Block” adds a step, “Connect” pulls an arrow, a double click edits a block or arrow label, blocks are dragged with the mouse. Ctrl and the mouse wheel change the zoom.

Take the result

In the “Export” tab: PNG, SVG, PDF on an A4 page, a picture on the clipboard, text for a README and a link that opens the whole diagram.

Build a diagram as text, with the mouse, or from a description

Double click — label · Tab — next step · arrow keys — nudge · Ctrl+wheel — zoom

Diagram as text Mermaid

Edit the text or the drawing itself — both sides are live. GitHub, Notion and Obsidian understand this syntax.

Samples

Features

Text and drawing are one document

The diagram as a drawing on the left, the same process as text on the right. Type a line and a block appears; move a block, change its shape or an arrow label, and the text changes.

A moved block stays put when the text is edited

A nudge is stored as an offset from the position the layout computed: add three lines, the diagram rebuilds, and your block stays in the same place relative to its neighbors. Editors that build a drawing from text usually reset manual placement on every rebuild.

Diagrams from a description and from program code

Describe a process in words or paste code in Python, C, C++, Java, JavaScript or Pascal — the model returns diagram text with decisions, loops and input/output. Refining with a sentence keeps your nudges. Available with Premium.

Arrows go around blocks instead of through them

A line runs horizontally and vertically and turns into a clear corridor between rows. A loop back to step two is routed round the side instead of crossing the drawing.

Shapes that read without a legend

Start and end, action, decision, input/output, preparation, storage, subprocess, connector — the familiar symbols of algorithm flowcharts.

PNG, SVG, PDF and a picture on the clipboard

SVG is vector for layouts, PDF is an A4 page for coursework and procedures, PNG and the copied picture go into Word, a chat or a deck. Black-and-white styling is there for printing.

What you can do

Build an algorithm flowchart with decisions and loops
Draw a business process diagram with lanes per department
Build a flowchart from program code or from a description in words
Turn Mermaid text into a drawing and back
Nudge blocks to fit your layout without losing the automatic arrangement
Export the diagram to PDF on an A4 page or as vector SVG
Send the diagram as a link or paste it into a README as a mermaid block

Why here

Diagram editors come in two camps. One builds the picture from text — and resets block placement whenever it rebuilds. The other lets you move everything to the pixel — and has no text source, so the diagram can be neither generated nor compared between versions. Here both sides live at once: the text stays ordinary Mermaid, and manual nudges are a separate layer that survives retyping it.

Questions about flowcharts

I moved a block and then added a line to the text. Will the nudge be lost?

No. A nudge is stored not as a point on the canvas but as an offset from the position the layout computed for that block. The whole diagram rebuilt around the new line, and your block moved with it, keeping exactly the offset you gave it. The “Auto layout” button in the corner of the canvas clears all nudges at once.

What code can be turned into a flowchart?

Python, C, C++, C#, Java, JavaScript, Pascal and similar languages — up to 4000 characters at a time. Conditions are drawn as diamonds labeled “yes” and “no”, a loop as a condition with a return, input and output as parallelograms, functions from the same code as subprocesses. The result arrives as diagram text, so an extra block is removed with a single line.

Why does an arrow zigzag instead of going straight?

A straight line to the next row often passes through an unrelated block. Here the arrow turns into a clear corridor between rows: one corner longer, but it crosses nothing and you can see where it lands.

How do I draw a return to a previous step?

Write an arrow backwards: “D --> B” — or press “Connect” on the lower block and then on the upper one. The editor sees the loop, lays the diagram out top to bottom as usual, and routes the return path round the side so it reads as a return.

Can the diagram be opened in another editor?

Yes, the diagram text is ordinary Mermaid. GitHub, GitLab, Notion, Obsidian and Mermaid editors all accept it. “For README” copies it straight away as a ```mermaid block, which GitHub renders as a diagram right in the project description.

How do I put a diagram into coursework or a procedure document?

Either “PDF · A4” — the diagram is placed on a page with 15 mm margins at about 300 dots per inch — or “Copy picture” and Ctrl+V straight into Word. For a black-and-white printer, pick “B/W for print” first: colored fills come out on such a printer as gray patches under the text.

What is inside a diagram link?

The diagram text and your block nudges, compressed into the page address. The recipient opens the link, sees the same diagram with the same placement and can edit it. Their own diagram is not lost — Ctrl+Z brings it back.

💡 Want us to improve this tool just for you?

We can! Just send us a quick message with your idea. If you'd like to discuss it in detail, leave your email and we'll get back to you. You can stay anonymous.

How do you rate this tool?

Thank you for your rating!

Change my rating

Want to leave a comment?

Want to share more? Leave a comment!

Thank you! Your comment will appear after moderation.

Who is this tool for?

By uploading content you confirm that you are entitled to disclose its contents to third parties, and you undertake not to include other people's personal data in it. See the Terms of Use for details. AI providers Tembrica is an independent product. We are not affiliated with, endorsed by or sponsored by the makers of the models and services listed here; their names are used only to say factually which engine runs a given tool.

Published 11 Sep 2026 Updated 16 Sep 2026 Author: The Supreme