Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Excalidraw Diagram Generator

Writes .excalidraw JSON with a built-in design system and exports it to PNG/SVG via Kroki or a local CLI.

Design & UIIntermediate★ 185⑂ 18AI score 10/10Last updated: Jul 16, 2026

What it does

  • Turns requests like "draw a diagram", "flowchart", or "architecture chart" into a real .excalidraw JSON file, and proactively offers a visual when you're explaining a system with 3+ components.
  • Two export paths: Kroki API (just curl, SVG only) and excalidraw-brute-export-cli (local Firefox, PNG + SVG). PDF is explicitly unsupported.
  • Ships a full design system: semantic color palette, 28→14px font hierarchy, spacing tables, arrow-style semantics, and layout patterns for flowcharts, architecture, sequence, mind map and swimlane diagrams.
  • Includes a render verification loop — export a PNG, actually look at it, and fix clipped text, overlapping boxes, or arrows slicing through shapes — plus a bounded review loop for user feedback.
  • Can pull AWS/Azure/GCP/UML icons from community .excalidrawlib files via the scripts/excalidraw_lib.py helper (vector items only).

Who it's for

  • Engineers and architects who regularly draw system diagrams for design docs or blog posts.
  • Anyone frustrated by Mermaid's auto-layout who wants explicit control over position and color.
  • PMs and writers who need approachable, non-corporate-looking diagrams for slides.

Examples

  1. "Diagram our auth flow" → generates gateway/auth/database nodes with semantic colors and edge-to-edge arrows, exports a 2x PNG.
  2. "Turn this order pipeline into a flowchart" → ellipse start/end, diamond decisions, Yes-forward / No-down branching at the prescribed spacing.
  3. "Mind-map these ideas" → level-1 branches placed evenly on a radius-280 circle so connector lines never tangle.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Agents365-ai/excalidraw-skill/HEAD/skills/excalidraw-skill/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/excalidraw-skill folder from the GitHub repo Agents365-ai/excalidraw-skill into my ~/.claude/skills/excalidraw/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Agents365-ai/excalidraw-skill.git /tmp/excalidraw-skill && mkdir -p ~/.claude/skills && cp -r /tmp/excalidraw-skill/skills/excalidraw-skill ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/Agents365-ai/excalidraw-skill.git /tmp/excalidraw-skill
  3. Copy the skill into place: mkdir -p ~/.claude/skills && cp -r /tmp/excalidraw-skill/skills/excalidraw-skill ~/.claude/skills/
  4. Verify curl exists: curl --version. If SVG-only output via Kroki is enough, you're done.
  5. For PNG output and visual verification, install the local CLI: npm install -g excalidraw-brute-export-cli then npx playwright install firefox.
  6. On macOS, apply the one-time sed patch from SKILL.md that swaps Control for Meta in the CLI's keyboard shortcuts.
  7. Restart Claude Code and try: "draw an architecture diagram of this project".
View source on GitHub ↗License: MIT