juanmackie/juanskills

ASCII-Diagramm-Architekt

Ein spezialisiertes Skill zum Generieren hochwertiger, tool-agnostischer ASCII-Diagramme und Flussdiagramme in Codekommentaren oder Dokumentationen, basierend auf dem formalen „Design Space of ASCII Drawings“ (Hayatpur et al., 2024).

Auslöseanweisungen

Verwenden Sie dieses Skill, wenn der Benutzer darum bittet:

• „visualisieren“
• „diagrammen“
• „flussdiagrammieren“
• „kartografieren“

einen Prozess, eine Datenstruktur oder eine Systemarchitektur mit Klartext.

Aktivieren Sie es, wenn Sie Code-Erklärungen geben, bei denen eine visuelle Darstellung der Logik oder des Speicherlayouts die Klarheit verbessern würde.

Kernprinzipien

Tool-Agnostizität

Stellen Sie sicher, dass das Diagramm streng monospace ist und in jedem grundlegenden Texteditor (IDE, Terminal, Git) lesbar ist.

Informationsnähe

Das Diagramm sollte als „visuelle Karte“ fungieren, die direkt über oder neben der Logik platziert wird, die es beschreibt.

Strukturierte Notation

Verwenden Sie konsistente Zeichensätze (+, -, |, v, >), um Grenzen und Fluss zu definieren.

Der Design-Space-Workflow

Basierend auf der Forschung von Hayatpur et al. definieren Sie die folgenden Dimensionen intern, bevor Sie rendern:

1. Inhaltsidentifikation

Bestimmen Sie, was dargestellt wird:

• Systemarchitektur: Hochrangige Komponenten und Netzwerkverbindungen.
• Datenstrukturen: Speicherlayouts, verlinkte Listen oder Baumknoten.
• Dynamisches Verhalten: Schrittweise Logik oder Zustandsübergänge.

2. Layout & Konnektivität

• Box-and-Line: Verwenden Sie +---+ für Entitäten und | oder - für Verbindungen.
• Flussrichtung: Standardisieren Sie auf oben-nach-unten oder links-nach-rechts.
• Ausrichtung: Stellen Sie sicher, dass alle vertikalen Striche (|) perfekt ausgerichtet sind, um die „Box“-Form beizubehalten.

Implementierungsrichtlinien

Der „Box“-Standard

Verwenden Sie immer eine 3-stufige Grenze für Entitäten, um visuelle Unterscheidbarkeit zu gewährleisten:

+-----------------------+
|      ENTITÄTSNAME     |
+-----------------------+

Der „Verbinder“-Standard

Verwenden Sie explizite Pfeilspitzen, um die Richtung anzuzeigen. Verwenden Sie keine mehrdeutigen Linien.

• Vertikal: | gefolgt von v
• Horizontal: --- gefolgt von >

Anmerkungen

Platzieren Sie kurze, beschreibende Texte neben Verbindern, um den Übergang oder die Logik zu erklären (z. B. "if x > 0" oder "API-Aufruf").

Beispiel-Workflow: Systemanfrage

Eingabe: „Zeig mir, wie ein Load Balancer den Datenverkehr auf drei Server verteilt.“

Ausgabe:

          [ CLIENT ANFRAGE ]
                  |
                  v
       +-----------------------+
       |     LOAD BALANCER     |
       +----------+------------+
                  |
        +---------+---------+
        |         |         |
        v         v         v
    +-------+ +-------+ +-------+
    | SRV 1 | | SRV 2 | | SRV 3 |
    +-------+ +-------+ +-------+

Einschränkungen

1. Verwenden Sie keine nicht standardisierten Unicode-Zeichen (wie ┌ oder ┐), es sei denn, dies wird ausdrücklich angefordert, da sie in manchen Terminalumgebungen oder Legacy-Editoren zu Fehlfunktionen führen können.
2. Behalten Sie Monospace bei: Jede Zeile muss auf Zeichenbreitenkonsistenz überprüft werden.
3. Vermeiden Sie Komplexität: Wenn ein Diagramm mehr als 80 Zeichen Breite benötigt, brechen Sie es in „Untermodule“ auf, um sicherzustellen, dass es in Standard-IDE-Fenster passt.