Mermaid ASCII: Mermaid-Diagramme im Terminal rendern

 (github.com/lukilabs)
16 Punkte von GN⁺ 2026-01-30 | 1 Kommentare | Auf WhatsApp teilen
  • beautiful-mermaid ist ein ultraschnelles, TypeScript-basiertes Tool zum Rendern von Mermaid-Diagrammen als SVG oder ASCII-Art
  • Unterstützt 5 Diagrammtypen (Flowchart, State, Sequence, Class, ER) und funktioniert sowohl im Terminal als auch im Browser
  • Mit 15 integrierten Themes und Shiki-Kompatibilität lassen sich VS-Code-Themes direkt anwenden
  • Der Mono-Modus bietet eine konsistente visuelle Darstellung mit nur zwei Farben, während benutzerdefinierte CSS-Eigenschaften einen Theme-Wechsel in Echtzeit ermöglichen
  • Gewinnt als leichtgewichtiges, abhängigkeitfreies Tool an Bedeutung, um Datenflüsse und Systemstrukturen in KI-gestützten Programmierumgebungen zu visualisieren

Überblick

  • beautiful-mermaid ist ein Tool zum Rendern von Mermaid-Diagrammen als SVG oder ASCII/Unicode-Text
    • Funktioniert ohne DOM-Abhängigkeiten und unterstützt ultraschnelles Rendering (mehr als 100 Diagramme in unter 500 ms)
    • Entwickelt vom Craft-Team für Craft Agents
  • Portiert Mermaid-ascii (ein Go-basiertes Projekt) nach TypeScript und erweitert den Funktionsumfang
    • Unterstützung für Sequence-, Class- und ER-Diagramme hinzugefügt
    • Enthält Unicode-Rahmenzeichen sowie Einstellungen für Abstände und Padding

Hauptfunktionen

  • Unterstützte Diagrammtypen: Flowchart, State, Sequence, Class, ER
  • Ausgabeformate: SVG (für Rich UI), ASCII/Unicode (für Terminals)
  • Theme-System
    • 15 integrierte Themes verfügbar (tokyo-night, dracula, nord, github-dark usw.)
    • Mono-Modus: Leitet automatisch das gesamte Farbschema aus nur zwei Farben für Hintergrund (bg) und Vordergrund (fg) ab
    • Enriched-Modus: Optionale Farbangaben wie accent, muted, surface, border sind möglich
    • Unterstützt Echtzeit-Wechsel auf Basis benutzerdefinierter CSS-Eigenschaften
  • Shiki-Integration
    • Ordnet Farben aus VS-Code-Themes automatisch den Diagrammfarben zu
    • Mit der Funktion fromShikiTheme() lassen sich bg, fg, accent usw. extrahieren

Installation und Verwendung

  • Installationsbefehl
    • npm install beautiful-mermaid oder bun add beautiful-mermaid, pnpm add beautiful-mermaid
  • Beispiel für SVG-Rendering 
    import { renderMermaid } from 'beautiful-mermaid'
const svg = await renderMermaid(`graph TD; A-->B;`)
  • Beispiel für ASCII-Rendering 
    import { renderMermaidAscii } from 'beautiful-mermaid'
const ascii = renderMermaidAscii(`graph LR; A --> B --> C`)
  • Verwendung im Browser
    • Kann über CDN (unpkg, jsDelivr) direkt per <script>-Tag geladen werden
    • Über das globale Objekt beautifulMermaid sind renderMermaid, renderMermaidAscii, THEMES usw. zugänglich

ASCII-Ausgabe und Optionen

  • Unterstützt Unicode-Modus (Standard) und reinen ASCII-Modus
  • Optionen
    • useAscii: ob ASCII verwendet wird
    • paddingX, paddingY: Abstand zwischen Knoten
    • boxBorderPadding: Innenabstand der Knoten
  • Beispielausgabe 
    ┌───┐     ┌───┐
│ A │────►│ B │
└───┘     └───┘

API-Zusammenfassung

  • renderMermaid(text, options?): Rendert ein Mermaid-Diagramm als SVG
    • Optionen: bg, fg, accent, muted, surface, border, font, transparent
  • renderMermaidAscii(text, options?): Rendert als ASCII-/Unicode-Text
  • fromShikiTheme(theme): Extrahiert Farben aus einem Shiki-Theme
  • THEMES: Objekt mit 15 integrierten Themes
  • DEFAULTS: Standardfarben (#FFFFFF, #27272A)

Lizenz und Erstellung

  • MIT-Lizenz
  • Erstellt vom Craft-Team
  • Basis der ASCII-Engine: mermaid-ascii von Alexander Grooff

Technische Bedeutung

  • In KI-gestützten Coding-Assistent-Umgebungen lassen sich Diagramme direkt im Terminal oder in Chat-Oberflächen visualisieren
  • Dank leichtgewichtigem, schnellem und abhängigkeitfreiem Aufbau auch für CLI-Tools oder Serverumgebungen sehr gut geeignet
  • Erweiterbarkeit und Kompatibilität der Themes verbessern die Developer Experience

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2026-01-30
Hacker-News-Kommentare

  • Das Projekt auf Basis der von Alexander Grooff entwickelten Go-Bibliothek mermaid-ascii ist wirklich cool
    Allerdings wurde ein Bug entdeckt, bei dem die "start"-Kante nicht gerendert wird
    Getestet wurde auf agents.craft.do/mermaid

  • Ich verstehe nicht ganz, warum ASCII-Diagramme gerade wieder so viel Aufmerksamkeit bekommen
    Mermaid oder PlantUML sind ohnehin schon textbasiert, und die meisten Nutzer wollen standardisierte Diagramme, die für Menschen gut lesbar sind, nicht für Maschinen
    ASCII ist auf druckbare Zeichen beschränkt, hat daher weniger Ausdruckskraft und lässt sich auch schwer standardisieren

    • Das hängt vom Kontext ab. In Umgebungen wie einer README oder CLI-Ausgabe, in denen Mermaid nicht gerendert werden kann, ist ASCII in Sachen Lesbarkeit die beste Wahl
    • Man kann ASCII-Diagramme in Code-Kommentare einfügen. Auch in terminalbasierten Tools wie Claude Code sind sie gut sichtbar
    • Es geht weniger darum, dass „ASCII nutzlos ist“, sondern eher darum, dass es in textzentrierten Workflows (z. B. Org Mode, Verwaltung von Git-Repositories) sogar nützlich ist
      Denn man braucht kein Management von Bilddateien und keine komplexe Konfiguration wie Git LFS
    • Ein Vorteil ist, dass kein Renderer nötig ist. Man kann sie direkt in Markdown-Dokumenten oder im Quellcode in ihrer bereits „gerenderten“ Form lesen
    • Da viele Entwickler und Coding-Agenten hauptsächlich mit Markdown- und CLI-Umgebungen arbeiten, ist dieser ASCII-Ansatz ganz natürlich

  • Ich mag ASCII-Diagramme wirklich sehr
    Ob man sie im Terminal mit cat ansieht oder auf einer Website rendert, sie sehen auf beide Arten großartig aus
    Mit einer guten Monospace-Schriftart wirken sie auch optisch sauber
    Ich empfehle auch die App Monodraw zum Erstellen von ASCII-Diagrammen

    • ^Unicode
    • Besonders gut gefällt mir, dass man Diagramme am Anfang des Quellcodes platzieren kann

  • Der eigentliche Mermaid-ASCII-Renderer wurde aus dem Projekt AlexanderGrooff/mermaid-ascii übernommen
    Dieses Projekt hat ihn nach TypeScript konvertiert und eigene Themes hinzugefügt

    • Eigentlich hätte man mermaid-ascii wohl einfach als WASM bündeln können
      Der Hauptalgorithmus ist fast eine 1:1-Konvertierung, daher hätte Claude es vermutlich in weniger als einer Stunde nach TS portieren können
      Man kann den Go-Code mit dem TS-Code vergleichen
    • Danke für die Nennung in den Credits
    • Da es auf Go basiert, braucht man nicht einmal Witze über Paketverwaltung zu machen. Ich werde es in meinen Debugger integrieren
    • Jemand hat darauf hingewiesen, ob die KI nicht einfach das ganze Projekt kopiert und nur den Namen geändert hat
    • Der Link zum Original wurde korrigiert. Der Einreicher scheint es in guter Absicht gepostet zu haben

  • Mermaid bekommt viel Aufmerksamkeit, aber Kroki(kroki.io) unterstützt eine deutlich größere Vielfalt an Diagrammformaten
    Darunter fast alle textbasierten Diagramme wie BlockDiag, BPMN, C4, D2, DBML, Excalidraw und GraphViz
    Mein Markdown-Editor KeenWrite(keenwrite.com) integriert Kroki als Dienst, sodass neue Formate automatisch verfügbar werden, sobald sie hinzugefügt werden
    Mermaid verwendet <foreignObject>, weshalb das Rendering in den meisten Bibliotheken schwierig ist

    • MermaidJS und Kroki zu vergleichen ist ein bisschen so, als würde man PDF.js mit Adobe Acrobat vergleichen
      MermaidJS läuft schnell und lokal innerhalb von Webseiten, während Kroki von einem externen Dienst abhängig ist
      Wenn man keine komplexen Diagramme braucht, ist Mermaid die einfachere Wahl
    • Ich habe einmal ein Tool namens phart gebaut, um NetworkX-DAGs als ASCII zu rendern
      In den README-Beispielen gibt es verschiedene Ausgaben, darunter auch einen Schachgraphen
    • Anfangs fand ich das Design von Kroki wegen der starken Schatten und Schriftverzerrungen nicht besonders gut, später stellte sich aber heraus, dass das ein Missverständnis war
      Trotzdem finde ich den Standardstil von Mermaid sauberer
      Übrigens wirkt KeenWrite ziemlich hervorragend

  • Es gibt auch das Tool Diagon, das Text in ASCII-Diagramme umwandelt
    Ich habe außerdem eine Liste von Text-zu-Diagramm-Tools zusammengestellt, aber Tools für Text→ASCII gibt es nicht viele

    • Jemand bedankte sich für die gute Liste

  • Um die Live-Demo auszuführen, braucht man anscheinend den Download einer AI-Agent-Plattform
    Schade, dass man es nicht einfach sofort ohne Installation ausprobieren kann

    • Es wäre schön, wenn die Entwickler eine rein clientseitige Demo auf GitHub Pages bauen würden
      Nach der Projektstruktur zu urteilen, sollte das gut möglich sein

  • Es gibt die Funktion „Subgraph Direction Override“, mit der man die Richtung eines Subgraphen separat festlegen kann
    Damit kann man Swimlane-Diagramme, die Mermaid bisher nicht unterstützt, nachbilden

  • Mein Projekt Selkie ist ein experimentelles Projekt, das Mermaid-Parser und -Renderer vollständig in Rust implementiert
    Es diente dazu zu testen, wie viel mit Claude Code möglich ist, und das Ergebnis ist erstaunlich
    Im Playground kann man es direkt ausprobieren
    Mit Unterstützung für das Kitty-Terminal könnte man Diagramme sogar direkt im Terminal ausgeben
    Bald werde ich den gesamten Prozess in einem Blogpost zusammenfassen

  • Dieses Projekt ist wirklich großartig, und auch die Synergie mit Claude Code ist beeindruckend
    Ich habe ein ähnliches Projekt gemacht, mich aber statt auf ASCII auf interaktive Code-Erkundung konzentriert
    Es wurde so entworfen, dass es das menschliche Verständnis unterstützt, nutzt D2 und bereitet auch Mermaid-Unterstützung vor
    Ich würde gern Meinungen dazu hören, ob Interaktivität für Menschen wertvoller ist oder ob Agenten-Kontext wichtiger ist
    Projektlink