excalidraw

Solid

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

AI & Automation 11 stars 3 forks Updated 5 days ago MIT

Install

View on GitHub

Quality Score: 78/100

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

Skill Content

# Excalidraw Diagram Skill Create diagrams by writing standard Excalidraw element JSON and saving as `.excalidraw` files. These files can be drag-and-dropped onto [excalidraw.com](https://excalidraw.com) for viewing and editing. No accounts, no API keys, no rendering libraries -- just JSON. ## When to use 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. ## Workflow 1. **Load this skill** (you already did) 2. **Write the elements JSON** -- an array of Excalidraw element objects 3. **Save the file** using `write_file` to create a `.excalidraw` file 4. **Optionally upload** for a shareable link using `scripts/upload.py` via `terminal` ### Saving a Diagram Wrap your elements array in the standard `.excalidraw` envelope and save with `write_file`: ```json { "type": "excalidraw", "version": 2, "source": "hermes-agent", "elements": [ ...your elements array here... ], "appState": { "viewBackgroundColor": "#ffffff" } } ``` Save to any path, e.g. `~/diagrams/my_diagram.excalidraw`. ### Uploading for a Shareable Link Run the upload script (located in this skill's `scripts/` directory) via terminal: ```bash python skills/diagramming/excalidraw/scripts/upload.py ~/diagrams/my_diagram.excalidraw ``` This uploads to excalidraw.com (no account needed) and prints a shareable URL. Requires the `cryptography` pip package (`pip install ...

Details

Author
kevinnft
Repository
kevinnft/ai-agent-skills
Created
2 months ago
Last Updated
5 days ago
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

excalidraw

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

125 Updated today
HybridAIOne
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