excalidraw

Solid

Create and revise editable `.excalidraw` diagrams as Excalidraw JSON for architecture diagrams, flowcharts, sequence diagrams, concept maps, and other hand-drawn explainers.

AI & Automation 125 stars 11 forks Updated today MIT

Install

View on GitHub

Quality Score: 85/100

Stars 20%
70
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Excalidraw Use this skill when the user wants an editable diagram, not just a rendered image. Typical requests: - architecture or system diagrams - flowcharts and process maps - sequence diagrams - concept maps and explainers - hand-drawn style visuals that should stay editable in Excalidraw Excalidraw files are plain JSON. The default deliverable is a `*.excalidraw` file in the workspace. The user can drag that file into [excalidraw.com](https://excalidraw.com) to view, edit, or export it. ## Default Workflow 1. Plan the diagram before writing JSON: title, nodes, connectors, groups, and rough canvas size. 2. Write a valid Excalidraw `elements` array. 3. Wrap the array in the standard file envelope. 4. Save the result as `*.excalidraw`. 5. If the user wants a shareable browser link, run: ```bash node skills/excalidraw/scripts/upload.mjs diagram.excalidraw ``` The upload helper encrypts the diagram client-side and prints the Excalidraw share URL. ## File Envelope Use this shape unless you are editing an existing file and need to preserve more fields: ```json { "type": "excalidraw", "version": 2, "source": "hybridclaw", "elements": [], "appState": { "viewBackgroundColor": "#ffffff" }, "files": {} } ``` When editing an existing `.excalidraw` file, preserve `appState`, `files`, and any other existing top-level keys unless the user asked for a deliberate reset. ## Rules - Use Excalidraw JSON, not SVG or HTML, unless the user explicitly asked for a...

Details

Author
HybridAIOne
Repository
HybridAIOne/hybridclaw
Created
5 months ago
Last Updated
today
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

excalidraw

Hand-drawn Excalidraw JSON diagrams (arch, flow, seq).

11 Updated 5 days ago
kevinnft
AI & Automation Listed

excalidraw-diagram

Create Excalidraw diagrams as `.excalidraw` JSON that make a visual argument — not just labeled boxes. Use when the user wants to draw, sketch, visualize, or diagram a system architecture, software design, workflow, flowchart, sequence, data flow, state machine, pipeline, org chart, mind map, concept map, network topology, or process — in a hand-drawn, sketchy whiteboard style. Produces valid, themeable `.excalidraw` files that render to PNG and open in Excalidraw, Obsidian, or VS Code. Triggers on phrases like "make a diagram", "draw the architecture", "visualize this", "excalidraw", "flowchart", "system design diagram", "sketch this out", or "whiteboard it".

1 Updated yesterday
isatimur
Data & Documents Listed

excalidraw-diagram

Use this skill when the user wants to create visual diagrams that argue a point, explain an architecture, or teach a concept. Trigger on: "excalidraw", "visual diagram", "draw an architecture", "whiteboard diagram", "visualize this system", "create a diagram showing", "concept diagram", or any request for editable hand-drawn-style diagrams. Also trigger when the user wants diagrams with code snippets, JSON examples, or evidence artifacts embedded — this skill excels at educational technical diagrams. Generates .excalidraw JSON files with Playwright-based render-and-validate loop.

2 Updated today
petermcalister