excalidraw

Generate hand-drawn style diagrams as .excalidraw JSON files using a Python scene helper.

465|41|Updated Aug 4, 2026
One-click install
npx skills add https://github.com/autonomous-ai/openharness --skill excalidraw-autonomous-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/autonomous-ai/openharness/tree/main/store/agents/excalidraw/skills/excalidraw
Command: npx skills add https://github.com/autonomous-ai/openharness --skill excalidraw-autonomous-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating architecture diagrams, flowcharts, and sequence diagrams by hand-editing Excalidraw JSON is error-prone and slow. This Skill provides a Python scene helper that programmatically builds valid .excalidraw files with proper layout, bindings, and styling, then validates them with a verdict script. ## Core Features & Use Cases - Programmatic Diagram Generation: Build scenes with boxes, ellipses, diamonds, arrows, frames, and notes via the Scene API instead of writing raw JSON. - Layout & Readability Guidance: Enforces a 300x180 px grid, named frames for presentation walkthroughs, and Excalidraw's color palette and fonts. - Validation Verdict: Run verdict.py to check diagrams for broken bindings and structural issues before presenting. - Use Case: Ask for a diagram of your order-service backend and get a hand-drawn style .excalidraw file with labeled boxes, SQL arrows, a named frame, and a retry-policy note, viewable in the pane, excalidraw.com, or the VS Code extension. ## Quick Start Ask the agent to draw an architecture diagram of your system as an Excalidraw file using the scene helper.

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 programmatically in Python?

Import the Scene class from scene.py, add boxes, arrows, notes, and frames with methods like s.box() and s.arrow(), then call s.save() to write the .excalidraw file. Run verdict.py afterward to validate the output.

What is the file format of an .excalidraw diagram?

An .excalidraw file is JSON with type, version, elements, appState, and files fields. Elements include rectangles, ellipses, diamonds, text, arrows, lines, and frames, and the same file opens in excalidraw.com and the VS Code extension.

Can I edit an existing .excalidraw file directly?

Yes, for small tweaks like moving a box or renaming a label, edit the x/y values or the text and originalText fields of a text element. Keep ids and boundElements intact, and regenerate from the script for larger changes.

How do I make a sequence diagram in Excalidraw?

Place actors as boxes in a row at y=0, then draw lifelines as arrows between them stepping down 100 px per message. Use the hand-drawn font and few colors for sketch-style diagrams.

Why does the verdict script flag my Excalidraw diagram?

The verdict flags bindings that point at nothing, which happens when boundElements reference deleted or changed element ids. Keep ids and boundElements unchanged when editing JSON directly, or regenerate the diagram from the scene script.