Mermaid ASCII: Mermaid-Diagramme im Terminal rendern

• 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