Typograms ist ein leichtgewichtiges, textbasiertes Diagrammformat (text/typogram), das von ASCII-Art inspiriert ist und direkt im Browser nach SVG gerendert wird. Das Format priorisiert Portabilität und Editierbarkeit über Klartextdateien, während es im Gegensatz zu semantischen Tools wie Mermaid einen rein typografischen WYSIWYG-Ansatz verfolgt. Ein nativer JavaScript-Renderer ermöglicht die einfache Einbindung in Webseiten über ein CDN, Node.js oder die Kommandozeile.
Wichtigste Punkte
Format-Definition: Typograms nutzt einfache Textprimitiven (Pipes wie |, -, Punkte ., Pfeile > und Verbinder wie +), um Flussdiagramme, Architekturen, Tabellen, Schaltkreise und Zeitreihen direkt im Text zu definieren.
Technische Implementierung: Ein clientseitiger JavaScript-Renderer (typograms.js) verarbeitet das Format direkt im Browser über <script type="text/typogram">-Tags; alternativ steht das Tool als CLI- oder Node.js-Bibliothek zur Verfügung.
Design-Kompromiss: Das Format tauscht Expressivität (gegenüber nativen SVG- oder Grafikwerkzeugen) und Ergonomie gegen maximale Editierbarkeit, Versionierungssicherheit und Wartbarkeit als Klartext ein.
Abgrenzung zu Mermaid: Im Gegensatz zu semantisch gesteuerten Werkzeugen wie Mermaid (Transformation einer High-Level-Beschreibung in Grafiken) arbeitet Typograms rein typografisch, was dem Entwickler direkte visuelle Kontrolle auf Kosten eines höheren Schreibaufwands gibt.
Verwandte Werkzeuge: Das Projekt ähnelt svgbob (geschrieben in Rust mit WebAssembly), unterscheidet sich jedoch durch einen reinen JavaScript-Ansatz zur Vermeidung von WASM- und Text-Rendering-Herausforderungen im Browser. Weitere Alternativen umfassen ditaa, asciitosvg, markdeep und GoAT.
Entwicklungsstand (WIP): Aktuelle Arbeiten konzentrieren sich auf die Unterstützung von UTF-8-Diagrammzeichen, fehlerfreie diagonale Verbindungen, präzisere Texterkennung sowie Parenthesen und Sphären.
Diskussions-Highlights
Keine Kommentare vorhanden: Zum Zeitpunkt der Erfassung lagen auf Hacker News keine Kommentare oder Diskussionen zu dieser Einreichung vor.
Glossar
ASCII-Art: Eine grafische Gestaltungstechnik, die standardisierte Textzeichen (ASCII-Zeichensatz) verwendet, um visuelle Abbildungen und Diagramme darzustellen.
SVG (Scalable Vector Graphics): Ein XML-basiertes Dateiformat zur Beschreibung zweidimensionaler Vektorgrafiken, die verlustfrei skaliert werden können.
WASM (WebAssembly): Eine kompakte Binärcode-Technologie, die es ermöglicht, Programme aus Hochsprachen (wie Rust oder C++) mit hoher Geschwindigkeit direkt im Webbrowser auszuführen.
CDN (Content Delivery Network): Ein globales Netzwerk verteilter Server, das Webinhalte wie JavaScript-Bibliotheken optimiert und nah am Endnutzer bereitstellt.
WYSIWYG (What You See Is What You Get): Ein Prinzip, bei dem die Bearbeitungsansicht exakt dem visuellen Endergebnis entspricht, ohne komplexe Zwischenschritte.
CLI (Command Line Interface): Eine textbasierte Benutzeroberfläche zur Steuerung von Software über Befehle in einem Terminal oder einer Konsole.