skills.rest
superfhp
superfhpCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

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

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

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 by writing standard Excalidraw element JSON, saving it as a .excalidraw file that opens directly on excalidraw.com with no accounts or rendering libraries. ## Core Features & Use Cases - JSON-Based Diagram Generation: Write Excalidraw element arrays for rectangles, ellipses, diamonds, arrows, and bound text labels, then save as .excalidraw files. - Container Binding & Arrow Connections: Correctly link text labels to shapes and bind arrows to elements so diagrams stay connected when edited. - Shareable Uploads: Upload diagrams to excalidraw.com with client-side AES-GCM encryption via the included upload script to get a shareable URL. - Use Case: Ask for a system architecture diagram showing a frontend, API layer, and database; the Skill writes the .excalidraw file with color-coded zones and labeled arrows, then optionally uploads it for a link you can share with your team. ## Quick Start Create an Excalidraw diagram of a simple three-tier web 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 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, producing blank shapes.

Can I upload an Excalidraw file to get a shareable link?▼

Yes, run the included upload.py script with your .excalidraw file path. It encrypts the diagram client-side with AES-GCM and uploads to excalidraw.com without an account, printing a shareable URL. It requires the cryptography pip package.

Why is my Excalidraw text invisible or blank?▼

Blank text usually means the label property was used instead of container binding, or boundElements and containerId are not both set. On dark backgrounds, the default text color #1e1e1e is invisible, so set strokeColor to #e5e5e5.

Does Excalidraw JSON support dark mode diagrams?▼

Yes, add a large dark background rectangle as the first element, then use dark fill colors like #1e3a5f with bright stroke colors and light text (#e5e5e5). The references/dark-mode.md file documents the full dark palette.

Related Skills

Explore More Design & Creative Skills→
AradotsoAradotso
7

blueprint-mcp-diagram-generation

Generate architecture diagrams and flowcharts as PNG files via Blueprint MCP.

Official
Intermediate
LuminaVaultLuminaVault

excalidraw

Convert JSON element descriptions into Excalidraw files and upload them to excalidraw.com.

Official
Intermediate
VilnaCRM-OrgVilnaCRM-Org
5

structurizr-architecture-sync

Sync Structurizr workspace.dsl with code changes to maintain C4 diagrams.

Official
Intermediate
jay-steenbergenjay-steenbergen
2

wbd-mermaid-as-code

Teaches Mermaid syntax for flowchart, sequence, state, and ER diagrams embedded in GitHub markdown.

Community
Intermediate