skills.rest
perasyudha
perasyudhaCOMMUNITY
Explore all skills by this author →
Website𝕏@Nyxora_AIGitHub

excalidraw

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

5|2|Updated May 26, 2026
Search Tags:#architecture#json#excalidraw#flowchart#visualization#sequence diagram#diagram
One-click install
npx skills add https://github.com/perasyudha/Nyxora --skill excalidraw-perasyudha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/perasyudha/Nyxora/tree/main/packages/core/playbooks/creative/excalidraw
Command: npx skills add https://github.com/perasyudha/Nyxora --skill excalidraw-perasyudha

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 the included scripts/upload.py to get a shareable URL. - Use Case: Ask for a system architecture diagram of your microservices, and receive a ready-to-open .excalidraw file with color-coded nodes, labeled arrows, and background zones. ## Quick Start Ask the agent to create an Excalidraw diagram of your system architecture 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 programmatically?▼

Write an array of Excalidraw element objects (rectangles, ellipses, arrows, text) and wrap it in the standard .excalidraw envelope with type, version, 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.

Can I share an Excalidraw diagram without an account?▼

Yes. Run the included upload.py script with your .excalidraw file to upload it to excalidraw.com. 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 shapes usually result from using the invalid label property instead of container binding. Invisible text on dark backgrounds happens when the default #1e1e1e strokeColor is used; set strokeColor to #e5e5e5 for dark mode diagrams.

What dependencies does the Excalidraw upload script need?▼

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.com endpoint.

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
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