skills.rest
yamcodes
yamcodesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

excalidraw

Generate Excalidraw JSON diagram files from natural language descriptions.

1|Updated Aug 24, 2026
Search Tags:#json#excalidraw#flowchart#visualization#mind map#diagram#architecture diagram
One-click install
npx skills add https://github.com/yamcodes/the-hat --skill excalidraw-yamcodes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/yamcodes/the-hat/tree/main/skills/excalidraw
Command: npx skills add https://github.com/yamcodes/the-hat --skill excalidraw-yamcodes

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 during planning or documentation work. ## Core Features & Use Cases - Multi-Type Diagram Generation: Produces flowcharts, relationship diagrams, mind maps, architecture diagrams, DFDs, swimlanes, class diagrams, sequence diagrams, and ER diagrams as .excalidraw JSON files. - Icon Library Integration: Splits downloaded .excalidrawlib files (e.g., AWS architecture icons) into individual icon JSONs and inserts them into diagrams via Python scripts without consuming AI context tokens. - Deterministic Diagram Editing: Scripts add icons and arrows to existing diagrams with automatic coordinate transformation, unique ID generation, and safe .edit-suffix file handling. - Use Case: Ask for an AWS architecture diagram with an Internet Gateway, VPC, ELB, EC2, and RDS, and receive a ready-to-open .excalidraw file with professional icons, labels, and connecting arrows. ## Quick Start Ask your AI assistant to create a flowchart of your user registration process and save it as an Excalidraw file.

Frequently Asked Questions about excalidraw

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 type, key elements, and their relationships in natural language. The skill extracts the structured information, generates the .excalidraw JSON with positioned elements, and saves it as a file you can open at excalidraw.com or in the VS Code extension.

What diagram types can Excalidraw generate automatically?▼

Supported types include 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 entities, steps, and connections.

How do I add AWS architecture icons to an Excalidraw diagram?▼

Download the .excalidrawlib file from libraries.excalidraw.com, place it in a libraries subdirectory, and run split-excalidraw-library.py. Then use add-icon-to-diagram.py with the icon name and coordinates to insert icons without loading large JSON into AI context.

Can I open a generated .excalidraw file without installing anything?▼

Yes, visit excalidraw.com in any browser and drag-and-drop the .excalidraw file onto the canvas, or use the Open menu. Alternatively, install the Excalidraw VS Code extension to view and edit files directly in your editor.

What are the limitations of auto-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. Embedded images are not supported, and hand-drawn roughness stays at the default value.

Why do elements overlap in my generated Excalidraw diagram?▼

Overlapping happens when coordinate spacing is too tight. Increase horizontal gaps to 200-300px between elements and vertical gaps to 100-150px between rows, or break diagrams with more than 15 elements into multiple smaller diagrams.

Related Skills

Explore More Design & Creative Skills→
jaimedhenriquesjaimedhenriques

excalidraw-diagram-generator

Generate Excalidraw diagrams from natural language descriptions.

Community
Advanced
joaoguirunasjoaoguirunas
3

dev-technical-writing

Write ADRs, module specs, and smart-memory docs in Markdown with Mermaid diagrams.

Community
Basic
jimmymalhanjimmymalhan
1

README Reality Check

Validate README.md claims against package.json, source code, and test outputs.

Community
Intermediate
compozycompozy
2.7k

mermaid-diagrams

Create software architecture, database, and process diagrams using Mermaid text syntax.

Official
Intermediate