excalidraw-diagram-generatorby GitHub

Excalidraw Diagram Generator Skill.

A Claude Code and Codex skill for diagrams and charts: generates Excalidraw diagrams and mind maps from natural language.

Diagrams & Data Visualization
Diagram

Download OpenDesign View usage guide

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

Front matter and section headings read from the upstream file on 2026-09-14 · 24,276 characters in full

01 What it does

What the excalidraw-diagram-generator Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Generates Excalidraw-format diagrams from natural language descriptions. Supports nine diagram types: flowcharts for sequential processes, relationship diagrams for entity connections, mind maps for concept hierarchies, architecture diagrams for system design, data flow diagrams for data transformation processes, business flow swimlane diagrams for cross-functional workflows, class diagrams for object-oriented design, sequence diagrams for object interactions over time, and ER diagrams for database entity relationships.

Outputs .excalidraw JSON files with appropriate elements (rectangles, ellipses, diamonds, arrows, text) positioned using calculated coordinates and styled with consistent color schemes. Files open directly in Excalidraw at excalidraw.com or via the VS Code extension.

What it produces

Complete .excalidraw JSON file with descriptive filename
Summary of what was created including diagram type and element count
Instructions for opening and editing the diagram in Excalidraw

See the example prompt ↗

How It Works

01
Understand the Request
Analyzes the user's description to determine diagram type (flowchart, relationship, mind map, architecture), key elements (entities, steps, concepts), relationships (flow, connections, hierarchy), and complexity (number of elements).
02
Choose the Appropriate Diagram Type
Matches user intent to diagram type by recognizing keywords.
03
Extract Structured Information
Lists elements based on diagram type. For flowcharts: sequential steps, decision points, start and end points.
04
Generate the Excalidraw JSON
Creates the .excalidraw file with appropriate element types (rectangle, ellipse, diamond, arrow, text) and sets key properties including position (x, y coordinates), size (width, height), style (strokeColor, backgroundColor, fillStyle), font (fontFamily: 5 for Excalifont), and connections (points array for arrows).
05
Format the Output
Structures the complete Excalidraw file with type, version, source, elements array, appState (viewBackgroundColor, gridSize), and files object.
06
Save and Provide Instructions
Saves as descriptive-name.excalidraw and informs user how to open by visiting excalidraw.com, clicking Open or drag-and-drop the file, or using Excalidraw VS Code extension.

02 Find your fit

When to Use the excalidraw-diagram-generator Skill

Use the excalidraw-diagram-generator skill in Claude Code or Codex when the job is diagrams and charts of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Sequential processes, workflows, and decision trees using flowcharts
Entity relationships, system components, and dependencies using relationship diagrams
Concept hierarchies, brainstorming results, and topic organization using mind maps
System design, module interactions, and data flow using architecture diagrams
Cross-functional workflows and actor-based process flows using business flow swimlane diagrams

Know the Boundaries

Complex curves, which are simplified to straight or basic curved lines
Embedded images in auto-generation are not supported
Diagrams with more than 20 elements, as the maximum recommended is 20 per diagram
Automatic collision detection, as the skill uses spacing guidelines instead

What to Provide

Clear description of what should be visualizedNatural language description of the process, system, relationships, or concepts to be diagrammed
Identification of key entities, steps, or conceptsThe main components that will become diagram elements
Understanding of relationships or flow between elementsHow the entities connect, the sequence of steps, or the hierarchical structure

03 Inside the skill

Rules the excalidraw-diagram-generator Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Element Count Limits
Flowchart steps: 3-10 recommended, 15 maximum. Relationship entities: 3-8 recommended, 12 maximum. Mind map branches: 4-6 recommended, 8 maximum.
Required Font Family
All text elements must use fontFamily: 5 (Excalifont) for consistent visual appearance. This is required in the validation checklist.
Spacing Guidelines
Horizontal gap between elements: 200-300px. Vertical gap between rows: 100-150px. Text sizing: 16-24px for readability.
Color Scheme Consistency
Primary elements use light blue (#a5d8ff), secondary elements use light green (#b2f2bb), important/central elements use yellow (#ffd43b), and alerts/warnings use light red (#ffc9c9).
Complexity Management
If user request has too many elements, suggest breaking into multiple diagrams, focus on main elements first, and offer to create detailed sub-diagrams.
Data Flow Direction
For data flow diagrams, do not represent process order, only data flow. Data flows should be shown from left-to-right or from top-left to bottom-right.
Element Count Maximum
Element count must be reasonable, with fewer than 20 elements for clarity. This is checked in the validation checklist before delivery.
Unique IDs and No Overlap
All elements must have unique IDs and coordinates must prevent overlapping. These are required validation checks before delivering the diagram.

04 Put it to work

Install excalidraw-diagram-generator in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add excalidraw-diagram-generator to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for skills/excalidraw-diagram-generator/SKILL.md; the repository may document its own path.

Give the Skill a First Diagrams and Charts Task

Adapt this prompt with your own content and constraints, then run it in Claude Code or Codex.

Example prompt

Create a flowchart for user registration

Source: SKILL.md example (verbatim).

Check the First Result

What the SKILL.md itself says a correct result looks like:

Verify all elements have unique IDs
Check text is readable with font size 16 or larger
Verify all text elements use fontFamily: 5 (Excalifont)
Confirm arrows connect logically and colors follow consistent scheme

In OpenDesign import excalidraw-diagram-generator from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Skill file: skills/excalidraw-diagram-generator/SKILL.md Content checksum recorded at verification; commit 1899b18
License: MIT From LICENSE.
Repository stars: 38,981 GitHub snapshot taken 2026-09-14 for the whole github/awesome-copilot repository, which contains 6 skills in this catalog. Not a rating or usage count for excalidraw-diagram-generator.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

When to Use This SkillLists trigger phrases and supported diagram types including flowcharts, relationships, mind maps, architecture, DFD, swimlane, class, sequence, and ER diagrams
PrerequisitesRequires clear description, identification of key entities or steps, and understanding of relationships or flow
Step-by-Step WorkflowSix-step process from understanding the request through choosing diagram type, extracting information, generating JSON, formatting output, and saving with instructions
Best PracticesElement count guidelines, layout tips for spacing and positioning, color schemes, text sizing, and complexity management strategies
Example Prompts and ResponsesThree examples showing user registration flowchart, user-post-comment relationships, and machine learning mind map with extraction steps
TroubleshootingSolutions for overlapping elements, text fit issues, too many elements, unclear layout, and inconsistent colors
Advanced TechniquesGrid layout formula for relationship diagrams, radial layout for mind maps, and auto-generated ID pattern using timestamp and random string
Output FormatAlways provide complete .excalidraw JSON file, summary with element count, and instructions for opening in excalidraw.com or VS Code
Validation ChecklistEight checks before delivery including unique IDs, no overlapping coordinates, readable text, Excalifont font family, logical arrows, consistent colors, valid JSON, and reasonable element count
Icon Libraries (Optional Enhancement)Python script workflow for adding cloud service icons from Excalidraw libraries, including setup instructions and add-icon-to-diagram.py and add-arrow.py usage
ReferencesBundled schema documentation, element type specifications, eight diagram templates, three Python scripts for icon and arrow integration, and script README
LimitationsSimplified curves, no embedded images, maximum 20 elements recommended, no automatic collision detection

The Skill's Own 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.”

Front-matter description from SKILL.md. The full file is about 24,276 characters. Read the full file on GitHub.

06 Before you install

Questions About the excalidraw-diagram-generator Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

How do I open the generated diagram file?

Visit excalidraw.com and click Open or drag-and-drop the .excalidraw file. Alternatively, you can use the Excalidraw VS Code extension to open it directly in your editor.

Can I use AWS or cloud service icons in my diagrams?

Yes, the skill supports icon libraries from excalidraw.com/libraries. You download a .excalidrawlib file, run the split-excalidraw-library.py script to split it into individual icons, then use add-icon-to-diagram.py and add-arrow.py Python scripts to add icons and connections to your diagram.

This approach avoids token consumption and provides accurate coordinate transformations with automatic UUID generation.

Excalidraw Diagram Generator

Run excalidraw-diagram-generator on a Real Diagrams and Charts Task.

Download OpenDesign, import excalidraw-diagram-generator from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

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

What the excalidraw-diagram-generator Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the excalidraw-diagram-generator Skill

Good Fit

Know the Boundaries

What to Provide

Rules the excalidraw-diagram-generator Skill Gives Claude Code and Codex

Element Count Limits

Required Font Family

Spacing Guidelines

Color Scheme Consistency

Complexity Management

Data Flow Direction

Element Count Maximum

Unique IDs and No Overlap