excalidraw

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

Updated May 4, 2026
One-click install
npx skills add https://github.com/Junkfooooood/hermes-governance --skill excalidraw-junkfooooood
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/Junkfooooood/hermes-governance/tree/main/skills/creative/excalidraw
Command: npx skills add https://github.com/Junkfooooood/hermes-governance --skill excalidraw-junkfooooood

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 hand-drawn style diagrams as plain Excalidraw JSON files that open directly at 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 labels) 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 copy-pasteable examples for flowcharts, process diagrams, and UML sequence diagrams. - Use Case: Ask for a system architecture diagram and receive a .excalidraw file you can drag onto excalidraw.com, plus an optional shareable link for 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 (rectangles, arrows, text) and wrap it in the standard envelope with type, version, source, elements, and appState keys. Save it as a .excalidraw file and drag it onto excalidraw.com to view and edit.

How do I add text labels to Excalidraw shapes?

Use container binding: the shape lists the text in boundElements and the text element sets containerId back to the shape, with matching text and originalText. The label property does not exist in Excalidraw and is silently ignored, producing blank shapes.

How do I share an Excalidraw diagram with 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.

Why is my Excalidraw text invisible or blank?

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

Does the Excalidraw upload script need any dependencies?

The upload script requires the Python cryptography package, installed with pip install cryptography. Diagram creation itself needs nothing beyond writing JSON, since excalidraw.com renders the file directly in the browser.