skills.rest
Chia1104
Chia1104COMMUNITY
Explore all skills by this author →
Website𝕏@chia7423GitHub

excalidraw

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

1|Updated Aug 11, 2026
Search Tags:#architecture#json#excalidraw#flowchart#visualization#sequence diagram#diagram
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill excalidraw-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/Chia1104/agent-air/tree/main/skills/hermes/creative/excalidraw
Command: npx skills add https://github.com/Chia1104/agent-air --skill excalidraw-chia1104

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 at excalidraw.com, with no accounts, API keys, or rendering libraries. ## 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 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-style sequence diagrams. - Use Case: Ask the agent to diagram your microservices architecture; it writes the .excalidraw file with labeled, color-coded nodes and bound arrows, then optionally uploads it for a link you can 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, ellipses, arrows, text) wrapped in the standard .excalidraw envelope with type, version, source, elements, and appState fields. Save it as a .excalidraw file and open it at 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 Excalidraw and is silently ignored, producing blank shapes.

Can I upload an Excalidraw file to get a shareable link?▼

Yes, run the included upload.py script with your .excalidraw file path. It encrypts the diagram client-side with AES-GCM and uploads to excalidraw.com without an account, printing a shareable URL. Requires the cryptography pip package.

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

The default text strokeColor #1e1e1e is invisible on dark backgrounds. For dark mode diagrams, add a large dark background rectangle first and set text strokeColor to #e5e5e5 explicitly on all text elements.

What are the limitations of generating Excalidraw JSON directly?▼

Emoji do not render in Excalidraw's hand-drawn font, and text positioning is approximate since Excalidraw recalculates bound text on load. Minimum font size is 14, and light gray text on white backgrounds fails contrast rules.

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
TzeusyTzeusy

update-architectural-diagrams

Regenerate Excalidraw architecture diagrams by surveying the codebase and diffing against existing diagrams.

Community
Advanced
walterfanwalterfan
1

Diagram Render Skill

Render PlantUML, Mermaid, and Graphviz code blocks into PNG or SVG images.

Community
Intermediate