手绘笔记风配图 (Skizzennotiz-Diagramm)

Handskizzen-Diagramm mit Code (Sketchnote-Stil)

Ein Bild = ein JSON. scripts/render.py öffnet mit dem lokalen Google Chrome (oder Microsoft Edge) im Headless-Modus scripts/sketchnote.html, zeichnet das Diagramm nach JSON und erstellt einen Screenshot. Der gesamte Text stammt aus dem JSON, sodass keine Tippfehler entstehen – der Stil ist jedoch etwas einheitlicher als bei generativen Modellen.

Benötigt: macOS-eigene Schriftarten "Hannotate SC" und "HanziPen SC", Google Chrome, Python 3 (nur Standardbibliothek).

Dateien

Pfad	Beschreibung	Wann lesen
scripts/render.py	Kommandozeile: Neu erstellen, Prüfen, Exportieren, Editor öffnen	Jedes Mal
scripts/sketchnote.html, editor.js	Zeichenprogramm und Browser-Editor	Nicht lesen, render.py ruft sie auf
scripts/Vorlagen/*.json	5 Vorlagen für neue Diagramme	--list-templates zur Ansicht
scripts/templates.js	Verpackt Vorlagen für den Editor, automatisch generiert	Nach Änderung an Vorlagen --templates ausführen
references/json-format.md	Jedes Feld, Abschnitt, Icon, Kritzelei, Farbname, bekannte Einschränkungen	Vor Änderungen am JSON
references/style.md	Stilregeln: Layout, Farben, Formbedeutungen, Zeichenanzahl, was nicht geht, Prüfschritte	Beim ersten Mal, beim Festlegen von Knotentypen und Zeichenanzahl
references/editor.md	Bedienung des Browser-Editors	Wenn der Benutzer manuell anpassen soll
assets/Beispiele/	Ein 3:4 Hochformat, ein 16:9 Querformat (JSON + PNG)	Bei Unsicherheit zum Layout-Vergleich

In den folgenden Befehlen steht R für scripts/render.py (mit absolutem Pfad aufrufen). Jedes JSON und das dazugehörige PNG werden im Benutzerprojekt abgelegt, nicht im Skill.

Befehle

python3 R --list-templates                          # Vorlagen anzeigen
python3 R --new 03_02_Feldreihenfolge --from 1              # Aus Vorlage 1 neues JSON erstellen: specs/03_02_Feldreihenfolge.json (specs im aktuellen Ordner)
python3 R --new Cover --dir specs --output ../Bilder/Cover.png   # Eigenen Pfad für JSON und Ausgabebild angeben
python3 R --check specs/03_02_Feldreihenfolge.json          # Nur Layout prüfen (Überlappungen, außerhalb der Leinwand) – wenige Sekunden; Exit-Code 1 bei Warnungen
python3 R specs/03_02_Feldreihenfolge.json --scale 1        # 1-fach Miniatur exportieren (1600×900) für Kontrolle
python3 R specs/03_*.json                           # 2-fach Export in voller Auflösung (3200×1800), speichert laut jeweiligem output
python3 R specs/xxx.json --svg                      # Zusätzlich eine SVG-Datei speichern
python3 R --edit specs/xxx.json                     # Im Chrome-Editor öffnen, Benutzer kann per Drag & Drop anpassen
python3 R --templates                               # Nach Änderungen an scripts/Vorlagen/ neu verpacken

• Wenn der Name mit --new das Format <Kapitelnummer>_<Abbildungsnummer>_<Inhalt> hat, sucht das Skript automatisch im übergeordneten Ordner nach <Kapitelnummer>_*.md Notizen und setzt output auf <Abbildungsnummer>.png im gleichnamigen Unterordner. Falls nicht gefunden, muss output oder --output ergänzt werden.
• output ist relativ zum JSON-Pfad.

Ablauf zum Erstellen eines Diagramms

1. Lege fest, welches Thema das Diagramm behandelt und wo im Text es platziert wird. Verwende nur Text, der bereits im Fließtext vorkommt, keine neuen Formulierungen. Bei textreichen Diagrammen zuerst mit dem Benutzer den Wortlaut abstimmen, dann JSON erstellen.
2. Vorlage auswählen: --list-templates, die am besten passende Struktur wählen (Prozess mit Rückkopplung, Zweiervergleich oben/unten, Viererschleife, leeres Querformat, Hochformat 3:4). --new zum Erstellen.
3. JSON bearbeiten: Gemäß references/json-format.md Texte und Koordinaten ersetzen (Koordinaten auf 1600×900 schätzen, Knoten x, y sind Mittelpunkte). Gemäß references/style.md Abschnitt 5 den Typ jedes Knotens festlegen:
   • input blauer Kreis: Daten, Ideen, Inspiration, Quellen
   • produce orangefarbenes Rechteck: Ergebnisse, Aktionen
   • feedback grünes Sechseck: Überprüfung, Retrospektive, Zusammenfassung In einem Diagramm haben gleichartige Konzepte dieselbe Form; eine Legende erklären.
4. --check solange ausführen, bis keine Warnungen mehr erscheinen, dann 1-fach Miniatur exportieren, tatsächlich öffnen und prüfen: Pfeilrichtungen, Textüberlappungen, gleichmäßiger Weißraum, ob die Zeichenanzahl den style.md-Regeln entspricht. Bei schwierigem Layout mit --edit im Browser-Editor verschieben lassen, Benutzer speichert mit ⌘S, dann erneut exportieren.
5. 2-fach Vollauflösung exportieren und unter output speichern.
6. Benutzer mitteilen, wo das Bild abgelegt ist: Angeben, nach welchem Satz es im Text eingefügt wird und wie die Einbettung erfolgt.

Hinweise

• Kein automatischer Zeilenumbruch für Chinesisch: Im JSON \n verwenden, im Editor Texte durch Doppelklick bearbeiten und mit "/" trennen.
• Beim Wechsel zwischen 16:9 und 3:4 werden Elementpositionen nicht automatisch umgerechnet – nach --check-Warnungen neu anordnen.
• Signatur standardmäßig nicht zeichnen. Wenn der Benutzer eine wünscht, im JSON "signature": { "text": "Signatur", "x": 40, "y": 862 } hinzufügen; einmal nach dem gewünschten Text fragen, bei späteren Diagrammen denselben verwenden.
• Nach Änderungen an Farben in references/style.md müssen auch die Farbkonstanten in scripts/sketchnote.html angepasst werden.