skills.rest
agtktID
agtktIDCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

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

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

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-based diagram generation: Write standard Excalidraw element JSON (rectangles, ellipses, diamonds, arrows, bound text labels) and save it as a .excalidraw file. - Shareable link upload: Upload diagrams to excalidraw.com with client-side AES-GCM encryption using the included scripts/upload.py, producing a shareable URL with no account required. - Reference guides: Built-in color palettes, dark-mode theming rules, and complete copy-pasteable examples (flowcharts, process diagrams, UML-style sequence diagrams) in references/. - Use Case: Ask for a system architecture diagram of your microservices; the Skill writes a .excalidraw file with labeled, color-coded nodes and bound arrows, then optionally uploads it so you can share the link with your team. ## 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, arrows, text) wrapped in the standard .excalidraw JSON envelope with type, version, elements, and appState keys. Save the file and drag it onto excalidraw.com to view and edit it.

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. 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 shapes blank?▼

Blank shapes usually mean the label property was used instead of container binding. Invisible text on dark backgrounds happens when the default #1e1e1e stroke color is kept; set text strokeColor to #e5e5e5 for dark mode diagrams.

What dependencies does the Excalidraw upload script need?▼

The upload script requires only the cryptography pip package for AES-GCM encryption. Everything else uses the Python standard library, and no excalidraw.com account or API key is needed.

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
chloebrettchloebrett

diagrams

Create diagrams and visualizations in Markdown using Mermaid, Graphviz, Vega-Lite, PlantUML, and HTML templates.

Community
Intermediate