skills.rest
HybridAIOne
HybridAIOneOFFICIAL
Explore all skills by this author →
GitHub

excalidraw

Generate editable Excalidraw JSON diagrams for architecture, flowcharts, and more.

126|11|Updated Feb 24, 2026
Search Tags:#architecture#json#excalidraw#flowchart#sequence diagram#diagram generation#editable visuals
One-click install
npx skills add https://github.com/HybridAIOne/hybridclaw --skill excalidraw-hybridaione
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/HybridAIOne/hybridclaw/tree/main/skills/excalidraw
Command: npx skills add https://github.com/HybridAIOne/hybridclaw --skill excalidraw-hybridaione

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node:crypto, node:fs, node:zlib, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the problem of turning diagram ideas into editable Excalidraw diagrams, so users can refine layouts and export visuals later without losing editability.

Core Features & Use Cases

  • Editable diagram output: Generates a valid .excalidraw JSON document containing an elements array for architecture diagrams, flowcharts, sequence diagrams, and concept maps.
  • Safe, structured editing workflow: Uses a standard file envelope by default and preserves key fields when modifying existing .excalidraw files (like appState and files).
  • Shareable diagrams: When requested, produces an Excalidraw share link by running the provided uploader script.

Quick Start

Use the excalidraw skill to create an editable Excalidraw diagram for a system architecture with labeled boxes and arrows, and save it as architecture.excalidraw in the workspace.

Frequently Asked Questions about excalidraw

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

FAQPage Schema
How do I create an editable architecture diagram as an Excalidraw JSON file?▼

This Skill generates a valid `.excalidraw` JSON document containing an `elements` array for architecture diagrams, flowcharts, and sequence diagrams. You can refine the layout and export the visual later without losing editability.

Can I edit an existing .excalidraw file without losing its current layout?▼

Yes, you can edit an existing `.excalidraw` file safely. The Skill preserves key top-level fields like `appState` and `files` when modifying your diagram, unless you explicitly request a full reset.

What is the best way to generate a sequence diagram that I can share via a link?▼

The best way to generate a shareable sequence diagram is to create the Excalidraw JSON structure and run the provided uploader script. This produces an editable diagram and enables Excalidraw share link creation.

Does this diagram generation process support concept maps and flowcharts?▼

Yes, the diagram generation process supports concept maps and flowcharts. It outputs a structured JSON envelope with the correct `elements` structure, allowing you to create editable visuals from scratch.

Why does my Excalidraw JSON file need to preserve top-level fields when editing?▼

Preserving top-level fields like `appState` and `files` in your Excalidraw JSON file ensures structural integrity during modifications. This safe editing workflow prevents the loss of existing layout configurations.

Related Skills

Explore More Design & Creative Skills→
jacardljacardl

excalidraw

Transform Excalidraw element JSON into .excalidraw files.

Community
Advanced
attentiondotnetattentiondotnet

excalidraw

Convert Excalidraw element JSON into .excalidraw diagram files.

Community
Intermediate
MohibShaikhMohibShaikh
11

todo-app

Manage local tasks by adding, listing, and marking done in todos.json.

Community
Basic
giwankimgiwankim

mermaid-visualizer

Convert plain text descriptions into Mermaid diagrams for documentation.

Community
Basic