skills.rest
vivekgoquest
vivekgoquestCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

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

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

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 on 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 Links: 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 sequence diagrams. - Use Case: Ask for a system architecture diagram of your microservices; the Skill writes the .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.

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 from JSON?▼

Write an array of Excalidraw element objects with type, id, x, y, width, and height, wrap it in the standard .excalidraw envelope with type, version, and appState, then save the file. Drag and drop it onto excalidraw.com to view and edit.

How do I add text labels to Excalidraw shapes?▼

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.

How do I share an Excalidraw diagram as a link?▼

Run the included upload.py script with your .excalidraw file path. It encrypts the diagram client-side with AES-GCM, uploads it to excalidraw.com without an account, and prints a shareable URL containing the decryption key.

Does the Excalidraw upload script require an account or API key?▼

No account or API key is required. The script posts to the public excalidraw.com endpoint and encrypts data client-side, so the server never sees plaintext. It only 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 every text element.

Related Skills

Explore More Design & Creative Skills→
lyndonkllyndonkl
142

mapping-visualization-scaffolds

Generate visual maps and diagrams from structured node and relationship input.

Community
Intermediate
automatedigitalautomatedigital
1

excalidraw

Generate hand-drawn style diagrams as valid .excalidraw JSON files.

Official
Intermediate
abudhahirabudhahir

architecture-documenter

Generate system architecture documentation and Architecture Decision Records.

Community
Advanced
chengzongcaichengzongcai
21

diagram-generator

Generate and render Mermaid, Graphviz DOT, PlantUML, and SVG diagrams from natural language or structured inputs.

Community
Intermediate