Diagramme sind ein effektives Werkzeug, um komplexe Informationen übersichtlich darzustellen. Mit Mermaid.js in Kombination mit ChatGPT wird es einfacher, aussagekräftige Diagramme zu erstellen und deine Kommunikation auf ein neues Level zu bringen.
Durchschnittliche Lesezeit: ca. 4 Minuten
Mit Mermaid.js steht dir ein Open-Source-Visualisierungstool zur Verfügung, um Diagramme einfach zu erstellen. Die JavaScript-Syntax ist intuitiv und erfordert keine umfangreichen Programmierkenntnisse. Du kannst eine Vielzahl von Diagrammtypen nutzen, darunter Flussdiagramme, Organigramme und UML-Diagramme. Auch eine Integration von Mermaid.js-Diagrammen in deine Webseiten und Anwendungen ist verhältnismässig einfach.
Klingt gut, du möchtest dich aber nicht mit JavaScript auseinandersetzen? Hier kommt ChatGPT ins Spiel.
Einige Anwendungsbeispiele
Mermaid.js bietet vielfältige Anwendungsmöglichkeiten zur Visualisierung. Hier sind einige Beispiele, wie du das Tool nutzen kannst:
Organigramme
Gib einen Text wie diesen in ChatGPT ein:
Zeichne ein Organigramm von oben nach unten in Mermaid.js.
In der Geschäftsführung Eva Musterfrau und mit den Abteilungen Vertrieb, Produktion und Finanzen darunter.
Im Vertrieb arbeiten Hans und Lisa.
In Produktion Marion und Franz.
In Finanzen Sarah.
Flussdiagramme
Folgender Text an ChatGPT gerichtet …
Ein Prozessdiagram in Mermaid.js
Der Prozess mit dem Startpunkt Event
Dazu sollen Einladungen verschickt werden. Die erste Entscheidung ist "Einladen".
Wenn nein, ist der Prozess zu Ende.
Wenn ja, wird die Entscheidung VIP ja oder nein getroffen.
Bei ja folgt Einladung persönlich, bei nein per E-Mail.
Danach endet der Prozess.
Alle Prozesse werden abgeschlossen.
… ergibt dieses Diagramm:
Auch ein weiterer Schritt lässt sich per Eingabe einbauen:
Bei den VIPs eine zusätzliche Abfrage:
Zugesagt => ja = erfolgreich und Ende Prozess
Nein => Nachfragen warum, Grund notieren, wenn doch zugesagt, erfolgreich, wenn abgesagt nicht erfolgreich und Ende.
Alle Prozesse werden abgeschlossen.
Wie du siehst, können einfache Abläufe schnell und übersichtlich visuell dargestellt werden. Jedoch ist es wichtig, dass die dazugehörigen Beschreibungen präzise formuliert sind. Für Personen, die sich sprachlich besser ausdrücken können als visuell, bietet die verbale Beschreibung von Diagrammen klare Vorteile.
So nutzt du die Diagramme und verbesserst ihre Darstellung
Wenn du die erstellten Diagramme verwenden möchtest, kannst du diese direkt in eine Webseite einbinden, indem du sie über HTML einfügst. Dazu fügst du einfach das folgende Skript in den <head>-Bereich ein:
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
mermaid.initialize({ startOnLoad: true });
});
</script>
Anschliessend platzierst du den Code für das Diagramm zwischen den `<div>`-Tags im `<body>`-Bereich.
<div class="mermaid"> </div>
Wenn dir die vorherige Methode zu kompliziert erscheint, kann ChatGPT auch den Code für eine HTML-Datei generieren. Du musst den Code lediglich in einen Texteditor einfügen und die Datei mit der Erweiterung «.html» speichern. Anschliessend kannst du die Datei in einem Webbrowser öffnen.
Während das Einbetten des Skripts in eine HTML-Datei eine geeignete Methode für erfahrene Benutzende ist, um die erstellten Mermaid.js-Diagramme schnell zu überprüfen, möchtest du sie wahrscheinlich in Dokumente und Präsentationen einbinden. Hier bietet sich die Verwendung von Draw.io an, dessen zugrunde liegende Technologie ebenfalls als Open Source veröffentlicht wurde.
Die Draw.io-Plattform eignet sich sowohl für persönliche als auch für geschäftliche Anwendungen und bietet eine einfache und intuitive Möglichkeit, visuelle Inhalte zu erstellen. Du kannst die Web-App verwenden oder die Desktop-Version herunterladen.
Sobald du ein neues Diagramm in Draw.io angelegt hast, kannst du den Mermaid.js-Code ganz einfach einfügen, indem du zu «Anordnen», dann «Einfügen», und schliesslich «Erweitert» gehst und dort die Option «Mermaid…» auswählst.
Nach dem Einfügen des Mermaid.js-Codes stehen dir in Draw.io zahlreiche Möglichkeiten zur weiteren Bearbeitung deines Diagramms zur Verfügung. Du kannst Elemente verschieben, Grössen anpassen, Farben ändern und vieles mehr. Darüber hinaus bietet Draw.io umfangreiche Exportoptionen, mit denen du dein Diagramm in verschiedene gängige Bildformate exportieren kannst. Die vielfältigen Bearbeitungs- und Exportmöglichkeiten machen Draw.io zu einer empfehlenswerten Plattform für die Erstellung und Weiterbearbeitung deiner Diagramme.
Diagramme mit ChatGPT – eine probate Alternative?
Dank der Integration von Mermaid in ChatGPT können Personen, die sich besser verbal ausdrücken können, ihre Ideen und Informationen auf einfache Weise visuell ansprechend darstellen. Vorausgesetzt, sie haben ein gewisses Verständnis für Technik.
Dieses Beispiel bezieht sich jedoch nur auf die kostenlose Version von ChatGPT. Die kostenpflichtige Version bietet zusätzliche Möglichkeiten, wie die Integration von Plug-ins. Diese Plug-ins ermöglichen eine direkte Ausgabe in Grafikdateien und den Zugriff auf zusätzliche Daten für Statistiken.
Eine zusätzliche Gegenüberstellung mit meiner derzeit bevorzugten KI zur Bildgenerierung, Bing, vermochte bisher nicht zu überzeugen. Anstelle des erwarteten Prozessdiagramms wurde lediglich unverständlicher, wenn auch visuell ansprechender Unsinn erzeugt.
powered by Borlabs Cookie