excalidraw-diagram-generator

Generate Excalidraw JSON diagram files from natural language descriptions.

Updated Dec 18, 2025
One-click install
npx skills add https://github.com/l0lxl0lw/dotfiles --skill excalidraw-diagram-generator-l0lxl0lw
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw-diagram-generator
Source: https://github.com/l0lxl0lw/dotfiles/tree/main/ai/shared/skills/community/excalidraw-diagram-generator
Command: npx skills add https://github.com/l0lxl0lw/dotfiles --skill excalidraw-diagram-generator-l0lxl0lw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Creating diagrams manually in drawing tools is slow and tedious, especially when you need flowcharts, architecture diagrams, or mind maps quickly from a written description. This Skill converts natural language requests directly into valid .excalidraw JSON files that open immediately in Excalidraw. ## Core Features & Use Cases - Nine diagram types: Flowcharts, relationship diagrams, mind maps, architecture diagrams, data flow diagrams, swimlane business flows, class diagrams, sequence diagrams, and ER diagrams. - Icon library integration: Split .excalidrawlib files (e.g., AWS architecture icons) into individual icon JSONs and insert them into diagrams with Python scripts that handle coordinate transforms and ID collisions. - Deterministic editing scripts: Add icons and arrows to existing diagrams via CLI scripts without consuming AI context tokens on large icon JSON payloads. - Use Case: Ask for an AWS architecture diagram with an Internet Gateway, VPC, ELB, EC2, and RDS; the Skill creates the base file, places official icons with labels, and draws labeled connecting arrows. ## Quick Start Ask the AI to create a flowchart of your user registration process and save it as an .excalidraw file you can open at excalidraw.com.

Frequently Asked Questions about excalidraw-diagram-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an Excalidraw diagram from a text description?

Describe the diagram you want, including its type (flowchart, mind map, architecture) and key elements. The Skill extracts entities and relationships, then writes a complete .excalidraw JSON file you can open at excalidraw.com or in the VS Code extension.

How do I use AWS architecture icons in an Excalidraw diagram?

Download the .excalidrawlib file from libraries.excalidraw.com, place it in a libraries subdirectory, and run split-excalidraw-library.py to extract individual icon JSONs. Then use add-icon-to-diagram.py to place icons at specific coordinates with optional labels.

What diagram types does Excalidraw generation support?

Nine types are supported: flowcharts, relationship diagrams, mind maps, architecture diagrams, data flow diagrams, swimlane business flows, class diagrams, sequence diagrams, and ER diagrams. Each type has specific extraction rules for its elements and connections.

Why should I use the Python scripts instead of manual icon integration?

Each icon JSON file is 200-1000 lines, so loading them into AI context consumes significant tokens and risks coordinate or ID errors. The scripts handle bounding-box calculation, coordinate transformation, and unique ID generation deterministically.

What are the limitations of generated Excalidraw diagrams?

Diagrams are limited to roughly 20 elements for clarity, complex curves are simplified to straight or basic curved lines, and there is no automatic collision detection or embedded image support. Overlapping elements must be fixed by increasing coordinate spacing.