excalidraw-studio

Generate Excalidraw JSON diagram files from natural language descriptions.

Updated Sep 15, 2026
One-click install
npx skills add https://github.com/Peterson-Benhame/agent-skills --skill excalidraw-studio-peterson-benhame
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw-studio
Source: https://github.com/Peterson-Benhame/agent-skills/tree/main/packages/skills-catalog/skills/%28tooling%29/excalidraw-studio
Command: npx skills add https://github.com/Peterson-Benhame/agent-skills --skill excalidraw-studio-peterson-benhame

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating diagrams manually in drawing tools is slow and tedious, and hand-writing valid Excalidraw JSON is error-prone due to its strict element schema, binding model, and text container rules. This Skill turns plain-language descriptions into valid .excalidraw files that open directly in Excalidraw, VS Code, or Obsidian. ## Core Features & Use Cases - Nine diagram types: Flowcharts, relationship diagrams, mind maps, architecture diagrams, data flow diagrams (DFD), swimlanes, class diagrams, sequence diagrams, and ER diagrams, each with a pre-built JSON template. - Schema-correct output: Enforces Excalidraw's text container model (boundElements + containerId), arrow bindings (startBinding/endBinding), z-index ordering, and required base properties so files render correctly. - Icon library support: Python scripts split .excalidrawlib libraries (AWS, GCP, etc.) into individual icons and insert icons or arrows into existing diagrams with coordinate translation and ID collision handling. - Use Case: Ask for a system architecture diagram of your microservices; the Skill selects the architecture type, applies background zones for layers, binds labeled arrows between components, and saves a ready-to-open .excalidraw file. ## Quick Start Ask the agent to create an Excalidraw flowchart of your user onboarding process and save it as an .excalidraw file.

Frequently Asked Questions about excalidraw-studio

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

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

Describe the diagram in natural language, including the type (flowchart, ER, sequence, etc.) and key elements. The Skill extracts entities and relationships, generates schema-valid Excalidraw JSON, and saves it as a .excalidraw file you can open at excalidraw.com or in the VS Code extension.

What diagram types can Excalidraw generate?

This Skill supports nine types: flowcharts, relationship diagrams, mind maps, architecture diagrams, data flow diagrams (DFD), swimlanes, class diagrams, sequence diagrams, and ER diagrams. Each type has a pre-built JSON template in the assets directory.

Why is text not showing inside shapes in my Excalidraw file?

Excalidraw does not support a label shorthand on shapes. Text requires a separate text element with containerId pointing to the shape, and the shape must list the text in its boundElements array. The text element also needs originalText, lineHeight, and autoResize properties.

Can I add AWS or GCP icons to an Excalidraw architecture diagram?

Yes. Download an .excalidrawlib library, run split-excalidraw-library.py to extract individual icon JSON files, then use add-icon-to-diagram.py to place icons at specific coordinates with optional labels. The scripts handle coordinate translation and ID collisions.

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. Embedded images are not supported in auto-generation; use icon libraries for service icons instead.