skills.rest
odeciojunior
odeciojuniorCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw-designer

Generate hand-drawn style diagrams as .excalidraw JSON files.

Updated Oct 15, 2025
Search Tags:#excalidraw#flowcharts#architecture-diagrams#hand-drawn#visual-thinking#diagram-design
One-click install
npx skills add https://github.com/odeciojunior/claude-play --skill excalidraw-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-designer
Source: https://github.com/odeciojunior/claude-play/tree/main/plugins/productivity-tools/skills/excalidraw-designer
Command: npx skills add https://github.com/odeciojunior/claude-play --skill excalidraw-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing complex ideas into clear, hand-drawn style diagrams is time-consuming without accessible tools; this skill provides a structured approach to generate visually communicative Excalidraw files that convey architecture, workflows, and mind maps with a hand-drawn aesthetic.

Core Features & Use Cases

  • Generate hand-drawn style diagrams as .excalidraw JSON files for architecture diagrams, flowcharts, mind maps, and concept maps.
  • Enforce semantic colors and layout guidelines to maintain readability.
  • Use-case example: Imagine visually outlining a software architecture and exporting it to a .excalidraw file for collaboration.

Quick Start

Create a new Excalidraw diagram by outlining your visual concept and saving it as a .excalidraw file.

Frequently Asked Questions about excalidraw-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Excalidraw files for architecture diagrams?▼

The Skill generates hand-drawn style diagrams by producing Excalidraw-compatible JSON output with proper element definitions, ensuring the resulting .excalidraw files maintain structural validity for direct use.

What types of visual thinking diagrams can I create as .excalidraw files?▼

This approach provides a structured method to generate Excalidraw files with a hand-drawn aesthetic, solving the problem of time-consuming manual diagram creation while enforcing semantic colors and layout guidelines for readability.

Can I use this to automate flowchart design and export to Excalidraw JSON?▼

Yes, you can use this to automate flowchart design by outlining your workflow concept, which translates the structure into proper Excalidraw element definitions and exports valid .excalidraw JSON files.

Do I need any external components or dependencies to create hand-drawn diagrams?▼

No external components or dependencies are required to create hand-drawn diagrams; the Skill independently outputs the necessary Excalidraw-compatible JSON structure directly.

What is the best way to outline a software architecture diagram for Excalidraw?▼

The best way to outline a software architecture diagram is to define your components and workflows as a visual concept, letting the generator apply semantic colors and structural layout guidelines for the .excalidraw file.

Why does my generated Excalidraw JSON fail to load as a valid file?▼

Generated Excalidraw JSON may fail to load if it lacks proper element definitions or does not adhere to the required Excalidraw structure needed for valid file creation.

Related Skills

Explore More Design & Creative Skills→
camoacamoa
32

diagram-generator

Generate Mermaid diagrams for system architecture and data flow.

Community
Intermediate
x-TheFoxx-TheFox

excalidraw

Create hand-drawn Excalidraw diagrams from JSON saved as .excalidraw files.

Community
Intermediate
neo4j-labsneo4j-labs
406

excalidraw

Generate Excalidraw JSON diagrams from textual descriptions.

Official
Basic
kv0906kv0906
134

excalidraw-generator

Generate valid Excalidraw JSON files for flowcharts, architecture diagrams, UML class diagrams, and mind maps.

Community
Advanced