Maintainer of this skill?
by ddkbs
A layout engine for LLM diagrams: Claude says what to draw, Sketchy figures out where. Hand-drawn, interactive, no overlapping boxes.
# Add to your Claude Code skills
git clone https://github.com/ddkbs/sketchyGuides for using mcp servers skills like sketchy.
See how sketchy compares with popular alternatives.
sketchy is an open-source mcp servers skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by ddkbs. A layout engine for LLM diagrams: Claude says what to draw, Sketchy figures out where. Hand-drawn, interactive, no overlapping boxes. It has 69 GitHub stars.
sketchy's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/ddkbs/sketchy" and add it to your Claude Code skills directory (see the Installation section above).
sketchy is primarily written in TypeScript. It is open-source under ddkbs on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other MCP Servers skills you can browse and compare side by side. Open the MCP Servers category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh sketchy against similar tools.
No comments yet. Be the first to share your thoughts!
Top skills in this category by stars
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Sketchy lets Claude draw while it explains: clean, hand-drawn, interactive diagrams rendered right next to the answer. It works in the Claude chat as a skill and in Claude Code as an MCP server.
Claude decides what to draw and label. Sketchy decides where: a part library with named anchor points and automatic layout. Claude never computes coordinates, so drawings come out precise and consistent every time.
Ask "What happens when I open a web page?" and Claude draws the whole path, then walks you through it. Each step circles what matters in red pen and fades the rest. Use the buttons or the arrow keys.
Sketchy is not limited to hardware. Structure, flow, comparison and metaphor patterns cover any topic, from transformers to TCP.
Ask "Explain my repo". Claude reads the code and draws modules, folders and data flow. Click a box to open the file in VS Code, Cursor, Windsurf or Zed; hover to see what it does.
Ask "How is my sketch wired?". Claude reads pinMode, digitalWrite and friends, places real parts (50 boards, sensors, displays and modules from wokwi-elements) and connects pins by name. Sketchy routes the wires and places the callouts.
Claude finds a freely licensed photo (Wikimedia Commons, Openverse), and a vision model running on your computer (Florence-2) locates the parts and printed text to label. Attribution is always shown.
Where do you use Claude? Sketchy comes two ways, and both can be installed side by side:
The skill draws right in the chat, with no server:
sketchy-skill-<version>.zip from the latest release.Claude writes the scene, and the chat's inline visualization loads Sketchy's browser bundle from jsDelivr, which serves it from this repository's cdn branch. The skill follows the current minor version, so it picks up fixes without being uploaded again. To run exactly the code you reviewed, use sketchy-skill-<version>-pinned.zip instead: it loads the bundle from a fixed commit of the cdn branch and checks it with a Subresource Integrity hash, so the browser refuses any other file. It does not pick up fixes; upload the next pinned zip to update. Photo labeling and opening files from a drawing need your computer, so they stay in the desktop extension.
.mcpb file for your platform from the latest release (macOS on Apple Silicon, Windows or Linux).The Chat tab does not display views from locally installed extensions; use the skill above there.
The photo-labeling model is not part of the download. The first time Claude labels a photo, Sketchy asks you to pick a model size:
| Model | Download | Memory | Notes |
|---|---|---|---|
| Small | ~280 MB | ~1 GB | Recommended. Printed text, distinct parts |
| Medium | ~830 MB | ~2.5 GB | Better grounding of small parts |
| Large | ~3.1 GB | ~4.5 GB | Most precise |
The terminal claude does not use desktop extensions, so register Sketchy once for all your projects:
git clone https://github.com/ddkbs/sketchy.git
cd sketchy && npm install && npm run build
claude mcp add sketchy --scope user -- node "$PWD/dist/index.js"
Run claude mcp list to check that it is connected.
Sketchy is a standard MCP server and works in any client that supports MCP Apps:
{
"mcpServers": {
"sketchy": {
"command": "node",
"args": ["/path/to/sketchy/dist/index.js"],
"env": { "SKETCHY_EDITOR": "cursor" }
}
}
}
.ino fileThe same patterns are available as prompts: explain-structure, explain-flow, compare, metaphor, explain-repo and explain-circuit.
Claude describes the scene (extension: tools like sketch, place_part, label;
skill: the same scene as JSON in an inline widget)
↓
Scene: nodes, groups, parts, wires, labels, photos, steps — no coordinates
↓
Layout engine (elkjs): positions, orthogonal routing, collision-free callouts
↓
Viewer: hand-drawn rendering with rough.js, hover, steps, export
Every feature fills the same scene, and a single viewer renders it. The visual style lives in the renderer, so every drawing looks consistent no matter what Claude asks for. The extension runs layout in its server process and shows the viewer as an MCP App; the skill runs the same code in the browser from a bundle on jsDelivr.
| Tool | Purpose |
|---|---|
sketch |
Draw a whole scene in one call, in the compact line syntax |
search_parts |
Electronic part types and their pins |
find_image, locate, choose_model |
Photo search, local grounding, model setup |
A scene is a few short lines: browser Browser @globe, browser -> server HTTPS, step Request: The browser asks | browser browser->server. Setting SKETCHY_FORMAT=json restores the JSON sketch tool and the incremental tools of earlier versions (add_node, add_edge, place_part, label, render, …).
Ask Claude to change a drawing ("add the cache and the call back to the router") and it sends the scene again with the same ids. Sketchy keeps the order and places of everything the earlier drawing already showed and fits the new parts in around them, so before and after stay comparable, also when a back-edge closes a cycle.
Does a drawing cost more than a text answer? We asked Claude Sonnet to explain five topics (DNS, git branches, transformers, the TLS handshake, an Arduino button circuit), in plain text and with Sketchy, and read the exact usage Claude Code reports. Version 0.1.6 introduced the compact scene format; the JSON column is the format before it.
| Average per answer, fresh conversation | Plain text | Sketchy, JSON (≤ 0.1.5) | Sketchy, compact (0.1.6) |
|---|---|---|---|
| Output tokens (what Claude writes) | 962 | 1,168 | 686 (−29% vs. text) |
| Tool definitions | – | ~4,100 | ~500 |
| Cost on Sonnet list prices | ~$0.034 | ~$0.059 | ~$0.043 |
Over a whole session the compact format is cheaper than plain text. Six questions in a row, each variant in its