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

LinkTool

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.

Das Wichtigste

  1. Fünf Diagrammtypen abgedeckt: Architektur, Workflows, Sequenzen, Datenflüsse und Zustandsübergänge (Lifecycle).
  2. Vollständig eigenständige HTML-Dateien ohne Server, Abhängigkeiten oder Laufzeitumgebung, die sich direkt im Browser öffnen und per Chat verfeinern lassen.
  3. Vier Design-Presets (Classic, Signal Flow, Blueprint, Editorial) mit abgestimmten Hell-/Dunkel-Themes und semantischem Farbsystem für sieben Komponententypen.
  4. Export nativ bis 4-fache Auflösung (PNG, JPEG, WebP), Vektor-SVG mit Theme-Wechsel per prefers-color-scheme sowie WebM und Zwischenablage.
  5. Funktionen zur Pfadanalyse und Story-Navigation, inklusive Tastatur-Shortcuts und stabiler Deeplinks auf einzelne Knotenzustände.
  6. Einfache Integration als Agent-Skill via npx für Cursor, Claude Code, Codex, OpenCode und Raven.

Warum das relevant ist

Architektur- und Ablaufdiagramme erfordern meist spezialisierte Editoren oder manuelle Anpassungen. Archify verlagert die Diagrammerstellung direkt in KI-gestützte Coding-Assistenten und liefert interaktive, leicht teilbare Web-Dateien, die Dokumentations-Workflows im Entwicklungsalltag beschleunigen.

Einordnung

Das Tool baut auf dem quelloffenen Projekt Cocoon-AI/architecture-diagram-generator auf (MIT-Lizenz) und löst das Problem statischer Bild-Exporte: Durch den Ansatz, eine einzige HTML-Datei mit nativer Browser-Rasterung und integriertem Theme-Support zu erzeugen, bleiben Diagramme interaktiv durchsuchbar und lassen sich ohne Drittwerkzeuge in Repositories, PRs oder Tickets einbinden. Die semantische Steuerung über Coding-Agents wie Cursor oder Claude Code minimiert zudem den manuellen Layout-Aufwand.

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

  • 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

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.