excalidraw

Generate Excalidraw JSON files for diagrams, flowcharts, and sketches.

Updated Mar 30, 2022
One-click install
npx skills add https://github.com/davidsu/dotfiles --skill excalidraw-davidsu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/davidsu/dotfiles/tree/main/claude/skills/excalidraw.ln
Command: npx skills add https://github.com/davidsu/dotfiles --skill excalidraw-davidsu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill allows for the programmatic creation of Excalidraw diagrams, enabling the generation of architecture diagrams, flowcharts, and sketches directly from descriptions.

Core Features & Use Cases

  • Create .excalidraw JSON files: Generate valid Excalidraw files that can be imported into the Excalidraw application.
  • Define Shapes, Text, and Arrows: Specify various element types including rectangles, diamonds, ellipses, text, and arrows with customizable properties.
  • Establish Connections: Define bindings between elements to create relationships, such as service-to-service communication lines.
  • Use Case: Generate an architecture diagram for a microservices system, defining services as rectangles and their communication as arrows with labels.

Quick Start

Use the excalidraw skill to create a diagram with two boxes labeled 'Service A' and 'Service B' connected by a bidirectional arrow.

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 files for architecture diagrams programmatically?

You can generate valid Excalidraw JSON files by defining elements like rectangles, diamonds, and arrows with customizable properties. This programmatic approach outputs valid `.excalidraw` files ready for import into the Excalidraw application.

Can I create flowcharts with connected shapes and labeled arrows from a text description?

Yes, you can create flowcharts by defining shapes and establishing bindings between elements. This generates visual representations of process flows, specifying service-to-service communication lines with labeled arrows.

What is the best way to define relationships between elements in an Excalidraw diagram?

The best way to define relationships is by establishing bindings between elements like rectangles and arrows. This creates inter-element connections, allowing you to map out communication lines and interactions within system architecture diagrams.

Does this approach support defining custom properties for sketches and visualizations?

Yes, the generation process supports defining various element types including text, ellipses, and arrows with customizable properties. This facilitates the creation of tailored sketches and visual representations for process flows.

How do I import the generated JSON into the Excalidraw application?

The Skill generates valid `.excalidraw` JSON files specifically formatted for the Excalidraw application. You can directly import these structured JSON outputs to render your defined shapes, text, and arrow elements visually.

Can I use this to map out a microservices system architecture?

Yes, you can generate an architecture diagram for a microservices system by defining services as rectangles and their communication as arrows with labels. This creates a clear visual representation of the entire system architecture.