skills.rest
MLT-OSS
MLT-OSSOFFICIAL
Explore all skills by this author →
WebsiteGitHub

excalidraw

Generate hand-drawn style diagrams as Excalidraw JSON files for flowcharts and architecture diagrams.

14|5|Updated Apr 9, 2026
Search Tags:#json#excalidraw#flowchart#visualization#sequence diagram#diagram#architecture diagram
One-click install
npx skills add https://github.com/MLT-OSS/hermes-agent-go --skill excalidraw-mlt-oss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/MLT-OSS/hermes-agent-go/tree/main/skills/creative/excalidraw
Command: npx skills add https://github.com/MLT-OSS/hermes-agent-go --skill excalidraw-mlt-oss

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 directly as Excalidraw JSON files, which can be opened at excalidraw.com or shared via a link without any account or rendering library. ## Core Features & Use Cases - JSON-Based Diagram Generation: Write standard Excalidraw element JSON (rectangles, ellipses, diamonds, arrows, bound text labels) and save it as a .excalidraw file. - Container Binding for Labels: Attach text to shapes and arrows using containerId and boundElements so labels render correctly instead of blank shapes. - Shareable Uploads: Upload diagrams to excalidraw.com with client-side AES-GCM encryption via the included scripts/upload.py to get a shareable URL. - Use Case: Ask for a system architecture diagram with frontend, backend, and database layers; the Skill produces a .excalidraw file with color-coded zones, labeled nodes, and bound arrows that you can open or share instantly. ## Quick Start Ask the agent to create an Excalidraw diagram of your system architecture and save it as a .excalidraw file, then optionally upload it for a shareable link.

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 programmatically?▼

Write an array of Excalidraw element objects (rectangles, ellipses, arrows, text) with id, x, y, width, and height fields, wrap them in the standard .excalidraw envelope with type, version, and appState, then save the JSON as a .excalidraw file.

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 share an Excalidraw diagram without an account?▼

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

Why is my Excalidraw text invisible or not rendering?▼

Common causes are missing fontFamily: 1, missing originalText or autoResize fields, or using a dark text color on a dark background. On dark backgrounds set text strokeColor to #e5e5e5, and never use light gray on white.

What dependencies does the Excalidraw upload script need?▼

The upload script requires the cryptography Python package, installed via pip install cryptography. It uses AESGCM for client-side encryption before posting to the excalidraw.com public endpoint; no other packages or API keys are needed.

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
LuminaVaultLuminaVault

excalidraw

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

Official
Intermediate
arndvsarndvs

document

Write and audit technical documentation including READMEs, ADRs, changelogs, and Mermaid diagrams.

Community
Intermediate
walterfanwalterfan
1

Diagram Render Skill

Render PlantUML, Mermaid, and Graphviz code blocks into PNG or SVG images.

Community
Intermediate