excalidraw

Generate and iteratively refine Excalidraw diagram JSON files for architecture and flow visualization.

Updated May 3, 2026
One-click install
npx skills add https://github.com/spikelab/multiplai-cc-mktplace --skill excalidraw-spikelab
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/spikelab/multiplai-cc-mktplace/tree/main/plugins/multiplai-media/skills/excalidraw
Command: npx skills add https://github.com/spikelab/multiplai-cc-mktplace --skill excalidraw-spikelab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating architecture diagrams, flowcharts, and sequence diagrams by hand is slow, and hand-editing Excalidraw JSON is error-prone. This Skill generates valid .excalidraw files from a plain-language description and refines them through conversational feedback. ## Core Features & Use Cases - Diagram Generation: Produces .excalidraw JSON files for architecture, flow, sequence, mindmap, and ER diagrams with auto-detected type and layout. - Consistent Styling: Applies a grid-aligned, hand-drawn dark-teal style guide with reusable JSON templates for rectangles, ellipses, diamonds, and arrows. - Iterative Refinement: Reads the current file before modifying, preserves user edits made in the Excalidraw canvas, and applies only requested changes. - Use Case: Ask for a diagram of your microservices architecture, open the generated file in the VS Code Excalidraw extension, then request targeted changes like adding a cache layer between the API and database. ## Quick Start Ask the assistant to draw an architecture diagram of your system as an Excalidraw file, then open the generated file in VS Code 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 create an Excalidraw diagram from a text description?

Invoke the skill with a description of what to diagram, optionally with --type (architecture, flow, sequence, mindmap, er) and --output flags. It writes a .excalidraw JSON file you can open in the VS Code Excalidraw extension.

What diagram types does Excalidraw generation support?

It supports architecture, flow, sequence, mindmap, ER, and custom diagrams. The type is auto-detected from your description if not specified, and layout (vertical, horizontal, hub-spoke) is chosen accordingly.

Can I edit the generated diagram in VS Code and then ask for changes?

Yes. The skill always reads the current file before modifying, so drawings you added in the Excalidraw extension are preserved. It only adds or changes what you request and never regenerates from scratch unless asked.

Why are my Excalidraw elements misaligned or overlapping?

The skill enforces 20px grid alignment with fixed spacing rules: 260px horizontal gaps, 140px vertical gaps, and 60px canvas padding. If elements overlap, the diagram likely exceeds the 20-element cap and should be split.

What are the limitations of generated Excalidraw diagrams?

Diagrams are capped at 20 elements to stay readable; larger systems should be split into multiple files. Styling follows a fixed dark-teal palette, though colors can be swapped for your own brand in the style guide.