Skip to content
Get packs

Excalidraw Diagram Generator

Turns plain-language descriptions into editable Excalidraw diagram files.

Source Download skill
Repository
github/awesome-copilot
Stars
40,703
Licence
MIT
Files
7 files

What it does

When installed, the agent can turn a text description of a process, system, or idea into an Excalidraw file (.excalidraw), a drawing format you can open and edit in the free Excalidraw web app. It covers flowcharts, mind maps, architecture, class, sequence, ER and other diagram types, choosing a layout from your wording. Optional helper scripts can add arrows and cloud-provider icons to an existing diagram.

Great for

  • Developers who want quick architecture or flow sketches from a written description
  • Students or teams turning notes into a visual outline they can edit by hand
  • Anyone who wants a starting diagram to refine in Excalidraw rather than drawing from scratch

Skip it if

  • Final, pixel-precise design work, since layouts are generated from text and usually need manual tidying
  • Situations needing exact sizing or brand-compliant graphics, as the skill does not check against a style guide
  • Users who cannot review the output, since generated coordinates may overlap or misplace labels

Try asking

  • “Create a flowchart for our customer refund process with approval steps”
  • “Draw the system architecture of a web app with a frontend, API, database and queue”
  • “Make a mind map of the topics in my project kickoff notes”
  • “Generate an ER diagram for a blog with users, posts and comments”
Step-by-step guide: how to use Excalidraw Diagram GeneratorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 7 original files, the MIT licence and an attribution note.

    excalidraw-diagram-generator.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip excalidraw-diagram-generator.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip excalidraw-diagram-generator.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the diagram type explicitly (for example flowchart or sequence diagram) so the agent picks the right layout.
  • Give the key steps or entities as a list, and state which items connect to which, to get more accurate arrows.
  • Open the generated file in excalidraw.com and review it before sharing, since positions may need adjustment.

What's inside

  • references/element-types.md
  • references/excalidraw-schema.md
  • scripts/add-arrow.py
  • scripts/add-icon-to-diagram.py
  • scripts/README.md
  • scripts/split-excalidraw-library.py
  • SKILL.md

Redistributed unmodified from github/awesome-copilot under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.