excalidraw

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

Updated Jul 6, 2026

Search Tags:#architecture #json #excalidraw #visualization #diagrams #flowcharts

Ready to run

npx skills add https://github.com/ghufronbagaskara/agent-im --skill excalidraw-ghufronbagaskara

💬 Prompt for ChatGPT / Claude Chat▼

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.