skills.rest
DagimAlemayehuu
DagimAlemayehuuCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

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

Updated Jul 19, 2026
Search Tags:#json#excalidraw#flowchart#visualization#sequence diagram#diagram#architecture diagram
One-click install
npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill excalidraw-dagimalemayehuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/DagimAlemayehuu/AgenticEngineering/tree/main/agentic-engineering/core/dependencies/design/excalidraw
Command: npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill excalidraw-dagimalemayehuu

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 at excalidraw.com, with no accounts, API keys, or rendering libraries. ## Core Features & Use Cases - JSON-based diagram generation: Write standard Excalidraw element JSON (rectangles, ellipses, diamonds, arrows, bound text) 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. - Reference palettes and examples: Built-in color tables, dark-mode guidance, and copy-pasteable examples for flowcharts, process diagrams, and UML-style sequence diagrams. - Shareable uploads: An included Python script encrypts and uploads a diagram to excalidraw.com and prints a shareable URL. - Use Case: Ask for a system architecture diagram, receive a .excalidraw file, drag it onto excalidraw.com to view and edit, then upload it for a link to share with your team. ## Quick Start Use the excalidraw skill to create an architecture diagram of my web app with a frontend, API server, and database, 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 it as a .excalidraw file. Drag the file onto excalidraw.com to view and edit it.

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 is not valid Excalidraw JSON and will be silently ignored, producing blank shapes.

Can I share an Excalidraw diagram with a link without an account?▼

Yes. 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 authentication, and prints a shareable URL containing the decryption key.

Why is my Excalidraw text invisible or unreadable?▼

On white backgrounds, text lighter than #757575 fails contrast rules, and on dark backgrounds the default #1e1e1e stroke is invisible. Set text strokeColor to #e5e5e5 on dark backgrounds and always include fontFamily: 1 for the hand-drawn font.

What dependencies does the Excalidraw upload script need?▼

The upload script requires Python 3 and the cryptography package, installed with pip install cryptography. It uses only the standard library otherwise, including urllib, zlib, and struct, to compress, encrypt, and POST the diagram.

Related Skills

Explore More Design & Creative Skills→
camoacamoa
32

diagram-generator

Generate Mermaid diagrams for system architecture and data flow.

Community
Intermediate
AissenLiuAissenLiu

excalidraw

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

Community
Intermediate
abudhahirabudhahir

architecture-documenter

Generate system architecture documentation and Architecture Decision Records.

Community
Advanced
neverpreparedneverprepared

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Official
Intermediate