skills.rest
TylerSimons1127
TylerSimons1127COMMUNITY
Explore all skills by this author →
GitHub

excalidraw

Generate hand-drawn Excalidraw JSON diagrams for architecture, flowcharts, and sequence diagrams.

Updated Aug 21, 2026
Search Tags:#architecture#json#excalidraw#flowchart#visualization#sequence diagram#diagram
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill excalidraw-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/creative/excalidraw
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill excalidraw-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating diagrams usually requires opening a drawing tool and manually placing shapes. This Skill lets you produce hand-drawn style diagrams as plain Excalidraw JSON files that open directly on excalidraw.com, with no accounts, API keys, or rendering libraries required. ## Core Features & Use Cases - JSON Diagram Generation: Write standard Excalidraw element JSON (rectangles, ellipses, diamonds, arrows, bound text) and save it as a .excalidraw file. - Shareable Uploads: Upload diagrams to excalidraw.com with client-side AES-GCM encryption via the included scripts/upload.py to get a shareable URL. - Reference Guides: Built-in color palettes, dark-mode theming rules, and complete copy-pasteable examples for flowcharts, process diagrams, and UML sequence diagrams. - Use Case: Ask for a system architecture diagram of your web app, receive a .excalidraw file, drag it onto excalidraw.com to view and edit, then upload it for a link to share with your team. ## Quick Start Ask the agent to create an Excalidraw diagram of your system architecture and save it as a .excalidraw file.

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 programmatically?▼

Write an array of Excalidraw element objects (rectangles, arrows, text) with id, x, y, width, and height fields, wrap it in the standard .excalidraw envelope with type, version, and appState, then save it as a .excalidraw file to open on excalidraw.com.

How do I add text labels to Excalidraw shapes in JSON?▼

Use container binding: the shape needs boundElements listing the text element, and the text element needs containerId pointing back to the shape. The label property does not exist in the Excalidraw format and is silently ignored.

Can I share an Excalidraw file without an account?▼

Yes. Run the included upload.py script with your .excalidraw file path. It encrypts the diagram client-side with AES-GCM, uploads it to excalidraw.com without authentication, and prints a shareable URL containing the decryption key.

Why is my Excalidraw text invisible on a dark background?▼

The default text strokeColor #1e1e1e is invisible on dark backgrounds. Set strokeColor to #e5e5e5 on all text elements and use a large dark background rectangle as the first element in the array.

What dependencies does the Excalidraw upload script need?▼

The upload script requires only the cryptography pip package for AES-GCM encryption. Install it with pip install cryptography. Diagram generation itself needs no dependencies since it produces plain JSON.

Related Skills

Explore More Design & Creative Skills→
camoacamoa
32

diagram-generator

Generate Mermaid diagrams for system architecture and data flow.

Community
Intermediate
LuminaVaultLuminaVault

excalidraw

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

Official
Intermediate
raghavbadhwarraghavbadhwar

diagram

Convert English descriptions or mermaid source into editable Excalidraw diagrams with rendered SVG and PNG outputs.

Community
Intermediate
openaiopenai
5.3k

node-link-and-diagram-layout

Selects and applies automatic layout algorithms for node-link diagrams and connected-node visuals.

Official
Advanced