ASCII-Art-zu-SVG-Konverter
Wandeln Sie ASCII-Art, Textdiagramme, Wireframes und Monospace-Skizzen direkt im Browser in saubere SVG-Dateien um.
ASCII-Eingabe
Der Konverter erhaelt Monospace-Layout und eignet sich fuer ASCII-Art, Flowcharts, Wireframes, Terminal-Skizzen und einfache Textdiagramme.
Live-SVG-Vorschau
Export-Werkzeuge
SVG-Ausgabe
ASCII-Art in SVG umwandeln
Nuetzlich, wenn aus einer Textskizze schnell eine weiterverwendbare Bilddatei werden soll.
-
1
ASCII-Diagramm einfuegen
Fuegen Sie Wireframe, Flowchart, Terminal-Skizze oder Textgrafik ein.
-
2
Typografie und Abstand anpassen
Legen Sie Schriftgroesse, Innenabstand, Farben und Hintergrund fest.
-
3
SVG-Vorschau erzeugen
Mit einem Klick auf "In SVG umwandeln" wird das Ergebnis direkt angezeigt.
-
4
Ergebnis exportieren
Kopieren Sie den SVG-Code oder laden Sie SVG und JPEG herunter.
Warum diesen ASCII-Art-zu-SVG-Konverter nutzen?
Der wichtigste Anwendungsfall ist eindeutig: textbasierte Diagramme in portable Vektorgrafiken umwandeln, ohne das Layout zu verlieren.
Monospace-Layout bleibt erhalten
Zeichenabstaende bleiben intakt, damit Kaesten, Pfeile und Textausrichtung lesbar bleiben.
Sauberes SVG
Die SVG-Ausgabe bleibt in Dokumentation, Praesentationen und responsiven Webseiten gestochen schaerf.
Laeuft im Browser
Das Rendering erfolgt lokal und benoetigt keinen Hochladen auf einen Server.
ASCII-Art-zu-SVG-FAQ
Hauefige Fragen zur Umwandlung von textbasierten Diagrammen in SVG.
Welche ASCII-Diagramme funktionieren am besten?
Warum lieber SVG statt zuerst PNG?
Kann ich trotzdem ein Rasterbild herunterladen?
Ist der Konverter privat?
Bleibt die exakte Diagramm-Ausrichtung erhalten?
Welche Box-Zeichen sollte ich in meinem Diagramm verwenden?
Ich brauche ein editierbares Diagramm, nicht nur ein Bild. Was soll ich verwenden?
Ueber diesen ASCII-Art-zu-SVG-Konverter
Das Tool eignet sich, wenn ASCII-Diagramme oder Textskizzen schnell als SVG gebraucht werden, ohne sie in einem Grafikprogramm neu aufzubauen.
Wann ein ASCII-Diagramm-zu-SVG-Tool hilfreich ist
Hilfreich fuer Entwicklerdokumentation, interne Wikis, Praesentationen, Issue-Threads, Markdown-Notizen und technische Blogbeitraege.
Tipps fuer bessere Ergebnisse
- Halten Sie das Ausgangsdiagramm moeglichst klar in Monospace-Struktur
- Genug Innenabstand verhindert, dass Pfeile oder Labels gequetscht wirken
- Kontrastreiche Farben verbessern die Lesbarkeit
- Transparente Hintergruende sind sinnvoll, wenn die Zielseite einen verlaesslichen Hintergrund hat
- JPEG ist nuetzlich fuer Chat-Tools oder Praesentationssoftware mit einfacher Bildunterstuetzung
Umfang und Grenzen
Der Fokus liegt bewusst auf Layout-Erhalt und sauberem SVG-Export. Eine semantische Interpretation des Diagramms findet nicht statt.
Referenz der Box-Zeichen
Textdiagramme bestehen aus dem Unicode-Block der Box-Drawing-Zeichen. Jedes Zeichen unten ist in einer Monospace-Schrift exakt eine Spalte breit — genau das hält die Kästen geschlossen und die Pfeile ausgerichtet.
| Characters | Role | Typical use |
|---|---|---|
| ┌ ┐ └ ┘ | Ecken | Zeichnen Sie die vier Ecken eines Kastens: oben ┌────┐, unten └────┘. |
| ─ │ | Linien | Horizontale und vertikale Striche; wiederholen Sie sie, um einen Kasten zu dimensionieren (│ Side │). |
| ├ ┤ ┬ ┴ ┼ | Verzweigungen | T-Stöße und Kreuzungen, wo Linien aufeinandertreffen, z. B. ─┼─ oder ├──┤. |
| --> ==> -> | Pfeile | Horizontale Flusspfeile; ==> markiert meist einen starken oder asynchronen Schritt. |
| v ^ | | Vertikaler Fluss | Schritte fallen nach unten: Ein einzelnes v unter einer │-Linie liest sich als «nach unten». |
| :: == ~~ | Gestrichelte Stile | Punktierte oder doppelte Trennlinien für Gruppierung, Notizen oder Lanes. |