{
  "markdown": "# Excalidraw Toolkit\n\nAn AI-powered diagramming toolkit for Claude Code. Say **\"diagram this repo\"** and watch your codebase turn into an architecture diagram on a live Excalidraw canvas.\n\n```\n> diagram this repo\n\nI found 6 components and 5 connections:\n  - Next.js Frontend → API Routes (REST)\n  - API Routes → Prisma ORM → PostgreSQL (SQL)\n  - API Routes → NextAuth (auth) + Stripe API (payments)\n\nDoes this look right?\n\n> looks good\n\n[Building diagram on live canvas...]\n```\n\n## Install\n\n```bash\nnpx excalidraw-toolkit init\nnpx excalidraw-toolkit start\n```\n\nTwo commands. `init` copies skills to `~/.claude/plugins/` and configures the MCP server. `start` clones, builds, and launches the canvas server (first run), then opens your browser.\n\nRestart Claude Code and try: **\"diagram this repo\"**\n\nVerify setup with:\n\n```bash\nnpx excalidraw-toolkit doctor\n```\n\n<details>\n<summary>Alternative: install via Claude Code plugin marketplace</summary>\n\n```bash\n/plugin marketplace add edwingao28/excalidraw-skill\n/plugin install excalidraw@excalidraw-skill\n```\n\n</details>\n\n## What You Get\n\n### Auto-Diagram — Zero-Config Codebase Visualization\n\nJust say **\"diagram this repo\"**. No description needed.\n\nThe auto-diagram skill runs a 6-phase pipeline:\n1. **Detect** project type (monorepo, microservices, standard app) and framework (Next.js, Django, Go, Rails, etc.)\n2. **Discover** components (frontend, API routes, database, queues, cache, auth, external services)\n3. **Map** connections between components (REST, SQL, gRPC, events, imports)\n4. **Verify** with you before drawing — presents a summary, asks for confirmation\n5. **Choose layout** (vertical flow, horizontal pipeline, hub-and-spoke, or zoned modules)\n6. **Generate** the diagram on the live canvas with color-coded components\n\nWorks with any language. Context budget prevents blowout on large codebases.\n\n### Agentic Self-Critique\n\nEvery diagram goes through an automatic quality check before you see it:\n\n1. **Snapshot** the canvas for rollback safety\n2. **Geometric validation** via `query_elements` — detects overlapping shapes, cramped spacing, broken zones\n3. **Visual validation** via screenshot — checks arrow labels, text readability, title, centering\n4. **Auto-fix** up to 2 rounds. If fixes make things worse, rolls back to the snapshot\n\nYou never see a broken diagram. The self-critique loop catches layout issues that would otherwise require manual tweaking.\n\n### Described Diagrams\n\nWhen you know what you want, describe it:\n\n```\n\"Draw a microservices architecture with: React frontend, API Gateway,\nAuth Service, User Service, Order Service, RabbitMQ, PostgreSQL, Redis\"\n```\n\nOr trace data flows:\n\n```\n\"Trace how the auth token flows from login to API request to database query\"\n```\n\nOr convert from Mermaid:\n\n```\n\"Create an excalidraw diagram from this mermaid:\ngraph TD; A[Frontend] -->|REST| B[API]; B -->|SQL| C[Database]\"\n```\n\n## Examples\n\nSame prompt, two renderers: **Markdown** (Mermaid via `create_from_mermaid`) vs **Excalidraw** (native canvas via `batch_create_elements`).\n\n### Microservices Architecture\n\n| Markdown | Excalidraw |\n|:---:|:---:|\n| ![Markdown](examples/microservices-markdown.png) | ![Excalidraw](examples/microservices-excalidraw.png) |\n\n### CI/CD Pipeline\n\n| Markdown | Excalidraw |\n|:---:|:---:|\n| ![Markdown](examples/cicd-pipeline-markdown.png) | ![Excalidraw](examples/cicd-pipeline-excalidraw.png) |\n\n### Event-Driven System\n\n| Markdown | Excalidraw |\n|:---:|:---:|\n| ![Markdown](examples/event-driven-markdown.png) | ![Excalidraw](examples/event-driven-excalidraw.png) |\n\n### Data Pipeline\n\n| Markdown | Excalidraw |\n|:---:|:---:|\n| ![Markdown](examples/data-pipeline-markdown.png) | ![Excalidraw](examples/data-pipeline-excalidraw.png) |\n\n## Architecture\n\nThe toolkit has three layers — only the first is bundled:\n\n| Layer | What | Bundled? |\n|-------|------|----------|\n| **Skills** (this package) | Markdown prompts that guide Claude's diagram generation | Yes |\n| **MCP Server** ([mcp-excalidraw-server](https://github.com/yctimlin/mcp_excalidraw)) | Bridge between Claude and the Excalidraw canvas — provides `batch_create_elements`, `get_canvas_screenshot`, etc. | No — auto-downloaded via `npx -y` on first use |\n| **Canvas Server** ([mcp_excalidraw-canvas](https://github.com/yctimlin/mcp_excalidraw)) | Live Excalidraw editor running in your browser at localhost:3000 | No — auto-cloned and built on first `npx excalidraw-toolkit start` |\n\n![Architecture](examples/architecture.png)\n\n## How It Works\n\nTwo skills, one toolkit:\n\n| Skill | Triggers On | Does |\n|-------|-------------|------|\n| **auto-diagram** | \"diagram this repo\", \"visualize the architecture\" | Analyzes codebase, discovers components, generates diagram |\n| **excalidraw** | \"draw a diagram of X\", user provides description/sample | Renders user-specified diagrams with precise layout control |\n\nBoth skills use MCP tools to draw on a live Excalidraw canvas:\n\n| Tool | Purpose |\n|------|---------|\n| `batch_create_elements` | Create all shapes + arrows in one call |\n| `get_canvas_screenshot` | Visual verification after each step |\n| `query_elements` | Geometric validation for self-critique |\n| `snapshot_scene` / `restore_snapshot` | Rollback safety during self-critique |\n| `export_to_image` | Save as PNG or SVG |\n| `export_scene` | Save as editable `.excalidraw` file |\n| `export_to_excalidraw_url` | Generate a shareable link |\n\n## Color Palette\n\nEvery component type gets a consistent color:\n\n| Component | Background | Stroke |\n|-----------|------------|--------|\n| Frontend/UI | `#a5d8ff` | `#1971c2` |\n| Backend/API | `#d0bfff` | `#7048e8` |\n| Database | `#b2f2bb` | `#2f9e44` |\n| AI/ML | `#e599f7` | `#9c36b5` |\n| Queue/Event | `#fff3bf` | `#fab005` |\n| External API | `#ffc9c9` | `#e03131` |\n| Storage | `#ffec99` | `#f08c00` |\n| Cache | `#ffe8cc` | `#fd7e14` |\n| Zone/Group | `#e9ecef` | `#868e96` |\n\nCloud-specific palettes (AWS, Azure, GCP, Kubernetes) are included in `references/colors.md`.\n\n## CLI Commands\n\n```bash\nnpx excalidraw-toolkit init        # install skills + configure MCP server\nnpx excalidraw-toolkit start       # clone + build + start canvas server + open browser\nnpx excalidraw-toolkit stop        # stop canvas server\nnpx excalidraw-toolkit update      # re-install (overwrites existing)\nnpx excalidraw-toolkit uninstall   # remove skills + MCP config\nnpx excalidraw-toolkit doctor      # check installation health\nnpx excalidraw-toolkit version     # print version\n```\n\n## Compatible MCP Servers\n\nAny Excalidraw MCP server exposing the core tools works. Register under key `\"excalidraw\"`.\n\n| Package | Tools | Install |\n|---------|-------|---------|\n| [`mcp-excalidraw-server`](https://github.com/yctimlin/mcp_excalidraw) (default) | 26 | `npx -y mcp-excalidraw-server` |\n| [`excalidraw-mcp-server`](https://github.com/debu-sinha/excalidraw-mcp-server) | 16 | `npx -y excalidraw-mcp-server` |\n\n## Requirements\n\n- [Claude Code](https://docs.anthropic.com/en/docs/claude-code) CLI\n- Node.js >= 18\n- Git (for cloning canvas server on first `start`)\n- A browser (canvas opens automatically at http://localhost:3000)\n\n## Credits\n\nCreated by [@edwingao28](https://github.com/edwingao28) with Claude Code.\n\n## License\n\nMIT\n",
  "bytes": 7241,
  "sha": "d8e5f4a90d5e47f8fc48d103a1614d62d0289e39a8505b69896137374263391f",
  "repo_slug": "edwingao28/excalidraw-toolkit",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_edwingao28_excalidraw_toolkit_excalidraw_cca9df2b/readme"
}