skills.rest
wesbragagt
wesbragagtCOMMUNITY
Explore all skills by this author →
Website𝕏@wesbragagtGitHub

excalidraw

Create hand-drawn Excalidraw diagrams from JSON using the excalidraw-cli command-line tool.

1|Updated May 4, 2026
Search Tags:#cli#json#excalidraw#flowchart#visualization#diagram#architecture diagram
One-click install
npx skills add https://github.com/wesbragagt/nixos-config --skill excalidraw-wesbragagt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/wesbragagt/nixos-config/tree/main/home/skills/excalidraw
Command: npx skills add https://github.com/wesbragagt/nixos-config --skill excalidraw-wesbragagt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires excalidraw-cli.

What problem does it solve? Manually drawing diagrams in Excalidraw is slow and hard to automate. This Skill lets you generate hand-drawn style diagrams, flowcharts, and architecture visuals directly from JSON, producing .excalidraw files and shareable URLs without opening a browser. ## Core Features & Use Cases - JSON-to-Diagram Generation: Define shapes, arrows, labels, and text in JSON and render them via excalidraw-cli with sensible hand-drawn defaults (roughness, roundness, Excalifont). - Arrow Bindings & Layout Guidance: Connect shapes with bound arrows, background zones, camera viewport control, and a curated color palette for consistent visuals. - Dark Mode & Checkpoints: Built-in dark mode patterns and checkpoint save/restore to iteratively build on previous diagrams. - Use Case: Ask for a system architecture diagram of your web app and receive a ready-to-open .excalidraw file plus a shareable Excalidraw URL. ## Quick Start Ask the assistant to create an Excalidraw diagram of your system architecture or flowchart and export it as a shareable URL.

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 from JSON?▼

Run excalidraw create with a JSON array of elements, either inline via --json, from a file, or piped through stdin. The CLI outputs a .excalidraw file that you can open in Excalidraw or export to a shareable URL with excalidraw export.

How do I connect shapes with arrows in Excalidraw JSON?▼

Add startBinding and endBinding to the arrow element referencing each shape's id and a fixedPoint like [1, 0.5] for the right edge. Also register the arrow in each shape's boundElements array so the connection stays attached when shapes move.

Does excalidraw-cli support dark mode diagrams?▼

Yes. Add a large dark background rectangle as the first element, then use dark fill colors like #1e3a5f for shapes and light strokeColor values like #e5e5e5 for text labels. The Skill documents the full dark palette.

Can I edit or build on a previous Excalidraw diagram?▼

Yes, using checkpoints. Save a diagram with excalidraw checkpoint save, then use the restoreCheckpoint pseudo-element in new JSON to load it, and the delete pseudo-element to remove specific elements by id.

Why does my Excalidraw text or layout look wrong?▼

Common causes are font sizes below 14, missing fillStyle solid when using backgroundColor, or arrow points given as absolute coordinates instead of offsets from the arrow's x, y. Also avoid emoji, which the Excalidraw font cannot render.

Related Skills

Explore More Design & Creative Skills→
camoacamoa
32

diagram-generator

Generate Mermaid diagrams for system architecture and data flow.

Community
Intermediate
wwwillottwwwillott

excalidraw

Convert Excalidraw element JSON into .excalidraw diagram files.

Community
Advanced
CuriousLearnerCuriousLearner
27

architecture-documenter

Document system architecture and technical decisions with diagrams and ADRs.

Community
Advanced
neverpreparedneverprepared

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Official
Intermediate