skills.rest
bahayonghang
bahayonghangCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/bahayonghang/my-claude-code-settings --skill excalidraw-bahayonghang
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
robertbr123robertbr123

excalidraw

Convert JSON input into Excalidraw diagram files.

Community
Basic
abhishekmmgnabhishekmmgn

diagram

Convert text or Mermaid code into a diagram triplet with an editable Excalidraw file.

Community
Advanced
needcaffeineneedcaffeine
9

excalidraw

Generate and modify Excalidraw diagrams from text prompts.

Community
Intermediate
Simon-Copilot-StudioSimon-Copilot-Studio

excalidraw

Generate Excalidraw-compatible JSON and save diagrams as .excalidraw files.

Community
Intermediate