一个Claude代码技能，可以将任何文本提示转换成手绘的Excalidraw风格图示，本地保存为SVG + PNG。没有浏览器，没有Puppeteer，没有MCP服务器。

它的作用

用通俗易懂的英语描述一张图，并在一秒内获得本地手绘草图：

• 流程图——决策树、流程、用户旅程
• 架构图 — 服务、数据库、API、连接
• 系统设计 — 组件、数据流、部署管道

输出采用正宗Excalidraw风格：标签用Virgil手写字体，注释用Cascadia单空间，粗略手绘形状用粗糙字体。

安装

用途

安装后，在Claude代码中触发该技能：

或者自然地描述你想要的：

输出

默认情况下，图表会以 SVG 和 PNG 格式（2 倍分辨率）保存到 ~/Downloads/Excalidraw/。

要更改输出目录，请编辑 OUTPUT_DIR 中的 OUTPUT_DIR 行：

支持元素

Excalidraw Skill for Claude Code

A Claude Code skill that transforms any text prompt into a hand-drawn Excalidraw-style diagram, saved as SVG + PNG locally. No browser, no Puppeteer, no MCP server.

What it does

Describe a diagram in plain English and get a hand-drawn sketch rendered locally in under a second:

• Flowcharts — decision trees, process flows, user journeys
• Architecture diagrams — services, databases, APIs, connections
• System designs — components, data flows, deployment pipelines

Output uses the authentic Excalidraw look: Virgil handwritten font for labels, Cascadia monospace for annotations, and roughjs for sketchy hand-drawn shapes.

Install

# Clone into your Claude Code skills directory
git clone https://github.com/aref-vc/excalidraw-skill.git ~/.claude/skills/excalidraw

# Install renderer dependencies
cd ~/.claude/skills/excalidraw/scripts && npm install

Usage

Once installed, trigger the skill in Claude Code:

/excalidraw user -> API gateway -> auth service -> database

Or describe what you want naturally:

draw me a hand-drawn architecture diagram with a load balancer,
three API servers, a Redis cache, and a PostgreSQL database

Output

By default, diagrams are saved to ~/Downloads/Excalidraw/ as both SVG and PNG (2x resolution).

To change the output directory, edit the OUTPUT_DIR line in SKILL.md:

OUTPUT_DIR: ~/Documents/My Diagrams/

Supported Elements

Features

Inline annotations

Add technical details directly on shapes with the annotation property. Annotations render in monospace below the label and auto-truncate with ellipsis if they exceed the shape bounds.

{
  "type": "rectangle",
  "label": "API Gateway",
  "annotation": "REST + WebSocket | Rate limited | JWT auth",
  "width": 200, "height": 100
}

Section labels

Group related shapes in zone rectangles with sectionLabel. The label renders bold at the top-left corner, inset from the edge.

{
  "type": "rectangle",
  "x": 30, "y": 80,
  "width": 500, "height": 220,
  "fill": "#e7f5ff",
  "sectionLabel": "API LAYER"
}

Title with subtitle