Graphviz-Editor
DOT-Code schreiben und Graphviz-Diagramme live im Browser rendern. Alle 7 Layout-Engines, Fehlerzeilen, zoombare Vorschau, SVG-Download und PNG-Export. Vollständig lokal mit WebAssembly - ohne Upload.
Was sind Graphviz und die Sprache DOT?
Graphviz ist ein klassisches Open-Source-Toolkit zur Graphenvisualisierung. DOT ist seine Textsprache zur Beschreibung von Knoten, Kanten und Attributen; Graphviz berechnet automatisch ein lesbares Layout.
Brauche ich Internet zum Rendern?
Nur für den einmaligen ersten Download der Layout-Engine. Danach läuft das Rendern lokal im Browser über WebAssembly – Diagramme und Code verlassen nie Ihr Gerät.
Welche Layout-Engines werden unterstützt?
Alle sieben: dot (hierarchisch), neato und fdp (kraftbasiert), circo (kreisförmig), twopi (radial), osage (Cluster-Baum) und patchwork (Treemap). Umschalten im Layout-Auswahlfeld.
Wie erkenne ich die Bedeutung eines Syntaxfehlers?
Bei Problemen im DOT-Code zeigt ein Fehlerbereich die Engine-Meldung samt Zeilennummer des Analysefehlers an, während die letzte gültige Darstellung sichtbar bleibt.
Kann ich das Ergebnis exportieren?
Ja. Laden Sie die gestochen scharfe Vektor-SVG-Datei oder exportieren Sie ein PNG in 2x-Auflösung mit zur Theme passendem Hintergrund.
Ist die Vorschau für große Graphen zoombar?
Ja. Nutzen Sie das Mausrad über der Vorschau oder die Zoom-Schaltflächen, ziehen Sie zum Schwenken und klicken Sie Einpassen zum Zurücksetzen.
Gibt es Startbeispiele?
Das Beispiele-Menü enthält ein Flussdiagramm, einen Zustandsautomaten, ein Organigramm, ein neato-Netzwerk und einen twopi-Radialbaum – jeweils mit fertigem, bearbeitbarem DOT-Code.
Wird mein DOT-Code hochgeladen oder gespeichert?
Nein. Nichts wird an einen Server gesendet und nichts gespeichert; der Editor liest nur, was Sie in der aktuellen Seitensitzung eingeben.
Wie große Graphen schafft es?
Graphen mit einigen hundert Knoten rendern fast sofort. Sehr große Graphen (Tausende Knoten) funktionieren ebenfalls, dauern aber entsprechend länger.
Entspricht das Ergebnis dem Kommandozeilen-Graphviz?
Es bündelt dieselben Graphviz-Bibliotheken (Version 16), daher sind Layouts und SVG-Ausgabe äquivalent zum lokalen Aufruf des dot-Befehls mit gleicher Eingabe und denselben Optionen.
So verwenden Sie Graphviz-Editor
Dieser Editor rendert Graphviz-Diagramme direkt in Ihrem Browser. Schreiben Sie links DOT-Code und sehen Sie zu, wie sich die SVG-Vorschau beim Tippen aktualisiert — angetrieben von den echten Graphviz-Bibliotheken, kompiliert zu WebAssembly, sodass Ihre Graphen niemals Ihren Computer verlassen.
- Tippen Sie DOT-Code in den Quelleditor oder fügen Sie ihn ein. Die Vorschau rendert automatisch etwa 300 ms, nachdem Sie das Tippen beendet haben.
- Wechseln Sie die Layout-Engine (dot, neato, fdp, circo, twopi, osage, patchwork), um die Anordnung des Graphen zu ändern.
- Laden Sie eine Startvorlage aus dem Beispiele-Dropdown — Flussdiagramm, Zustandsmaschine, Organigramm, Netzwerk oder Radialbaum — und bearbeiten Sie sie.
- Nutzen Sie das Mausrad oder die Zoomknöpfe, um große Graphen zu untersuchen, ziehen Sie zum Schwenken und drücken Sie Einpassen zum Zurücksetzen. Laden Sie das Ergebnis als SVG herunter oder exportieren Sie ein 2x-PNG.
Erscheint ein Syntaxfehler, zeigt das Fehlerfeld die exakte Zeile, an der der DOT-Parser stoppte — korrigieren Sie diese Zeile, und die Vorschau erholt sich sofort, ohne Ihren Code zu verlieren.
Verwandte Tools
- Mermaid Editor Erstellen Sie Flussdiagramme, Sequenzdiagramme, Gantt-Charts und mehr aus Text mit dem Mermaid-Editor. Rendern, zoomen und als SVG oder PNG im Browser exportieren.
- Code-Spielwiese Online-HTML-, CSS- und JavaScript-Spielwiese mit Live-Vorschau, Editor mit Zeilennummern und abgefangener Konsole. Snippets sofort testen und das Ergebnis als HTML-Datei herunterladen - komplett im Browser.
- Diagramm-Ersteller Erstelle Balken-, Linien-, Flächen-, Kreis- und Ringdiagramme aus eingefügten CSV- oder TSV-Daten. Live-Vorschau, Farbpaletten, Titel- und Legendensteuerung plus 2x-PNG-Export - alles im Browser.
- Hash-Prüfer MD5, SHA-1, SHA-256, SHA-512 Datei-Hashes lokal berechnen und prüfen
- Chmod-Rechner Kostenloser Online-Chmod-Rechner zur Visualisierung und Berechnung von Linux-Dateiberechtigungen mit Kontrollkästchen. Sofortige Umwandlung zwischen numerischer (755, 644) und symbolischer Notation (rwxr-xr-x). Unterstützt Sonderberechtigungen wie setuid, setgid, sticky bit.
- ASCII-Tabelle Vollständige ASCII-Zeichencodierungsreferenz mit Dezimal-, Hexadezimal-, Oktal-, Binärcodes, HTML-Entities und Beschreibungen. Sofortige Suche und Filterung.
- Hex-Betrachter Zeigen Sie Dateiinhalte im Hex-Dump-Format mit Suche, Offset-Navigation und virtuellem Scrollen an
- MIME-Typ-Suche Finden Sie sofort MIME-Typen nach Dateierweiterung oder suchen Sie Erweiterungen nach MIME-Typ. Kostenlose Online-Referenz mit über 1000 Einträgen.