skills.rest
ruiyangruiyi
ruiyangruiyiCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

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
One-click install
npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill excalidraw-ruiyangruiyi
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
samhvw8samhvw8
14

excalidraw-architect

Generate Excalidraw diagrams programmatically from JSON-based element definitions.

Community
Advanced
AissenLiuAissenLiu

excalidraw

Create Excalidraw diagrams from element JSON and export them as .excalidraw files.

Community
Intermediate
gqf2008gqf2008

excalidraw

Create Excalidraw diagrams from element JSON saved as .excalidraw files.

Community
Intermediate
VictorSmaniottoVictorSmaniotto

diagram-generator

Generate Mermaid and PlantUML definitions for data models, workflows, and system architecture.

Community
Advanced