skills.rest
CHENHUI-X
CHENHUI-XCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

excalidraw

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

Updated Jul 3, 2026
Search Tags:#architecture#json#excalidraw#flowchart#visualization#sequence diagram#diagram
One-click install
npx skills add https://github.com/CHENHUI-X/toolbox --skill excalidraw-chenhui-x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/CHENHUI-X/toolbox/tree/main/custom-skills/creative/excalidraw
Command: npx skills add https://github.com/CHENHUI-X/toolbox --skill excalidraw-chenhui-x

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 complete Excalidraw diagrams as plain JSON files that open directly at excalidraw.com, with no accounts, API keys, or rendering libraries required. ## 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. - Container Binding for Labels: Correctly attach text to shapes and arrows using containerId and boundElements, avoiding the common invalid label property mistake. - Shareable Uploads: Upload diagrams to excalidraw.com with client-side AES-GCM encryption via scripts/upload.py to get a shareable URL. - Use Case: Ask for a system architecture diagram with frontend, backend, and database layers; receive a ready-to-open .excalidraw file plus an optional shareable link. ## Quick Start Create an Excalidraw diagram showing a simple three-tier web 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) 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: add boundElements referencing the text element on the shape, and set containerId on the text element pointing back to the shape. The label property does not exist in Excalidraw and is silently ignored, producing blank shapes.

Can I share an Excalidraw diagram without an account?▼

Yes. Run the upload.py script with your .excalidraw file to upload it to excalidraw.com without authentication. The diagram is encrypted client-side with AES-GCM, and the script prints a shareable URL containing the decryption key.

Why is my Excalidraw text invisible or blank?▼

Blank text usually results from using the invalid label property instead of container binding, or from missing fontFamily, originalText, or autoResize fields. On dark backgrounds, the default #1e1e1e text color is invisible, so set strokeColor to #e5e5e5.

What dependencies are needed to upload Excalidraw files?▼

The upload script requires only the cryptography Python package, installed via pip install cryptography. It uses AES-GCM encryption and zlib compression before posting to the public Excalidraw JSON endpoint.

Related Skills

Explore More Design & Creative Skills→
AradotsoAradotso
7

blueprint-mcp-diagram-generation

Generate architecture diagrams and flowcharts as PNG files via Blueprint MCP.

Official
Intermediate
AissenLiuAissenLiu

excalidraw

Create Excalidraw diagrams from element JSON and export them as .excalidraw files.

Community
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