skills.rest
Chensihakniroth
ChensihaknirothCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

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

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

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 valid Excalidraw diagram files directly as JSON, which can be opened at excalidraw.com or shared via a link without any account or rendering library. ## Core Features & Use Cases - JSON Diagram Generation: Write standard Excalidraw element JSON (rectangles, ellipses, diamonds, arrows, bound text labels) 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-style sequence diagrams. - Use Case: Ask for a system architecture diagram of your microservices; the Skill writes a properly bound, color-coded .excalidraw file you can drag onto excalidraw.com and 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) and wrap it in the standard .excalidraw envelope with type, version, source, elements, and appState fields. Save the JSON 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 a boundElements array referencing the text element, and the text element needs a containerId pointing back to the shape. The label property does not exist in Excalidraw and is silently ignored.

Can I share an Excalidraw diagram without an account?▼

Yes. The included upload.py script encrypts the file client-side with AES-GCM and posts it to excalidraw.com, returning a shareable URL with the key in the fragment. It requires the cryptography pip package.

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

The default text strokeColor #1e1e1e is nearly invisible on dark fills. For dark mode diagrams, set text strokeColor to #e5e5e5 and use a large dark background rectangle as the first element.

What are the limitations of generating Excalidraw JSON directly?▼

Emoji do not render in Excalidraw's hand-drawn font, and text positioning for standalone elements is approximate since Excalidraw recalculates bound text on load. Very dense diagrams with small elements can become unreadable.

Related Skills

Explore More Design & Creative Skills→
camoacamoa
32

diagram-generator

Generate Mermaid diagrams for system architecture and data flow.

Community
Intermediate
CuriousLearnerCuriousLearner
27

architecture-documenter

Document system architecture and technical decisions with diagrams and ADRs.

Community
Advanced
nimadorostkarnimadorostkar
25

diagrams

Generate Mermaid diagrams as code for version-controlled documentation.

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

diagram-creator

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

Official
Intermediate