Flussdiagramm für Algorithmen und Prozesse online

Online-Werkzeug zum Erstellen von Flussdiagrammen und Programmablaufplänen für Algorithmen und Geschäftsprozesse. Das Diagramm existiert zugleich als Zeichnung und als Mermaid-Text: eine Zeile getippt — ein Block erscheint, einen Block verschoben — der Text ändert sich, und die manuelle Anordnung übersteht Textänderungen. Layout und Pfeile um Blöcke herum erstellt der Editor selbst.

So erstellen Sie ein Diagramm

1
Mit einem Beispiel oder mit Text beginnen

Vier Vorlagen: einfacher Ablauf, Verzweigung, Algorithmus mit Schleife und Diagramm mit Bahnen. Eine Zeile wie „A[Aktion] --> B{Bedingung?}“ erzeugt zwei Blöcke und einen Pfeil.

2
Direkt im Diagramm bearbeiten

„Block“ fügt einen Schritt hinzu, „Verbinden“ zieht einen Pfeil, ein Doppelklick ändert die Beschriftung von Block oder Pfeil, Blöcke werden mit der Maus gezogen. Strg und Mausrad ändern den Zoom.

3
Das Ergebnis mitnehmen

Im Tab „Export“: PNG, SVG, PDF auf einer A4-Seite, Bild in der Zwischenablage, Text für eine README und ein Link, über den sich das ganze Diagramm öffnet.

🔥 Gerade beliebt
🗣️ Text vorlesen lassen ✨ Video-Enhancer ✂️ Audio zuschneiden ✨ Audio-Enhancer 🎭 Voice-Changer 🎙️ Vocal-Remover 🎬 Video aus Audio erstellen 🎬 Video trimmen

Erstellen Sie das Diagramm per Text, Maus oder Beschreibung

Doppelklick — Beschriftung · Tab — nächster Schritt · Pfeiltasten — verschieben · Strg+Mausrad — Zoom
Weißt du nicht, was du ausprobieren sollst?
800+ Tools — Überraschung öffnen
🎲 Überrasch mich

Funktionen

Text und Zeichnung sind ein Dokument
Links das Diagramm als Zeichnung, rechts derselbe Ablauf als Text. Eine Zeile getippt — ein Block erscheint; einen Block verschoben, Form oder Pfeilbeschriftung geändert — der Text ändert sich.
Eine Verschiebung geht beim Bearbeiten des Textes nicht verloren
Die Verschiebung wird als Versatz zur berechneten Layout-Position gespeichert: drei Zeilen ergänzt, das Diagramm baut sich neu auf, und Ihr Block bleibt relativ zu den Nachbarn an derselben Stelle. Editoren, die das Bild aus Text erzeugen, setzen die manuelle Anordnung beim Neuaufbau meist zurück.
Diagramm aus Beschreibung und aus Programmcode
Beschreiben Sie den Ablauf in Worten oder fügen Sie Code in Python, C, C++, Java, JavaScript oder Pascal ein — das Modell liefert Diagrammtext mit Bedingungen, Schleifen sowie Ein- und Ausgabe. Nachbessern per Satz behält Ihre Verschiebungen. Mit Premium verfügbar.
Pfeile gehen um Blöcke herum, nicht hindurch
Eine Linie läuft waagerecht und senkrecht und biegt in einen freien Korridor zwischen den Reihen ab. Der Rücksprung „zurück zu Schritt 2“ wird seitlich geführt, statt die Zeichnung zu durchkreuzen.
Formen, die man ohne Legende liest
Anfang und Ende, Aktion, Bedingung, Ein-/Ausgabe, Vorbereitung, Speicher, Unterprogramm, Verbinder — die gewohnten Symbole eines Programmablaufplans.
PNG, SVG, PDF und Bild in die Zwischenablage
SVG ist Vektor fürs Layout, PDF eine A4-Seite für Hausarbeit und Arbeitsanweisung, PNG und das kopierte Bild gehen in Word, Chat oder Präsentation. Schwarz-Weiß-Gestaltung für den Druck.

Was möglich ist

  • Einen Programmablaufplan mit Bedingungen und Schleifen erstellen
  • Ein Geschäftsprozess-Diagramm mit Bahnen je Abteilung zeichnen
  • Ein Flussdiagramm aus Programmcode oder aus einer Beschreibung in Worten erstellen
  • Mermaid-Text in eine Zeichnung verwandeln und zurück
  • Blöcke ins eigene Layout schieben, ohne die automatische Anordnung zu verlieren
  • Das Diagramm als PDF auf einer A4-Seite oder als Vektor-SVG exportieren
  • Das Diagramm per Link teilen oder als mermaid-Block in eine README einfügen

Warum hier

Diagrammeditoren zerfallen in zwei Lager. Die einen bauen das Bild aus Text — und setzen beim Neuaufbau die Anordnung der Blöcke zurück. Die anderen lassen alles pixelgenau verschieben — und haben keine Textquelle, sodass sich das Diagramm weder erzeugen noch zwischen Versionen vergleichen lässt. Hier leben beide Seiten gleichzeitig: Der Text bleibt gewöhnliches Mermaid, und die manuellen Verschiebungen sind eine eigene Schicht, die sein Neuschreiben übersteht.

Fragen zu Flussdiagrammen

Ich habe einen Block verschoben und danach eine Zeile im Text ergänzt. Geht die Verschiebung verloren?

Nein. Die Verschiebung wird nicht als Punkt auf der Zeichenfläche gespeichert, sondern als Versatz zu der Position, die das Layout für den Block berechnet hat. Das Diagramm hat sich für die neue Zeile komplett neu aufgebaut, und Ihr Block ist mitgewandert und hat genau den Versatz behalten, den Sie ihm gegeben haben. Die Schaltfläche „Auto-Anordnung“ in der Ecke der Zeichenfläche entfernt alle Verschiebungen auf einmal.

Welcher Code lässt sich in ein Flussdiagramm verwandeln?

Python, C, C++, C#, Java, JavaScript, Pascal und ähnliche Sprachen — bis zu 4000 Zeichen auf einmal. Bedingungen werden als Rauten mit den Beschriftungen „ja“ und „nein“ gezeichnet, eine Schleife als Bedingung mit Rücksprung, Ein- und Ausgabe als Parallelogramme, Funktionen aus demselben Code als Unterprogramme. Das Ergebnis kommt als Diagrammtext, ein überflüssiger Block ist also mit einer Zeile entfernt.

Warum läuft ein Pfeil im Zickzack statt geradeaus?

Eine gerade Linie zur nächsten Reihe führt oft mitten durch einen fremden Block. Hier biegt der Pfeil in einen freien Korridor zwischen den Reihen ab: eine Ecke länger, dafür durchkreuzt er nichts, und man sieht, wo er ankommt.

Wie zeichne ich einen Rücksprung zu einem früheren Schritt?

Schreiben Sie einen Pfeil zurück: „D --> B“ — oder klicken Sie „Verbinden“ am unteren Block und dann am oberen. Der Editor erkennt die Schleife, ordnet das Diagramm wie gewohnt von oben nach unten an und führt den Rückweg seitlich — so liest er sich als Rücksprung.

Lässt sich das Diagramm in einem anderen Editor öffnen?

Ja, der Diagrammtext ist gewöhnliches Mermaid. GitHub, GitLab, Notion, Obsidian und Mermaid-Editoren nehmen ihn an. „Für README“ kopiert ihn direkt als ```mermaid-Block, den GitHub gleich in der Projektbeschreibung als Diagramm darstellt.

Wie bringe ich das Diagramm in eine Hausarbeit oder Arbeitsanweisung?

Entweder „PDF · A4“ — das Diagramm liegt auf einer Seite mit 15 mm Rand bei etwa 300 Punkten pro Zoll — oder „Bild kopieren“ und Strg+V direkt in Word. Für einen Schwarz-Weiß-Drucker wählen Sie zuerst „S/W für Druck“: Farbige Füllungen kommen auf so einem Drucker als graue Flecken unter dem Text heraus.

Was steckt in einem Link zum Diagramm?

Der Diagrammtext und Ihre Blockverschiebungen, komprimiert in die Seitenadresse. Wer den Link öffnet, sieht dasselbe Diagramm mit derselben Anordnung und kann es bearbeiten. Das eigene Diagramm geht dabei nicht verloren — Strg+Z holt es zurück.

💡 Sollen wir ein Tool speziell für Sie verbessern?

Machen wir — und zwar! Schreiben Sie uns kurz Ihre Idee. Wenn Sie sie im Detail besprechen möchten, hinterlassen Sie eine E-Mail-Adresse, wir melden uns. Anonym geht auch.

Wie bewerten Sie dieses Tool?

Danke für Ihre Bewertung!
Möchten Sie mehr sagen? Hinterlassen Sie einen Kommentar!
Danke! Ihr Kommentar erscheint nach der Moderation.
Für wen ist dieses Tool gedacht?
🎓 Studierende 📚 Lehrende 💻 Entwicklerinnen & IT-Profis 📋 Produktivität

Mit dem Hochladen bestätigen Sie, dass Sie zur Weitergabe des Inhalts an Dritte berechtigt sind, und verpflichten sich, keine personenbezogenen Daten Dritter aufzunehmen. Einzelheiten in den Nutzungsbedingungen. KI-Anbieter Tembrica ist ein unabhängiges Produkt. Wir stehen in keiner Verbindung zu den Herstellern der hier genannten Modelle und Dienste und werden von ihnen weder unterstützt noch gesponsert; ihre Namen dienen allein der sachlichen Angabe, welche Engine ein Werkzeug antreibt.

Veröffentlicht Aktualisiert Autor: