excalidraw-diagram-generatorvon GitHub

Excalidraw Diagram Generator Skill.

Ein Claude Code und Codex Skill für Diagramme und Charts: erzeugt Excalidraw-Diagramme und Mind Maps aus natürlicher Sprache.

Diagrams & Data Visualization
Diagram

OpenDesign herunterladen Anleitung ansehen

github/awesome-copilot · skills/excalidraw-diagram-generator/SKILL.mdSKILL.md

--- name: excalidraw-diagram-generator description: Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw. --- ## When to Use This Skill ## Prerequisites ## Step-by-Step Workflow ## Best Practices ## Example Prompts and Responses ## Advanced Techniques

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 24.276 Zeichen insgesamt

01 Was es tut

Was der excalidraw-diagram-generator Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Erzeugt Diagramme im Excalidraw-Format aus natürlichsprachigen Beschreibungen. Unterstützt neun Diagrammtypen: Flussdiagramme für sequenzielle Abläufe, Beziehungsdiagramme für Entitätsverbindungen, Mindmaps für Konzepthierarchien, Architekturdiagramme für Systemdesign, Datenflussdiagramme für Datenverarbeitungsprozesse, Business-Flow-Swimlane-Diagramme für funktionsübergreifende Workflows, Klassendiagramme für objektorientiertes Design, Sequenzdiagramme für Objektinteraktionen über die Zeit sowie ER-Diagramme für Datenbank-Entitätsbeziehungen.

Gibt .excalidraw-JSON-Dateien mit passenden Elementen (Rechtecke, Ellipsen, Rauten, Pfeile, Text) aus, die anhand berechneter Koordinaten positioniert und mit einheitlichen Farbschemata gestaltet sind. Dateien öffnen sich direkt in Excalidraw unter excalidraw.com oder über die VS-Code-Erweiterung.

Was er erzeugt

Vollständige .excalidraw-JSON-Datei mit aussagekräftigem Dateinamen
Zusammenfassung des Erstellten inklusive Diagrammtyp und Elementanzahl
Anleitung zum Öffnen und Bearbeiten des Diagramms in Excalidraw

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Die Anfrage verstehen
Analysiert die Beschreibung des Nutzers, um den Diagrammtyp (Flussdiagramm, Beziehung, Mind Map, Architektur), die Schlüsselelemente (Entitäten, Schritte, Konzepte), die Beziehungen (Ablauf, Verbindungen, Hierarchie) und die Komplexität (Anzahl der Elemente) zu bestimmen.
02
Den passenden Diagrammtyp wählen
Ordnet die Absicht des Nutzers dem Diagrammtyp zu, indem Schlüsselwörter erkannt werden.
03
Strukturierte Informationen extrahieren
Listet Elemente je nach Diagrammtyp auf. Für Flussdiagramme: aufeinanderfolgende Schritte, Entscheidungspunkte, Start- und Endpunkte.
04
Das Excalidraw-JSON generieren
Erstellt die .excalidraw-Datei mit passenden Elementtypen (Rechteck, Ellipse, Raute, Pfeil, Text) und legt die wichtigsten Eigenschaften fest, darunter Position (x-, y-Koordinaten), Größe (Breite, Höhe), Stil (strokeColor, backgroundColor, fillStyle), Schrift (fontFamily: 5 für Excalifont) und Verbindungen (points-Array für Pfeile).
05
Die Ausgabe formatieren
Strukturiert die vollständige Excalidraw-Datei mit type, version, source, elements-Array, appState (viewBackgroundColor, gridSize) und files-Objekt.
06
Speichern und Anweisungen geben
Speichert als descriptive-name.excalidraw und informiert den Nutzer, wie die Datei geöffnet werden kann: über excalidraw.com, durch Klicken auf „Open“ oder per Drag-and-Drop der Datei, oder mit der Excalidraw-VS-Code-Erweiterung.

02 Finden Sie Ihren Favoriten

Wann Sie den excalidraw-diagram-generator-Skill verwenden

Verwenden Sie das excalidraw-diagram-generator-Skill in Claude Code oder Codex, wenn es um Diagramme und Grafiken dieser Art geht. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Sequenzielle Prozesse, Workflows und Entscheidungsbäume mithilfe von Flussdiagrammen
Entitätsbeziehungen, Systemkomponenten und Abhängigkeiten mithilfe von Beziehungsdiagrammen
Konzepthierarchien, Brainstorming-Ergebnisse und Themenorganisation mithilfe von Mind Maps
Systemdesign, Modulinteraktionen und Datenfluss mithilfe von Architekturdiagrammen
Funktionsübergreifende Workflows und akteurbasierte Prozessabläufe mithilfe von Business-Flow-Schwimmbahnendiagrammen

Grenzen kennen

Komplexe Kurven, die zu geraden oder einfach gebogenen Linien vereinfacht werden
Eingebettete Bilder werden bei der automatischen Generierung nicht unterstützt
Diagramme mit mehr als 20 Elementen, da maximal 20 pro Diagramm empfohlen werden
Automatische Kollisionserkennung, da der Skill stattdessen Abstandsrichtlinien verwendet

Was Sie bereitstellen sollten

Klare Beschreibung dessen, was visualisiert werden sollBeschreibung des Prozesses, Systems, der Beziehungen oder Konzepte in natürlicher Sprache, die dargestellt werden sollen
Identifikation der wichtigsten Entitäten, Schritte oder KonzepteDie Hauptkomponenten, die zu Diagrammelementen werden
Verständnis der Beziehungen oder des Ablaufs zwischen den ElementenWie die Entitäten verbunden sind, die Reihenfolge der Schritte oder die hierarchische Struktur

03 Innerhalb des Skills

Regeln, die das excalidraw-diagram-generator Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Grenzwerte für die Elementanzahl
Flussdiagramm-Schritte: 3–10 empfohlen, 15 maximal. Beziehungsentitäten: 3–8 empfohlen, 12 maximal. Mind-Map-Zweige: 4–6 empfohlen, 8 maximal.
Erforderliche Schriftfamilie
Alle Textelemente müssen fontFamily: 5 (Excalifont) verwenden, um ein einheitliches visuelles Erscheinungsbild zu gewährleisten. Dies ist in der Validierungs-Checkliste vorgeschrieben.
Richtlinien zum Abstand
Horizontaler Abstand zwischen Elementen: 200–300px. Vertikaler Abstand zwischen Zeilen: 100–150px. Textgröße: 16–24px für Lesbarkeit.
Konsistenz des Farbschemas
Primäre Elemente verwenden Hellblau (#a5d8ff), sekundäre Elemente Hellgrün (#b2f2bb), wichtige/zentrale Elemente Gelb (#ffd43b) und Warnungen/Alarme Hellrot (#ffc9c9).
Komplexitätsmanagement
Wenn die Anfrage des Nutzers zu viele Elemente enthält, schlagen Sie vor, sie in mehrere Diagramme aufzuteilen, konzentrieren Sie sich zunächst auf die Hauptelemente und bieten Sie an, detaillierte Unter-Diagramme zu erstellen.
Richtung des Datenflusses
Bei Datenflussdiagrammen wird nicht die Prozessreihenfolge dargestellt, sondern nur der Datenfluss. Datenflüsse sollten von links nach rechts oder von oben links nach unten rechts dargestellt werden.
Maximale Elementanzahl
Die Elementanzahl muss angemessen sein, mit weniger als 20 Elementen zur besseren Übersichtlichkeit. Dies wird vor der Auslieferung in der Validierungs-Checkliste geprüft.
Eindeutige IDs und keine Überlappung
Alle Elemente müssen eindeutige IDs haben, und die Koordinaten müssen Überlappungen verhindern. Diese Prüfungen sind vor der Auslieferung des Diagramms erforderlich.

04 In Betrieb nehmen

excalidraw-diagram-generator in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

excalidraw-diagram-generator zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

Allgemeine skills-CLI-Form für skills/excalidraw-diagram-generator/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste Diagramm- und Chart-Aufgabe geben

Passen Sie diesen Prompt mit Ihren eigenen Inhalten und Vorgaben an und führen Sie ihn dann in Claude Code oder Codex aus.

Example prompt

Create a flowchart for user registration

Quelle: SKILL.md-Beispiel (wörtlich).

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Prüfen Sie, ob alle Elemente eindeutige IDs haben
Prüfen Sie, ob der Text mit Schriftgröße 16 oder größer lesbar ist
Prüfen Sie, ob alle Textelemente fontFamily: 5 (Excalifont) verwenden
Bestätigen Sie, dass Pfeile logisch verbunden sind und Farben einem einheitlichen Schema folgen

In OpenDesign importieren Sie excalidraw-diagram-generator über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Skill-Datei: skills/excalidraw-diagram-generator/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 1899b18
License: MIT Aus LICENSE.
Repository-Sterne: 38.981 GitHub-Snapshot vom 2026-09-14 für das gesamte github/awesome-copilot Repository, das 6 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für excalidraw-diagram-generator.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann dieses Skill verwendet wirdListet Auslöserphrasen und unterstützte Diagrammtypen auf, darunter Flussdiagramme, Beziehungsdiagramme, Mind-Maps, Architekturdiagramme, DFD, Swimlane-, Klassen-, Sequenz- und ER-Diagramme
VoraussetzungenErfordert eine klare Beschreibung, die Identifikation zentraler Entitäten oder Schritte sowie das Verständnis von Beziehungen oder Abläufen
Schritt-für-Schritt-WorkflowSechsstufiger Prozess vom Verständnis der Anfrage über die Wahl des Diagrammtyps, die Extraktion von Informationen, die Erzeugung von JSON, die Formatierung der Ausgabe bis hin zum Speichern mit Anweisungen
Best PracticesRichtlinien zur Elementanzahl, Layout-Tipps für Abstände und Positionierung, Farbschemata, Textgrößen und Strategien zum Umgang mit Komplexität
Beispiel-Prompts und AntwortenDrei Beispiele zeigen ein Flussdiagramm zur Benutzerregistrierung, Beziehungen zwischen Nutzer, Beitrag und Kommentar sowie eine Mindmap zum maschinellen Lernen mit Extraktionsschritten
FehlerbehebungLösungen für sich überlappende Elemente, Probleme mit der Textanpassung, zu viele Elemente, unklares Layout und uneinheitliche Farben
Fortgeschrittene TechnikenRasterlayout-Formel für Beziehungsdiagramme, radiales Layout für Mindmaps und automatisch generiertes ID-Muster mit Zeitstempel und Zufallszeichenfolge
AusgabeformatLiefert immer eine vollständige .excalidraw-JSON-Datei, eine Zusammenfassung mit Elementanzahl und Anweisungen zum Öffnen in excalidraw.com oder VS Code
Prüfliste zur ValidierungAcht Prüfungen vor der Auslieferung, darunter eindeutige IDs, keine überlappenden Koordinaten, lesbarer Text, die Schriftfamilie Excalifont, logische Pfeile, einheitliche Farben, gültiges JSON und eine sinnvolle Elementanzahl
Icon-Bibliotheken (optionale Erweiterung)Python-Skript-Workflow zum Hinzufügen von Cloud-Service-Icons aus Excalidraw-Bibliotheken, einschließlich Einrichtungsanleitung und Nutzung von add-icon-to-diagram.py und add-arrow.py
ReferenzenEnthaltene Schema-Dokumentation, Spezifikationen der Elementtypen, acht Diagrammvorlagen, drei Python-Skripte für Icon- und Pfeilintegration sowie das README der Skripte
EinschränkungenVereinfachte Kurven, keine eingebetteten Bilder, maximal 20 Elemente empfohlen, keine automatische Kollisionserkennung

Die eigene Beschreibung des Skills

Erstellt Excalidraw-Diagramme aus natürlichsprachlichen Beschreibungen. Verwenden Sie diese Funktion, wenn Sie aufgefordert werden, „ein Diagramm zu erstellen", „ein Flussdiagramm zu erstellen", „einen Prozess zu visualisieren", „eine Systemarchitektur zu zeichnen", „eine Mind Map zu erstellen" oder „eine Excalidraw-Datei zu generieren". Unterstützt Flussdiagramme, Beziehungsdiagramme, Mind Maps und Systemarchitekturdiagramme. Gibt .excalidraw-JSON-Dateien aus, die direkt in Excalidraw geöffnet werden können.

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 24.276 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum Skill excalidraw-diagram-generator

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Wie öffne ich die generierte Diagrammdatei?

Besuchen Sie excalidraw.com und klicken Sie auf Öffnen oder ziehen Sie die .excalidraw-Datei per Drag-and-Drop hinein. Alternativ können Sie die Excalidraw-VS-Code-Erweiterung nutzen, um die Datei direkt in Ihrem Editor zu öffnen.

Kann ich AWS- oder Cloud-Service-Icons in meinen Diagrammen verwenden?

Ja, der Skill unterstützt Icon-Bibliotheken von excalidraw.com/libraries. Sie laden eine .excalidrawlib-Datei herunter, führen das Skript split-excalidraw-library.py aus, um sie in einzelne Icons aufzuteilen, und verwenden anschließend die Python-Skripte add-icon-to-diagram.py und add-arrow.py, um Icons und Verbindungen zu Ihrem Diagramm hinzuzufügen.

Dieser Ansatz vermeidet Token-Verbrauch und liefert präzise Koordinatentransformationen mit automatischer UUID-Generierung.

Excalidraw Diagram Generator

Führen Sie excalidraw-diagram-generator für eine echte Diagramm- und Chart-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie excalidraw-diagram-generator über dessen SKILL.md-Link, fügen Sie die obige Eingabeaufforderung ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/github/awesome-copilot --skill excalidraw-diagram-generator

Was der excalidraw-diagram-generator Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann Sie den excalidraw-diagram-generator-Skill verwenden

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die das excalidraw-diagram-generator Skill Claude Code und Codex vorgibt

Grenzwerte für die Elementanzahl

Erforderliche Schriftfamilie

Richtlinien zum Abstand

Konsistenz des Farbschemas

Komplexitätsmanagement

Richtung des Datenflusses

Maximale Elementanzahl

Eindeutige IDs und keine Überlappung