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

X-PostTrending GitHub RepositoriesTool

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.

Das Wichtigste

  1. Unterstützt 39 visuelle Diagrammtypen, darunter Architektur-, Sequenz-, Sankey- und Wardley-Diagramme sowie Datenbankschemata.
  2. Erzeugt vollständig eigenständigen HTML- und SVG-Code ohne JavaScript, Build-Schritte oder externe Bildabhängigkeiten.
  3. Enthält drei Varianten für jeden Typ: Minimal Light, Minimal Dark und Full-Editorial.
  4. Kann Brand-Farben und -Stile innerhalb von 60 Sekunden aus einer Website auslesen und bestehende Mermaid- oder draw.io-Quellen konvertieren.
  5. Funktioniert als Plugin direkt in Claude Code, Codex, Factory Droid und Pi.

Warum das relevant ist

Standardmäßig von Sprachmodellen generierte Diagramme (wie Mermaid) wirken oft generisch, unübersichtlich oder passen optisch nicht zu bestehenden Designsystemen. Dieser Ansatz liefert direkt im Terminal webfähige, professionelle Vektorgrafiken ohne Design-Tools wie Figma.

Einordnung

Das Tool schließt eine Lücke in KI-gestützten Dokumentations-Workflows. Indem die Ausgabe auf sauberes HTML und SVG reduziert wird, bleiben die Grafiken versionskontrollierbar, leicht anpassbar und ohne Abhängigkeiten direkt im Browser darstellbar. Der Fokus auf bewusste Reduktion ('Target density: 4/10') vermeidet visuelle Überfrachtung.

Original-Post

Trending GitHub Repositories

@trending_repos · 13. August 2026

Trending repository of the day 📈 diagram-design 29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop. Last 24h: 2,855 ⭐ Total: 12,709 ⭐️ t.co/3bqL2cQa7e

591 Likes15 Antworten1225 Lesezeichen86.333 Aufrufe

Auf X ansehen
Ausgewählte Antworten (5)
  • @eboygarcia @trending_repos Been using t.co/9K9sR0syTp Will try this
  • @herpes_fan @trending_repos hmm… I got an idea! t.co/S9WNeNIFmJ
  • @aibuilderhq_ @trending_repos mermaid slop is real. this is a good direction.
  • @Elon_Orbit @trending_repos No shadows, no Mermaid-slop, no Figma fights. Self-contained HTML + SVG. I'm in.
  • @ajs6888 @trending_repos 没有 Mermaid 垃圾”这句怨念很真实，先收了。

Erwähnte Links

Links und Tools aus diesem Beitrag

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: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

  • 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:display-dev/visualize

    visualize: Markenkonforme HTML-Artefakte für KI-Coding-Agenten

    visualize ist ein Open-Source-Skill für KI-Coding-Assistenten wie Claude Code, Cursor oder Codex, um typische KI-Standard-Designs bei generierten HTML-Dokumenten durch markenkonforme Vorlagen und definierte Überarbeitungsbefehle zu ersetzen.

    67SterneHTML

    KI & AI· Tool

  • X-Post:Alice Kangro

    visualize: Markenkonforme HTML-Artefakte mit Coding-Agents erstellen

    Alice Kangro teilt das Open-Source-Projekt display-dev/visualize als persönliche Empfehlung. Das Werkzeug dient als Skill für AI-Coding-Agents, um individuelle und markenkonforme HTML-Dokumente anstelle von generischen Standard-Designs zu erzeugen.

    163Lesezeichen6274Aufrufe

    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.