All skills
github avatar

/excalidraw-diagram-generator

@e2769d6 official
by githubgithub/awesome-copilot40k stars
5,040

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.

Use this Skill: https://skilld.dev/gh/github/awesome-copilot/excalidraw-diagram-generator

This session only. Nothing lands on disk.

scriptsREADME.md

≈1.6k tokens on demand. Your agent reads this file only when SKILL.md points to it.

Excalidraw Library Tools

This directory contains scripts for working with Excalidraw libraries.

split-excalidraw-library.py

Splits an Excalidraw library file (*.excalidrawlib) into individual icon JSON files for efficient token usage by AI assistants.

Prerequisites

  • Python 3.6 or higher
  • No additional dependencies required (uses only standard library)

Usage

python split-excalidraw-library.py <path-to-library-directory>

Step-by-Step Workflow

  1. Create library directory:

    mkdir -p skills/excalidraw-diagram-generator/libraries/aws-architecture-icons
  2. Download and place library file:

    • Visit: https://libraries.excalidraw.com/
    • Search for "AWS Architecture Icons" and download the .excalidrawlib file
    • Rename it to match the directory name: aws-architecture-icons.excalidrawlib
    • Place it in the directory created in step 1
  3. Run the script:

    python skills/excalidraw-diagram-generator/scripts/split-excalidraw-library.py skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/

Output Structure

The script creates the following structure in the library directory:

skills/excalidraw-diagram-generator/libraries/aws-architecture-icons/
  aws-architecture-icons.excalidrawlib  # Original file (kept)
  reference.md                          # Generated: Quick reference table
  icons/                                # Generated: Individual icon files
    API-Gateway.json
    CloudFront.json
    EC2.json
    S3.json
    ...

What the Script Does

  1. Reads the .excalidrawlib file
  2. Extracts each icon from the libraryItems array
  3. Sanitizes icon names to create valid filenames (spaces → hyphens, removes special characters)
  4. Saves each icon as a separate JSON file in the icons/ directory
  5. Generates a reference.md file with a table mapping icon names to filenames

Benefits

  • Token Efficiency: AI can first read the lightweight reference.md to find relevant icons, then load only the specific icon files needed
  • Organization: Icons are organized in a clear directory structure
  • Extensibility: Users can add multiple library sets side-by-side

Recommended Workflow

  1. Download desired Excalidraw libraries from https://libraries.excalidraw.com/
  2. Run this script on each library file
  3. Move the generated folders to ../libraries/
  4. The AI assistant will use reference.md files to locate and use icons efficiently

Library Sources (Examples — verify availability)

  • Examples found on https://libraries.excalidraw.com/ may include cloud/service icon sets.
  • Availability changes over time; verify the exact library names on the site before use.
  • This script works with any valid .excalidrawlib file you provide.

Troubleshooting

Error: File not found

  • Check that the file path is correct
  • Make sure the file has a .excalidrawlib extension

Error: Invalid library file format

  • Ensure the file is a valid Excalidraw library file
  • Check that it contains a libraryItems array

License Considerations

When using third-party icon libraries:

  • AWS Architecture Icons: Subject to AWS Content License
  • GCP Icons: Subject to Google's terms
  • Other libraries: Check each library's license

This script is for personal/organizational use. Redistribution of split icon files should comply with the original library's license terms.

add-icon-to-diagram.py

Adds a specific icon from a split Excalidraw library into an existing .excalidraw diagram. The script handles coordinate translation and ID collision avoidance, and can optionally add a label under the icon.

Prerequisites

  • Python 3.6 or higher
  • A diagram file (.excalidraw)
  • A split icon library directory (created by split-excalidraw-library.py)

Usage

python add-icon-to-diagram.py <diagram-path> <icon-name> <x> <y> [OPTIONS]

Options

  • --library-path PATH : Path to the icon library directory (default: aws-architecture-icons)
  • --label TEXT : Add a text label below the icon -- --use-edit-suffix : Edit via .excalidraw.edit to avoid editor overwrite issues (enabled by default; pass --no-use-edit-suffix to disable)

Examples

# Add EC2 icon at position (400, 300)
python add-icon-to-diagram.py diagram.excalidraw EC2 400 300

# Add VPC icon with label
python add-icon-to-diagram.py diagram.excalidraw VPC 200 150 --label "VPC"

# Safe edit mode is enabled by default (avoids editor overwrite issues)
# Use `--no-use-edit-suffix` to disable
python add-icon-to-diagram.py diagram.excalidraw EC2 500 300

# Add icon from another library
python add-icon-to-diagram.py diagram.excalidraw Compute-Engine 500 200 \
   --library-path libraries/gcp-icons --label "API Server"

What the Script Does

  1. Loads the icon JSON from the library’s icons/ directory
  2. Calculates the icon’s bounding box
  3. Offsets all coordinates to the target position
  4. Generates unique IDs for all elements and groups
  5. Appends the transformed elements to the diagram
  6. (Optional) Adds a label beneath the icon

add-arrow.py

Adds a straight arrow between two points in an existing .excalidraw diagram. Supports optional labels and line styles.

Prerequisites

  • Python 3.6 or higher
  • A diagram file (.excalidraw)

Usage

python add-arrow.py <diagram-path> <from-x> <from-y> <to-x> <to-y> [OPTIONS]

Options

  • --style {solid|dashed|dotted} : Line style (default: solid)
  • --color HEX : Arrow color (default: #1e1e1e)
  • --label TEXT : Add a text label on the arrow -- --use-edit-suffix : Edit via .excalidraw.edit to avoid editor overwrite issues (enabled by default; pass --no-use-edit-suffix to disable)

Examples

# Simple arrow
python add-arrow.py diagram.excalidraw 300 200 500 300

# Arrow with label
python add-arrow.py diagram.excalidraw 300 200 500 300 --label "HTTPS"

# Dashed arrow with custom color
python add-arrow.py diagram.excalidraw 400 350 600 400 --style dashed --color "#7950f2"

# Safe edit mode is enabled by default (avoids editor overwrite issues)
# Use `--no-use-edit-suffix` to disable
python add-arrow.py diagram.excalidraw 300 200 500 300

What the Script Does

  1. Creates an arrow element from the given coordinates
  2. (Optional) Adds a label near the arrow midpoint
  3. Appends elements to the diagram
  4. Saves the updated file

Source: SKILL.md on GitHub

1 warning16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This skill provides templates and Python scripts for generating and modifying Excalidraw diagrams from natural language descriptions. It handles complex tasks like importing icons from libraries and drawing connections between elements. The skill implementation follows safe coding practices, including filename sanitization and unique ID generation for imported data.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    16/16 files flagged

  • ZeroLeaks5mo

    1 finding · Score: 86/100

Signed by skilld at e2769d6. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 19 hours ago.

Activeupdated last month
  • Database
  • excalidraw
  • diagram
  • flowchart
  • visualization
  • architecture
  • mind-map
  • sequence-diagram
  • erd

README badge

README badge for github/awesome-copilot/excalidraw-diagram-generator

Generates Excalidraw diagrams from natural language descriptions, supporting flowcharts, mind maps, relationship diagrams, system architecture, and other visual formats. Outputs .excalidraw JSON files that can be opened directly in Excalidraw or viewed online without manual drawing.

Generated from the current SKILL.md.

What diagram types does this skill support?
It supports flowcharts, relationship diagrams, mind maps, system architecture diagrams, data flow diagrams, business flow (swimlane), class diagrams, sequence diagrams, and ER diagrams. Each type is suited to different visualization needs like processes, hierarchies, object interactions, or database schemas.
What output format does this skill produce?
The skill generates .excalidraw JSON files that can be opened directly in Excalidraw at https://excalidraw.com or via the Excalidraw VS Code extension by dragging and dropping the file.
Does this skill handle complex diagrams with many elements?
The skill recommends breaking diagrams with more than 15 elements into multiple focused diagrams for clarity. It will suggest creating a high-level diagram first, then detailed sub-diagrams for each component.
Can I use custom icons or AWS architecture icons?
The skill supports optional icon libraries from https://libraries.excalidraw.com/ (AWS, GCP, Azure, etc.), but you must download and set them up first. Without setup, the skill uses basic shapes like rectangles and diamonds.

Generated from the current SKILL.md. These answers refresh after source changes.