skills.rest
ghufronbagaskara
ghufronbagaskaraCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

Generate Excalidraw-compatible JSON diagrams for architecture, flow, and sequence visualization.

Updated Jul 6, 2026
Search Tags:#architecture#json#excalidraw#visualization#diagrams#flowcharts
One-click install
npx skills add https://github.com/ghufronbagaskara/agent-im --skill excalidraw-ghufronbagaskara
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/ghufronbagaskara/agent-im/tree/main/hermes-home/skills/creative/excalidraw
Command: npx skills add https://github.com/ghufronbagaskara/agent-im --skill excalidraw-ghufronbagaskara

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill removes the friction of manual diagramming by allowing you to generate professional, hand-drawn style architecture, flow, and sequence diagrams directly through structured JSON code.

Core Features & Use Cases

  • Programmatic Diagramming: Define complex shapes, arrows, and containers using standard JSON objects.
  • Seamless Integration: Export diagrams that are fully compatible with the Excalidraw web interface for final adjustments or sharing.
  • Use Case: Quickly visualize system architecture or sequence flows during technical documentation tasks without needing to drag-and-drop elements manually in a GUI.

Quick Start

Use the excalidraw skill to generate a new diagram file named architecture.excalidraw containing a rectangle and an arrow connecting it to an ellipse.

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 using JSON code?▼

Generating Excalidraw diagrams using JSON involves defining visual elements, container bindings, and arrow connections programmatically within structured JSON objects to produce hand-drawn aesthetic architecture or flow visualizations.

What is the best way to create architectural diagrams without manual GUI drag-and-drop?▼

Creating architectural diagrams without manual drag-and-drop is best achieved by programmatically defining complex shapes and arrows through standard JSON code, exporting files fully compatible with the Excalidraw web interface for final adjustments.

Can I export sequence and flow visualizations to Excalidraw without external rendering dependencies?▼

Yes, you can export sequence and flow visualizations to Excalidraw without external rendering dependencies by generating compatible JSON files that define the technical documentation elements natively.

Does programmatic diagramming support container bindings and arrow connections for technical documentation?▼

Yes, programmatic diagramming supports container bindings and arrow connections for technical documentation by allowing you to define complex relationships between shapes using standard JSON objects.

Do I need to manually adjust generated JSON diagrams in the Excalidraw web interface?▼

Generated JSON diagrams are fully compatible with the Excalidraw web interface, allowing you to make final adjustments or share the hand-drawn style visualizations, though direct programmatic output requires no initial manual GUI manipulation.

Related Skills

Explore More Design & Creative Skills→
paxlabs-incpaxlabs-inc
7

excalidraw

Generate hand-drawn style diagrams from Excalidraw-compatible JSON element arrays.

Community
Intermediate
photonics-dhlphotonics-dhl

excalidraw

Convert Excalidraw element JSON into .excalidraw diagram files.

Community
Intermediate
bahayonghangbahayonghang
16

excalidraw

Generate Excalidraw-compatible JSON diagrams with rectangles, text, and arrows.

Community
Intermediate
jonathan-vellajonathan-vella
6

excalidraw

Generate hand-drawn style diagrams, wireframes, and sketches in VS Code.

Community
Basic