excalidraw

Generate Excalidraw-format diagram files from structured elements JSON arrays.

Updated Apr 10, 2026
One-click install
npx skills add https://github.com/VYRE-Studios/Windows-Agentic-Framework --skill excalidraw-vyre-studios
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/VYRE-Studios/Windows-Agentic-Framework/tree/main/skills/creative/excalidraw
Command: npx skills add https://github.com/VYRE-Studios/Windows-Agentic-Framework --skill excalidraw-vyre-studios

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires cryptography, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Many teams and individuals need clear, hand-drawn style diagrams but lack an easy way to produce editable Excalidraw files programmatically, shareable via links, or consistent with a reusable color and sizing system. This Skill removes the manual effort of constructing Excalidraw JSON by providing format guidelines, examples, and an upload helper so diagrams can be generated, saved, and shared reliably.

Core Features & Use Cases

  • Create valid .excalidraw files by composing an elements array wrapped in the standard Excalidraw envelope and appState.
  • Guidance and examples for labeled shapes, container-bound text, arrows with bindings, z-ordering, sizing, and color palettes for both light and dark diagrams.
  • Upload helper script to encrypt, compress, and publish diagrams to excalidraw.com for a shareable URL, useful for architecture diagrams, flowcharts, sequence diagrams, concept maps, documentation, and design reviews.

Quick Start

Save your elements array wrapped in the Excalidraw envelope and write it to a file path such as ~/diagrams/my_diagram.excalidraw using the agent's file-write capability.

Frequently Asked Questions about excalidraw

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Excalidraw diagrams from JSON programmatically?

Generating Excalidraw diagrams programmatically requires composing a structured elements JSON array, wrapping it in the standard Excalidraw envelope with appState, and writing the output to a .excalidraw file.

Can I upload Excalidraw files and get a shareable link automatically?

You can upload Excalidraw files using the provided upload helper script to encrypt, compress, and publish diagrams to excalidraw.com, which returns a shareable URL for collaboration.

Do I need the cryptography package to create Excalidraw visualization files?

The cryptography package is only required for the upload helper script to encrypt and publish diagrams; generating and saving standard .excalidraw files locally does not require this dependency.

What types of visualizations work best with Excalidraw's hand-drawn styling?

Excalidraw's hand-drawn styling works well for architecture diagrams, flowcharts, sequence diagrams, and concept maps that require container-bound text, labeled shapes, and arrows with bindings.

How do I bind text inside shapes and connect arrows in Excalidraw JSON?

Binding text inside shapes and connecting arrows in Excalidraw JSON requires using container-bound text elements and arrow bindings to ensure labels stay attached during rendering and layout adjustments.