Images - Bildressourcen für Dokumentation¶

Dieser Ordner enthält alle Bilddateien für die MkDocs-Dokumentation.

Kategorien¶

Logos & Branding¶

• Lysis_Logo_symbol_weiss.png - Firmenlogo (Symbol, weißer Hintergrund)
• Verwendet für: MkDocs Favicon, Navigation, Footer

Screenshots¶

Screenshots der LysisAI-Plattform für Benutzerhandbuch und Tutorials: - UI-Komponenten - Workflow-Demonstrationen - Feature-Showcases

Architektur-Diagramme (VERALTET)¶

⚠️ Nicht mehr verwenden!

Früher: PNG/SVG-Architektur-Diagramme Jetzt: Nur Mermaid-Diagramme direkt in Markdown

Grund: - ✅ Versionskontrolle (Text statt Binär) - ✅ Einfache Bearbeitung (kein externes Tool) - ✅ Konsistentes Styling (Lysis Branding) - ✅ Interaktiv (Pan & Zoom möglich)

Standards für neue Bilder¶

Dateiformat¶

• Screenshots: PNG (verlustfrei, Text lesbar)
• Fotos: JPG (komprimiert, kleinere Dateigröße)
• Icons: SVG (bevorzugt, skalierbar) oder PNG

Dateinamen¶

• Konvention: kebab-case-beschreibung.png
• Beispiele:
• login-screen-desktop.png
• document-upload-workflow.png
• admin-dashboard-overview.png

Dateigröße¶

• Ziel: <500KB pro Bild
• Tools: TinyPNG, ImageOptim, Squoosh
• Balance: Qualität vs. Ladezeit

Accessibility¶

• Alt-Text: IMMER in Markdown angeben
• Beschreibend: Was zeigt das Bild?

# ✅ Richtig
![Admin-Dashboard mit Benutzerübersicht und Statistiken](assets/images/admin-dashboard.png)

# ❌ Falsch
![Bild](assets/images/img1.png)

Auflösung¶

• Desktop-Screenshots: Max 1920x1080px
• Mobile-Screenshots: Max 390x844px (iPhone 13 Pro)
• Retina: 2x-Versionen optional (dateiname@2x.png)

Verwendung in Dokumentation¶

Bild einbinden¶

![Beschreibungstext](assets/images/dateiname.png)

Bild mit Link¶

[![Beschreibung](assets/images/dateiname.png)](https://link-zum-bild)

Responsive Bilder¶

MkDocs Material skaliert automatisch, aber für sehr große Bilder:

<img src="assets/images/large-diagram.png" alt="Beschreibung" style="max-width: 100%; height: auto;">

Migration von PNG-Diagrammen zu Mermaid¶

Falls alte PNG-Architektur-Diagramme existieren:

1. Diagramm analysieren (Boxen, Pfeile, Text)
2. Mermaid-Syntax wählen:
3. flowchart LR - Links-nach-Rechts Flow
4. graph TD - Top-Down Graph
5. sequenceDiagram - Sequenzdiagramm
6. erDiagram - Entity-Relationship
7. In Markdown umwandeln (siehe entwicklung/architektur.md)
8. PNG-Datei löschen (nach Verifikation)

Beispiele¶

Gutes Screenshot-Naming¶

login-page-desktop.png
admin-user-management.png
document-upload-dialog.png
mobile-navigation-menu.png

Schlechtes Screenshot-Naming¶

screenshot1.png
img_20251219.png
untitled.png
final_FINAL_v3.png

Git-Integration¶

• ALLE Bilder MÜSSEN committet werden (kein .gitignore)
• Grund: Dokumentation muss offline funktionieren
• Binary-Dateien: Git LFS NICHT nötig (Bilder <500KB)

Tipp: Vor dem Commit Bilder optimieren - spart Repository-Größe!