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 109 stars 10 forks Updated today MIT

Install

View on GitHub

Quality Score: 85/100

Stars 20%
68
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
3 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

Create hand-drawn style diagrams using Excalidraw JSON format. Generate .excalidraw files for architecture diagrams, flowcharts, sequence diagrams, concept maps, and more. Files can be opened at excalidraw.com or uploaded for shareable links.

175,435 Updated today
NousResearch
AI & Automation Solid

excalidraw-diagram-generator

Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.

34,233 Updated today
github
Data & Documents Listed

excalidraw-diagram-generator

Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.

335 Updated today
aiskillstore
Data & Documents Listed

excalidraw

Create diagrams using Excalidraw JSON or hand-crafted SVG. Use when the user asks to create diagrams, flowcharts, architecture diagrams, RTL micro-architecture, wireframes, mind maps, ERDs, sequence diagrams, or any visual drawings. Generates `.excalidraw` JSON or `.svg` files.

7 Updated 3 months ago
rockyco
Web & Frontend Listed

excalidraw

Generate hand-drawn Excalidraw-style diagrams from text prompts. Triggers on requests for diagrams, flowcharts, architecture sketches, system designs, hand-drawn visuals, or when the user says /excalidraw.

23 Updated 3 months ago
aref-vc