Skip to content
Skillpedia
Interfaces (UI/UX)40k · #5136

excalidraw-diagram-generator

Has your agent create visual diagrams from descriptions. It can generate flowcharts, mind maps, and system architectures in a format that can be opened in drawing software.

What it does

This agent creates visual diagrams, like flowcharts or mind maps, from your descriptions. It turns your ideas into drawings that show processes, systems, or relationships.

When to use it

  • ✓When you want to draw a step-by-step process.
  • ✓To visualize how different parts of a system connect.
  • ✓When organizing ideas into a mind map.

Example of what to ask your AI

“Create a flowchart showing the steps to make coffee, starting with 'grind beans' and ending with 'serve'.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/github/awesome-copilot/blob/main/skills/excalidraw-diagram-generator/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/github/awesome-copilot/blob/main/skills/excalidraw-diagram-generator/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

You describe what you want to see, and the agent identifies the elements and how they connect. Then, it generates a special file that the Excalidraw program understands to draw the diagram.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add github/awesome-copilot --skill excalidraw-diagram-generator

Or download just the file:

curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/excalidraw-diagram-generator/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

Excalidraw Diagram Generator

A skill for generating Excalidraw-format diagrams from natural language descriptions. This skill helps create visual representations of processes, systems, relationships, and ideas without manual drawing.

When to Use This Skill

Use this skill when users request:

  • "Create a diagram showing..."
  • "Make a flowchart for..."
  • "Visualize the process of..."
  • "Draw the system architecture of..."
  • "Generate a mind map about..."
  • "Create an Excalidraw file for..."
  • "Show the relationship between..."
  • "Diagram the workflow of..."

Supported diagram types:

  • 📊 Flowcharts: Sequential processes, workflows, decision trees
  • 🔗 Relationship Diagrams: Entity relationships, system components, dependencies
  • 🧠 Mind Maps: Concept hierarchies, brainstorming results, topic organization
  • 🏗️ Architecture Diagrams: System design, module interactions, data flow
  • 📈 Data Flow Diagrams (DFD): Data flow visualization, data transformation processes
  • 🏊 Business Flow (Swimlane): Cross-functional workflows, actor-based process flows
  • 📦 Class Diagrams: Object-oriented design, class structures and relationships
  • 🔄 Sequence Diagrams: Object interactions over time, message flows
  • 🗃️ ER Diagrams: Database entity relationships, data models

Prerequisites

  • Clear description of what should be visualized
  • Identification of key entities, steps, or concepts
  • Understanding of relationships or flow between elements

Step-by-Step Workflow

Step 1: Understand the Request

Analyze the user's description to determine:

  1. Diagram type (flowchart, relationship, mind map, architecture)
  2. Key elements (entities, steps, concepts)
  3. Relationships (flow, connections, hierarchy)
  4. Complexity (number of elements)

Step 2: Choose the Appropriate Diagram Type

User Intent Diagram Type Example Keywords
Process flow, steps, procedures Flowchart "workflow", "process", "steps", "procedure"
Connections, dependencies, associations Relationship Diagram "relationship", "connections", "dependencies", "structure"
Concept hierarchy, brainstorming Mind Map "mind map", "concepts", "ideas", "breakdown"
System design, components Architecture Diagram "architecture", "system", "components", "modules"
Data flow, transformation processes Data Flow Diagram (DFD) "data flow", "data processing", "data transformation"
Cross-functional processes, actor responsibilities Business Flow (Swimlane) "business process", "swimlane", "actors", "responsibilities"
Object-oriented design, class structures Class Diagram "class", "inheritance", "OOP", "object model"
Interaction sequences, message flows Sequence Diagram "sequence", "interaction", "messages", "timeline"
Database design, entity relationships ER Diagram "database", "entity", "relationship", "data model"

Step 3: Extract Structured Information

For Flowcharts:

  • List of sequential steps
  • Decision points (if any)
  • Start and end points

For Relationship Diagrams:

  • Entities/nodes (name + optional description)
  • Relationships between entities (from → to, with label)

For Mind Maps:

  • Central topic
  • Main branches (3-6 recommended)
  • Sub-topics for each branch (optional)

For Data Flow Diagrams (DFD):

  • Data sources and destinations (external entities)
  • Processes (data transformations)
  • Data stores (databases, files)
  • Data flows (arrows showing data movement from left-to-right or from top-left to bottom-right)
  • Important: Do not represent process order, only data flow

For Business Flow (Swimlane):

  • Actors/roles (departments, systems, people) - displayed as header columns
  • Process lanes (vertical lanes under each actor)
  • Process boxes (activities within each lane)
  • Flow arrows (connecting process boxes, including cross-lane handoffs)

For Class Diagrams:

  • Classes with names
  • Attributes with visibility (+, -, #)
  • Methods with visibility and parameters
  • Relationships: inheritance (solid line + white triangle), implementation (dashed line + white triangle), association (solid line), dependency (dashed line), aggregation (solid line + white diamond), composition (solid line + filled diamond)
  • Multiplicity notations (1, 0..1, 1..*, *)

For Sequence Diagrams:

  • Objects/actors (arranged horizontally at top)

…

FAQ

What types of diagrams can it create?

It can create flowcharts, relationship diagrams, mind maps, architecture diagrams, data flow diagrams, business flow (swimlane) diagrams, class diagrams, sequence diagrams, and ER diagrams.

Do I need to know how to draw?

No, you just need to describe what you want to visualize. The agent handles the drawing.

What is an .excalidraw file?

It's a file that the Excalidraw program uses to display the diagram the agent created. You can open this file in Excalidraw to view and edit the drawing.

Details

Original description by the author

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.

repo: github/awesome-copilot

Popularity

GitHub stars
40k
Ranking position
#5136
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills