Diagramme & Visualisierungen 📊
Zusätzlich zu klassischem Text und Markdown-Formatierungen ist die Plattform in der Lage, strukturierte Diagramme, Flussdiagramme, Gantt-Charts und Mindmaps in Echtzeit zu generieren und visuell zu rendern.
Dies basiert auf der nativen Unterstützung der Auszeichnungssprache Mermaid.js.
Funktionsweise und Implementierung
Die Generierung von Diagrammen erfordert, dass das KI-Modell seine logischen Ausarbeitungen in gültigem Mermaid-Code formuliert. Die Plattform erkennt diesen Codeblock automatisch und wandelt ihn im Chatfenster in eine interaktive visuelle Grafik um.
Um komplexe Prompts für die korrekte Diagramm-Strukturierung zu vermeiden, steht eine vereinfachte Methode zur Verfügung:
💡 Der Diagramm-Experte im Katalog
Im Mitarbeiterkatalog steht ein vorkonfigurierter Diagramm-Experte zur Verfügung. Dieser Assistent ist exakt darauf trainiert, strukturlose Textanfragen in korrekte Mermaid-Syntax zu übersetzen. Es genügt, diesen Assistenten über den Katalog zu suchen und zu aktivieren.
Anwendungsbeispiele
Sobald dem Diagramm-Experten Informationen übergeben werden, generiert dieser das passende visuelle Format.
1. Prozessabläufe (Flowcharts)
Beispielhafte Eingabe an den Experten:
"Erstelle einen Prozessablauf für die Rechnungsfreigabe: Eingang -> Prüfung (Wenn > 500€ -> Geschäftsführung, sonst -> Buchhaltung) -> Auszahlung -> Archivierung."
Resultat im Chat: Das System generiert den entsprechenden Mermaid-Code und stellt diesen als interaktives Flussdiagramm mit logischen Verzweigungen (Rauten für Entscheidungen, Rechtecke für Aktionen) dar.
Beispiel eines gerenderten Prozessablaufs in der Plattform.
2. Projektplanung (Gantt-Charts)
Beispielhafte Eingabe an den Experten:
"Zeichne ein Gantt-Diagramm für ein Software-Projekt. Phase 1: Design (2 Wochen), Phase 2: Entwicklung (startet nach Design, 4 Wochen), Phase 3: Testing (startet nach Entwicklung, 1 Woche)."
Das System übersetzt diese Zeiträume in einen tabellarischen Balkenplan, der zeitliche Abhängigkeiten und Phasen visualisiert.
Bearbeitung und Anpassung
Gerenderte Diagramme sind dynamisch und können durch nachfolgende Chat-Anweisungen modifiziert werden. Es ist möglich, bestehende Grafiken iterativ anzupassen, indem spezifische Befehle eingegeben werden:
- "Füge einen zusätzlichen Zwischenschritt nach der Prüfung ein."
- "Färbe die Design-Phase im Gantt-Chart blau ein."
- "Ergänze eine weitere Verzweigung für abgelehnte Dokumente."
Export und Weiterverarbeitung
Für die Verwendung der Grafiken in externen Präsentationen, Dokumentationen oder Berichten bietet die Plattform integrierte Exportoptionen.
Durch einen Rechtsklick auf das gerenderte Diagramm im Chatfenster öffnet sich ein Kontextmenü mit folgenden Optionen:
| Aktion | Dateiformat | Verwendung |
|---|---|---|
| In die Zwischenablage kopieren | SVG / PNG | Zum direkten Einfügen in Dokumente (z. B. Word, PowerPoint). |
| Als Datei herunterladen | SVG / PNG | Zur dauerhaften Speicherung auf dem lokalen Endgerät. |
- PNG (Portable Network Graphics): Pixelgrafik, geeignet für Standard-Dokumente und die schnelle Freigabe.
- SVG (Scalable Vector Graphics): Vektorgrafik, die ohne Qualitätsverlust unendlich skaliert und im Nachhinein in Vektorbearbeitungsprogrammen angepasst werden kann.
Unterstützte Diagrammtypen:
- Flussdiagramm
- Sequenzdiagramm
- Klassendiagramm
- Zustandsdiagramm
- Entity-Relationship-Diagramm
- Benutzer-Reise-Diagramm
- Gantt-Diagramm
- Kreisdiagramm
- Quadrant-Diagramm
- Mindmap
- Zeitstrahl (Timeline)
- Sankey-Diagramm
- XY-Diagramm (Balken-/Liniendiagramm)
- Blockdiagramm
- C4-Architekturdiagramm
- Cloud-Architekturdiagramm
- Anforderungsdiagramm (Requirement)
- Event-Modeling-Diagramm
- Venn-Diagramm
- Ishikawa-Diagramm (Fischgräten-Diagramm)
- etc.