Communitygithub.com

ankaiinc/diagrams-for-agents

Standardmäßig private Geschäftsdiagramme für KI-Coding-Agenten

Was ist diagrams-for-agents?

Dieses Skill ermöglicht es KI-Coding-Agenten (z. B. Claude Code, Cursor, Codex), auf Wunsch des Benutzers Geschäftsdiagramme zu erstellen. Es arbeitet standardmäßig im lokalen Modus, sodass das Quellmaterial des Benutzers vertraulich auf dessen Rechner bleibt. Der lokale Renderer unterstützt sechs Familien (SWOT, Quadrant, Vergleich, Fluss, Zeitstrahl, Architektur) und produziert HTML mit eingebettetem SVG, optionale Standalone-SVGs und eine Maschinenquittung – alles ohne Konto oder API-Zugriff. Nur wenn der Nutzer explizit eine stärkere Fundierung, ein größeres Framework-Katalog oder die Nutzung der öffentlichen API/MCP anfordert, wechselt der Agent in den verifizierten Modus. Der Skill behandelt die Auswahl des richtigen Diagramm-Typs, das Befüllen mit Evidenz-Zitaten aus dem Benutzerkontext, das Rendern mit node-Skripten und die Validierung der Ausgabe. Zudem unterstützt er den Import von Mermaid-Flussdiagrammen, wobei nicht unterstützte Syntax bewusst abgelehnt wird.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add ankaiinc/diagrams-for-agents

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Diagrams for Agents

Wählen Sie die Darstellung, bevor Sie zeichnen. Verwenden Sie standardmäßig den lokalen Modus, damit das Quellmaterial des Benutzers auf dessen Rechner bleibt. Nutzen Sie den verifizierten Modus nur, wenn der Benutzer explizit eine automatische Framework-Bewertung, eine stärkere Fundierung oder ein API-/MCP-Ergebnis wünscht.

Arbeitsablauf

  1. Lesen Sie den bereitgestellten Kontext und identifizieren Sie die Entscheidung des Lesers.

  2. Lesen Sie references/visual-selection.md. Wählen Sie eine unterstützte Familie und eine Ziel-Voreinstellung aus.

  3. Für eine markenkonforme Ausgabe lesen Sie references/brand.md. Schlagen Sie extrahierte Tokens vor, bevor Sie sie speichern.

  4. Erstellen Sie eine JSON-Spezifikation gemäß der Struktur von assets/spec.example.json. Behalten Sie die vollständige Quelle des Benutzers in source; fügen Sie zu jeder Behauptung ein exaktes evidence-Zitat ein, wenn die gewählte Familie dies erfordert.

  5. Rendern und validieren:

    node <skill-dir>/scripts/render.mjs input.diagrams-for-agents.json output.html --svg output.svg --receipt output.receipt.json
    node <skill-dir>/scripts/validate-artifact.mjs output.html
    
  6. Zeigen Sie das HTML-Artefakt an und berichten Sie die gewählte Familie, bewusst ausgelassene Elemente und ob die Fundierung local-exact-quote oder verified ist.

Modusauswahl

Lokaler Modus – Standard

  • Kein Konto, API-Schlüssel, gehosteter Renderer oder Inhalts-Upload erforderlich.
  • Unterstützte Familien: swot, quadrant, comparison, flow, timeline, architecture.
  • Erzeugt quellbearbeitbares HTML mit eingebettetem SVG, optionalem eigenständigem SVG und einer maschinenlesbaren Quittung.
  • Der Renderer lehnt nicht unterstützte Familien, unsichere Theme-Werte, doppelte IDs, lose Verbindungen und fehlende Exakt-Zitat-Belege ab.

Verifizierter Modus – explizit

Lesen Sie references/verified-mode.md. Verwenden Sie das installierte render_diagram MCP-Tool, wenn verfügbar. Andernfalls rufen Sie die dokumentierte Diagrams for Agents API nur auf, nachdem Sie bestätigt haben, dass der Benutzer damit einverstanden ist, den bereitgestellten Kontext an Diagrams for Agents zu senden.

Der verifizierte Modus ist die richtige Wahl, wenn:

  • der Benutzer möchte, dass Diagrams for Agents aus dem breiteren Business-Framework-Katalog wählt;
  • erfundene oder schwach belegte Geschäftsbehauptungen kostspielig wären;
  • eine Anwendung ein stabiles VisualPayload und eine gehostete Render-URL benötigt;
  • das lokale Sechs-Familien-Set die Entscheidung nicht ehrlich abbilden kann.

Beschreiben Sie den lokalen Modus niemals als gleichwertig zum verifizierten Modus. Exakte Teilzeichenfolgen-Prüfungen belegen die Herkunft, nicht die analytische Korrektheit.

Mermaid-Neuzeichnung

Konvertieren Sie ein Mermaid-Flussdiagramm zuerst:

node <skill-dir>/scripts/import-mermaid.mjs source.mmd draft.diagrams-for-agents.json

Der Importer unterstützt flowchart/graph-Knoten und gerichtete Pfeile. Er lehnt nicht unterstützte Mermaid-Syntax bewusst ab, anstatt sie stillschweigend zu ignorieren. Überprüfen Sie die resultierenden Labels, fügen Sie bei Bedarf den ursprünglichen Kontext und Belege hinzu und rendern Sie dann normal.

Ausgaberegeln

  • Ein Diagramm, ein dominanter Lesepfad.
  • Verwenden Sie höchstens neun primäre Knoten; teilen Sie Übersicht und Details darüber hinaus auf.
  • Verwenden Sie eine Akzentfarbe für maximal zwei fokale Elemente.
  • Bevorzugen Sie das Löschen vor dem Verkleinern von Schrift.
  • Sorgen Sie dafür, dass das finale Artefakt in einem statischen Frame nützlich bleibt.
  • Erfinden Sie niemals fehlende Fakten, um eine Framework-Lücke zu füllen.
  • Senden Sie niemals lokale Inhalte an einen Netzwerkdienst, ohne die Modusänderung explizit zu machen.

Verwandte Skills