excalidraw

Name: excalidraw
Availability: InStock
Author: ruiyangruiyi

Generate hand-drawn style Excalidraw diagrams as standards-compliant .excalidraw JSON artifacts.

Updated May 26, 2026

Search Tags:#architecture #json #excalidraw #flowchart #diagramming #visualization #shareable link

Ready to run

npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill excalidraw-ruiyangruiyi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/ruiyangruiyi/hermes-agent/tree/main/skills/creative/excalidraw
Command: npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill excalidraw-ruiyangruiyi

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill removes the friction of creating diagrams by letting you produce Excalidraw-ready diagrams as plain JSON you can save and edit anywhere.

Core Features & Use Cases

Generate Excalidraw diagrams from JSON: author elements arrays and save them as .excalidraw files compatible with excalidraw.com.
Create common diagram types: flow, architecture, and sequence-style visuals using rectangles, ellipses, arrows, and optional container-bound text labels.
Optional shareable uploads: upload a saved .excalidraw file to excalidraw.com to get a URL without an account.

Quick Start

Ask the Hermes Agent to generate an Excalidraw .excalidraw file for a flowchart by outputting the required JSON envelope and then saving it to a path you choose.

Frequently Asked Questions about excalidraw

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

FAQPage Schema

How do I generate Excalidraw JSON for a flowchart without rendering it?▼

To generate Excalidraw JSON for a flowchart, you author an `elements` array containing shapes and arrows, wrap it in an Excalidraw envelope with `type`, `version`, `source`, and `appState`, and save it as a `.excalidraw` file.

Can I create architecture diagrams as Excalidraw files programmatically?▼

Yes, you can create architecture diagrams by generating a standards-compliant `.excalidraw` JSON artifact using rectangles, ellipses, and arrows with optional container-bound text labels, then saving the file locally.

What elements are required in an Excalidraw JSON file structure?▼

An Excalidraw JSON file requires an envelope containing `type`, `version`, `source`, `elements`, and `appState`, along with correct element fields and optional container-bound text or arrow labeling.

How do I get a shareable link for an Excalidraw diagram without an account?▼

After saving your generated `.excalidraw` file, you can use the provided upload script to upload it to excalidraw.com and receive a shareable link without needing an account.

Does this approach support sequence diagrams and concept maps?▼

Yes, generating Excalidraw JSON artifacts supports sequence diagrams, concept maps, flowcharts, and architecture diagrams by utilizing standard elements like rectangles, ellipses, and arrows.

What is the best way to edit a generated Excalidraw diagram after saving it?▼

Since the output is a standards-compliant `.excalidraw` JSON file, you can edit the portable results anywhere by opening the file directly in the excalidraw.com editor.