beautiful-mermaid: Schnelles Rendern von Mermaid-Diagrammen als SVG und ASCII

Repositorylukilabs/beautiful-mermaidTool

beautiful-mermaid ist eine TypeScript-Bibliothek von Craft, die Mermaid-Diagramme synchron als SVG oder ASCII-Art ausgibt. Sie arbeitet ohne DOM-Abhängigkeiten und richtet sich an Web-Apps sowie CLI-Werkzeuge im KI-Umfeld.

Das Wichtigste

  1. Zwei Ausgabeformate: Liefert saubere SVG-Grafiken für Browser und Rich-UIs sowie ASCII/Unicode-Ausgaben für Terminal- und CLI-Anwendungen.
  2. Synchrones Rendering: Dank ELK.js mit FakeWorker-Bypass werden Diagramme ohne Promises berechnet, was die Integration in React useMemo vereinfacht.
  3. Keine DOM-Abhängigkeit: Reines TypeScript läuft server- und clientseitig gleichermaßen performant (über 100 Diagramme in unter 500 ms).
  4. Umfangreiche Gestaltung: 15 eingebaute Themes, Shiki-Kompatibilität für VS-Code-Farbschemata und dynamischer Wechsel via CSS Custom Properties.
  5. Unterstützte Diagrammtypen: Flowcharts, State-, Sequence-, Class-, ER-Diagramme und XY-Charts.

Warum das relevant ist

Standard-Mermaid bringt für Web-UIs und Terminal-Clients oft zu viel Ballast mit, ist stark an das DOM gebunden und schwierig an bestehende Designsysteme anzupassen. beautiful-mermaid schließt diese Lücke für Entwickler von Entwicklertools und KI-Chat-Assistenten.

Einordnung

Das von Craft entwickelte Projekt entstand primär für Craft Agents, um Diagramme in Programmierassistenten schnell darzustellen. Durch den Verzicht auf DOM-Bindung und die Portierung der ASCII-Engine mermaid-ascii von Go nach TypeScript eignet sich das Tool hervorragend für Headless-Systeme und Terminal-Applikationen. Mit über 11.000 Sternen und aktivem Release-Zyklus weist die Bibliothek eine hohe Reife für den produktiven Einsatz auf.

Erwähnte Links

Gefunden in

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Repository:tt-a1i/archify

    Archify: Interaktive Architektur- und Systemdiagramme für KI-Coding-Agenten

    Archify ist ein quelloffenes Node.js-Rendering- und Validierungssystem, das als Skill für Coding-Agenten wie Cursor, Claude Code, Codex CLI und OpenCode dient. Agenten erzeugen eine typisierte JSON-Zwischendarstellung (IR), die Archify deterministisch in interaktive, eigenständige HTML- und SVG-Dateien sowie Bild- und Videoformate kompiliert.

    45.490SterneJavaScript

    KI & AI· Tool

  • Repository:cathrynlavery/diagram-design

    Diagram Design: Redaktionelle Diagramme via HTML und SVG für KI-Coding-Agenten

    Diagram Design ist ein Skill- und Vorlagensystem für KI-Agenten wie Claude Code, Codex oder Pi. Es generiert 39 visuelle Diagrammtypen als schlankes, eigenständiges HTML und SVG ohne Framework-Abhängigkeiten oder typische LLM-Standarddesigns.

    30.240SterneHTML

    KI & AI· Tool

  • X-Post:Trending GitHub Repositories

    diagram-design: Redaktionelle SVG- und HTML-Diagramme für KI-Coding-Agenten

    Das GitHub-Repository diagram-design von Cathryn Lavery bietet ein Plugin für Claude Code, Codex und kompatible Agenten, um 39 typografisch ansprechende Diagrammtypen als autarkes HTML und SVG zu generieren. Ziel ist der Verzicht auf unästhetische Standard-Boxen im Mermaid-Stil und aufwändiges manuelles Nachbearbeiten in Design-Tools.

    1225Lesezeichen86.333Aufrufe

    KI & AI· Tool

  • Link:tt-a1i.github.io

    Archify: Technische Diagramme per Chat als interaktive HTML-Dateien generieren

    Archify ist ein quelloffener Agent-Skill, der aus natürlichsprachigen Beschreibungen interaktive, eigenständige HTML-Architekturdiagramme erstellt. Das Tool unterstützt fünf Diagrammtypen, vier Design-Presets und bietet hochauflösende Exportfunktionen ohne externe Abhängigkeiten.

    KI & AI· Tool

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.