skills.rest
jamsdoescode
jamsdoescodeCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

Generates hand-drawn Excalidraw JSON diagrams saved as .excalidraw files.

Updated Jul 7, 2026
Search Tags:#architecture#json#excalidraw#flowchart#visualization#generate#diagram
One-click install
npx skills add https://github.com/jamsdoescode/Erik-s-Portfolio --skill excalidraw-jamsdoescode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/jamsdoescode/Erik-s-Portfolio/tree/main/openclicky/AppResources/OpenClicky/OpenClickyBundledSkills/excalidraw
Command: npx skills add https://github.com/jamsdoescode/Erik-s-Portfolio --skill excalidraw-jamsdoescode

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating architecture diagrams, flowcharts, and sequence diagrams usually requires opening a drawing tool and manually placing shapes. This Skill lets you generate complete Excalidraw diagrams as plain JSON files that open directly on excalidraw.com, with no accounts, API keys, or rendering libraries. ## Core Features & Use Cases - JSON-Based Diagram Generation: Write standard Excalidraw element JSON (rectangles, ellipses, diamonds, arrows, bound text labels) and save it as a .excalidraw file. - Labeled Shapes and Arrows: Use container binding to attach centered text labels to shapes and arrows, with arrow bindings that connect elements via fixed points. - Shareable Links: Upload diagrams to excalidraw.com via the included scripts/upload.py to get a shareable URL without an account. - Use Case: Ask for a system architecture diagram showing a client, API gateway, and database; the Skill produces a .excalidraw file you drag onto excalidraw.com to view and edit. ## Quick Start Ask the AI to create an Excalidraw flowchart of your login process and save it as a .excalidraw file you can open at excalidraw.com.

Frequently Asked Questions about excalidraw

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

FAQPage Schema
How do I create an Excalidraw diagram from JSON?▼

Write an array of Excalidraw element objects (rectangles, ellipses, arrows, text) and wrap it in the standard envelope with type "excalidraw", version 2, and an appState object. Save it as a .excalidraw file and drag it onto excalidraw.com to view.

How do I add a text label to an Excalidraw shape?▼

Use container binding: add boundElements referencing the text element on the shape, and set containerId on the text element pointing back to the shape. The label property on shapes is not valid Excalidraw JSON and will be silently ignored.

Can I share an Excalidraw diagram without an account?▼

Yes, run the included scripts/upload.py with your .excalidraw file path to upload it to excalidraw.com and receive a shareable URL. The script requires the cryptography pip package and no account or API key.

Why is my Excalidraw shape showing blank with no label?▼

Blank shapes happen when you use a label property, which Excalidraw does not support. You must create a separate text element with containerId set to the shape's id and list the text in the shape's boundElements array.

What are the limitations of generating Excalidraw JSON directly?▼

Text positioning is approximate since Excalidraw recalculates bound text geometry on load, and emoji do not render in Excalidraw's font. Standalone text must be positioned manually using left-edge x coordinates rather than textAlign.

Related Skills

Explore More Design & Creative Skills→
marvelousempiremarvelousempire

ascii-flow-diagrams

Render ASCII flowcharts and box-and-arrow diagrams from user-defined systems.

Community
Intermediate
LuminaVaultLuminaVault

excalidraw

Convert JSON element descriptions into Excalidraw files and upload them to excalidraw.com.

Official
Intermediate
royhenengelroyhenengel

architecture-diagrams

Generate system architecture diagrams, C4 models, flowcharts, and sequence diagrams using Mermaid and PlantUML.

Community
Intermediate
claude-office-skillsclaude-office-skills
368

diagram-creator

Generate flowcharts, sequence diagrams, and architecture diagrams from Mermaid and PlantUML text.

Official
Intermediate