excalidraw
Excalidraw lets you build diagrams by writing standard element JSON and saving as `.excalidraw` files that open directly in excalidraw.com. Generate architecture diagrams, flowcharts, sequence diagrams, and concept maps with a simple JSON structure—no rendering libraries or authentication required. Upload files for shareable links or edit them locally.
Excalidraw generates hand-drawn style architecture, flowchart, and sequence diagrams as JSON files for sharing.
AI-generated summary based on this skill's SKILL.md
Install
NousResearch/hermes-agent/excalidraw · repository language: Python
git clone https://github.com/NousResearch/hermes-agent
cp -r hermes-agent/skills/creative/excalidraw ~/.claude/skills/excalidrawFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create hand drawn diagrams in JSON format with excalidraw?
Excalidraw lets you build hand-drawn style diagrams by writing standard element JSON and saving as `.excalidraw` files. You define shapes, arrows, text, and connections as JSON objects, then save the file to open directly in excalidraw.com. No rendering libraries or authentication are needed—just structure your diagram elements and excalidraw handles the rest.
What types of diagrams can excalidraw generate?
Excalidraw supports architecture diagrams, flowcharts, sequence diagrams, and concept maps. You build these by composing labeled shapes, arrows, and annotations in the standard JSON format. Each diagram type uses the same underlying element structure, so you can mix diagram styles in a single file or create specialized visualizations for system design, process flows, or knowledge mapping.
Can I generate and share excalidraw diagrams programmatically without a UI?
Yes. Excalidraw lets you generate diagrams programmatically by writing JSON directly—no UI interaction required. Save your JSON as a `.excalidraw` file, then upload it to excalidraw.com to get a shareable link. This workflow makes excalidraw ideal for agents and automation tools that need to produce diagrams on demand without manual editing.
What is diagram-as-code and how does excalidraw support it?
Diagram-as-code means defining visual designs using structured text or JSON instead of graphical tools. Excalidraw implements this by letting you build system designs and concept maps using standard JSON element definitions. You write code to compose shapes, connections, and labels, then excalidraw renders them as hand-drawn style diagrams—bridging automation and visual communication.
Do I need API keys or accounts to create excalidraw diagrams?
No. Excalidraw requires no API keys or authentication to generate diagram files locally. You write JSON, save it as `.excalidraw`, and open it in excalidraw.com. Uploading for shareable links is optional—you can edit diagrams locally, share files directly, or use them in your own workflows without any account setup.
How do I export excalidraw diagrams to shareable links?
Excalidraw diagrams saved as `.excalidraw` JSON files can be uploaded to excalidraw.com to generate shareable links. This lets you distribute diagrams without requiring recipients to have the file or any software installed. The link opens your diagram directly in the browser, ready for viewing or collaborative editing.
SKILL.md
rendered from the published skill — quoted content, verbatim
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 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
- Load this skill (you already did)
- Write the elements JSON -- an array of Excalidraw element objects
- Save the file using
write_fileto create a.excalidrawfile - Optionally upload for a shareable link using
scripts/upload.pyviaterminal
Saving a Diagram
Wrap your elements array in the standard .excalidraw envelope and save with
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 5 files
skills/creative/excalidraw/SKILL.md
skills/creative/excalidraw/references/colors.md
skills/creative/excalidraw/references/dark-mode.md
skills/creative/excalidraw/references/examples.md
skills/creative/excalidraw/scripts/upload.py