excalidraw

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

16|1|Updated Jan 2, 2026

Search Tags:#architecture #json #excalidraw #flowchart #diagram #visual-design #hand-drawn

Ready to run

npx skills add https://github.com/bahayonghang/my-claude-code-settings --skill excalidraw-bahayonghang

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/bahayonghang/my-claude-code-settings/tree/main/skills/excalidraw
Command: npx skills add https://github.com/bahayonghang/my-claude-code-settings --skill excalidraw-bahayonghang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill generates hand-drawn style diagrams to visually communicate architecture, flow, and system designs using Excalidraw JSON.

Core Features & Use Cases

Diagram generation: Produce Excalidraw-compatible JSON with rectangles, text, and arrows that bind to each other correctly.
Layout rules & validation: Enforces binding, text width/height, and non-overlapping layouts to keep diagrams readable.
Use Case: When designing a complex software system, generate modular diagrams that can be imported directly into Excalidraw for collaboration and documentation.

Quick Start

Use the excalidraw skill to generate a new .excalidraw.json file and then drag it into Excalidraw or open it with the Excalidraw extension.

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 to visualize software architecture?▼

To visualize software architecture, generate Excalidraw JSON containing rectangles, text, and arrows. These elements are bound together and validated for non-overlapping layouts to ensure your architecture diagrams are readable and ready for import.

What is the best way to create hand-drawn flowcharts for system documentation?▼

Creating hand-drawn flowcharts for system documentation is best handled by generating Excalidraw-compatible JSON. This format automatically applies layout rules, text sizing, and arrow bindings to produce valid, modular diagrams for direct collaboration.

How do I import generated Excalidraw JSON into my workspace?▼

You import generated Excalidraw JSON by saving the output as a .excalidraw.json file. You can then drag this file directly into the Excalidraw web interface or open it using the Excalidraw extension to view and edit the diagram.

Does the generated Excalidraw diagram enforce layout rules to prevent overlapping elements?▼

Yes, the generated Excalidraw diagram enforces layout rules to prevent overlapping elements. The output validates text width and height alongside arrow bindings, ensuring your system visualization remains clear and properly structured for design brainstorming.

Can I use this to generate diagrams for design brainstorming without manual drawing?▼

Yes, you can generate diagrams for design brainstorming without manual drawing. The process outputs Excalidraw JSON with correctly bound rectangles, text, and arrows, allowing you to visualize workflows instantly and refine them visually later.