Excalidraw skill: generate diagrams from text with your coding agent

Source: github/awesome-copilot · Maintainer: community: GitHub awesome-copilot contributors · License: MIT · Checked: 24 October 2026

What is the Excalidraw skill?

excalidraw-diagram-generator is an Agent Skill that lets Claude Code, GitHub Copilot, Codex and other agents draw diagrams as .excalidraw files from a plain-language request. You ask for a flowchart or an architecture diagram, and the agent writes a file you can open and edit in Excalidraw.

Its description begins: "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"."

It lives in github/awesome-copilot, GitHub's community collection of agents, instructions and skills, and was added in January 2026. On its skills.sh page it had about 31,600 installs (snapshot, 24 October 2026), second in that repo only to git-commit.

What does it do?

The SKILL.md sets out a six-step workflow:

1. Understand the request: diagram type, key elements, relationships and complexity.
2. Choose a diagram type from a table that maps intent to type.
3. Extract structured information, with a checklist per type (for example, actors and lanes for a swimlane, or cardinality and keys for an ER diagram).
4. Generate the Excalidraw JSON using rectangles, ellipses, diamonds, arrows and text.
5. Wrap it in the file structure ("type": "excalidraw", "version": 2, elements, appState and files).
6. Save it as <descriptive-name>.excalidraw and explain how to open it.

It supports nine diagram types, each with a starter file in templates/:

It also sets house rules. Every text element must use fontFamily: 5, which Excalidraw's source code maps to Excalifont. Horizontal gaps are 200 to 300px and vertical gaps 100 to 150px. A fixed palette uses light blue #a5d8ff for primary elements, light green #b2f2bb for secondary ones, yellow #ffd43b for the center and light red #ffc9c9 for warnings. A flowchart should have 3 to 10 steps (15 at most), and the skill recommends no more than 20 elements per diagram; for bigger requests it tells the agent to suggest splitting into an overview plus detail diagrams.

Before delivering, the agent runs a checklist: unique IDs, no overlaps, font size 16 or more, valid JSON and a reasonable element count. The reply includes the file, a summary, the element count and opening instructions.

Two reference files back this up: references/excalidraw-schema.md (the JSON schema, bindings, IDs, seeds and validation rules) and references/element-types.md (properties and sizes per element).

How do icon libraries work?

For cloud architecture diagrams with real AWS, GCP or Azure icons, the skill has an optional workflow built on three Python scripts in scripts/.

1. Download an icon set as a .excalidrawlib file from libraries.excalidraw.com.
2. Put it in libraries/<icon-set-name>/ inside the skill folder and run split-excalidraw-library.py on that directory. It writes one JSON file per icon into icons/ plus a reference.md lookup table.
3. The agent reads reference.md, then runs add-icon-to-diagram.py <diagram> <icon-name> <x> <y> --label "Text" to place each icon and add-arrow.py to connect them, with --style solid|dashed|dotted and --color.

The SKILL.md explains why scripts beat having the model copy icons by hand: icon JSON files run "200-1000 lines each", and the scripts keep that data out of the agent's context and handle coordinates and IDs. If no library is set up, the agent tells you how to add one, or draws the diagram with plain shapes that you can swap for icons later.

How do you install it?

Skills CLI. The command shown on skills.sh uses the skills CLI:

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

Add -g to install across projects or -a claude-code to target Claude Code. The folder lands in .claude/skills/excalidraw-diagram-generator/, or ~/.claude/skills/excalidraw-diagram-generator/ with -g, the standard Claude Code skill locations.

GitHub CLI. The awesome-copilot skills index lists a gh command for every skill and says it needs GitHub CLI 2.90.0 or later. The gh skill install manual documents --agent and --scope:

gh skill install github/awesome-copilot excalidraw-diagram-generator --agent claude-code --scope user

The index writes it as gh skills install; the manual documents gh skill install, with gh skills add and gh skill add as aliases. Without --agent, non-interactive installs default to GitHub Copilot.

By hand. The index also suggests copying the folder into your local skills directory. GitHub Copilot reads project skills from .github/skills, .claude/skills or .agents/skills, per GitHub's docs on agent skills. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

How do you use it?

Describe what to show, name the diagram type if you know it, and give a file name. Smaller asks give cleaner layouts.

Example prompts (suggestions, not quotes from the repo):

• Create a flowchart for our signup flow: enter email, verify, set password, onboarding, done. Save it as docs/signup-flow.excalidraw.
• Draw an ER diagram of the tables in prisma/schema.prisma, with primary and foreign keys marked.
• Make a swimlane diagram of how a refund moves between customer, support, finance and the payment provider.
• Generate a sequence diagram of the OAuth login: browser, our API, the identity provider and the database.
• Mind map the topics for our Q1 platform roadmap, four to six branches.

Requirements: none for basic diagrams beyond your agent. For icons, Python 3 and an icon library you download yourself. To view results, a browser or the Excalidraw VS Code extension the skill mentions.

Tips and limits

From the files and pages linked, not from testing:

• Security audits. As of 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub (audited 15 September 2026), and Pass from Socket and Snyk (both audited 20 October 2026). Gen Agent Trust Hub tagged indirect prompt injection and command execution, since the scripts process JSON files and the agent runs Python.
• Icon paths assume the repo layout. Instructions and examples use paths like skills/excalidraw-diagram-generator/libraries/.... After installing into .claude/skills/, the library folder and scripts live there instead, so tell the agent where you put them.
• Python versions. The scripts README lists Python 3.6 or higher, with no extra packages. However, add-icon-to-diagram.py and add-arrow.py use Path | None type hints, a union syntax that arrived in Python 3.10, so run the icon workflow on Python 3.10 or later.
• No auto-layout. The skill lists "No automatic collision detection" among its limitations, along with simplified curves and no embedded images. Expect to nudge boxes in Excalidraw afterward.
• The description undersells it. It names four diagram types, while the body and templates cover nine. Ask for a swimlane or sequence diagram by name if it doesn't pick one.
• Edits go through a temporary file. The icon and arrow scripts write via a .excalidraw.edit copy by default to avoid clashing with an open editor; --no-use-edit-suffix turns that off.
• License. MIT, copyright GitHub, Inc. Keep the notice if you copy or modify it.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. For a repo with many skills, Kipt shows a list to pick from. You can also drop the folder or a .zip, which suits this skill if you want to bake in your brand colors or fix the icon paths for your setup. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with GitHub, awesome-copilot or Excalidraw.

Similar skills

• Canvas design skill: Anthropic's skill for posters and visual art as PNG or PDF, when you need a finished image instead of an editable diagram.
• Web artifacts builder skill: for interactive HTML visuals rather than static diagrams.
• Git commit skill: the most installed skill from the same awesome-copilot repo.
• Docker skill: another popular awesome-copilot skill, for multi-stage Dockerfiles.