skills.rest
maopujie10-sys
maopujie10-sysCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

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

1|Updated Jun 24, 2026
Search Tags:#architecture#json#excalidraw#flowchart#visualization#generate#diagram
One-click install
npx skills add https://github.com/maopujie10-sys/Bailongma --skill excalidraw-maopujie10-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/maopujie10-sys/Bailongma/tree/main/skills/hermes-skills/creative/excalidraw
Command: npx skills add https://github.com/maopujie10-sys/Bailongma --skill excalidraw-maopujie10-sys

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 Excalidraw diagrams as plain JSON files that open directly at excalidraw.com, with no accounts, API keys, or rendering libraries required. ## 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 and Arrow Connections: Attach labels to shapes via containerId/boundElements and connect arrows to shapes with startBinding/endBinding for clean, auto-positioned diagrams. - Shareable Uploads: Upload a saved diagram to excalidraw.com with the included scripts/upload.py to get a shareable link. - Use Case: Ask for a system architecture diagram showing a client, API gateway, and database; the Skill produces a .excalidraw file you can drag onto excalidraw.com or share via a generated URL. ## Quick Start Create an Excalidraw diagram of a three-tier web architecture with a client, server, and database, and save it as architecture.excalidraw.

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, ellipses, arrows, text) and wrap it in the standard envelope with type "excalidraw", version 2, and an appState object. Save it as a .excalidraw file and drag it onto excalidraw.com to view and edit.

How do I add a text label inside an Excalidraw shape?▼

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 on shapes is not valid Excalidraw and will be silently ignored.

Can I share an Excalidraw diagram without an account?▼

Yes. Run the included scripts/upload.py with your .excalidraw file path to upload it to excalidraw.com without an account. It prints a shareable URL and requires the cryptography pip package.

Why is my Excalidraw shape showing blank with no label?▼

Blank shapes happen when you use a label property, which Excalidraw does not support. You must create a separate text element with containerId set to the shape's id and list the text in the shape's boundElements array.

What are the limitations of generating Excalidraw JSON directly?▼

Text positioning is approximate since Excalidraw recalculates bound text on load, and emoji do not render in Excalidraw's font. Standalone text must be positioned manually by computing x from the desired center point.

Related Skills

Explore More Design & Creative Skills→
camoacamoa
32

diagram-generator

Generate Mermaid diagrams for system architecture and data flow.

Community
Intermediate
CuriousLearnerCuriousLearner
27

architecture-documenter

Document system architecture and technical decisions with diagrams and ADRs.

Community
Advanced
EigenwiseEigenwise
20

architecture-diagram

Generate self-contained architecture diagrams as standalone HTML files with inline SVG and CSS.

Community
Intermediate
neverpreparedneverprepared

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Official
Intermediate