{
  "markdown": "# Excalidraw Plugin for Claude Code\n\nA Claude Code plugin that generates architecture diagrams as Excalidraw files from natural language descriptions. Produces `.excalidraw`, `.svg`, and `.png` outputs with automatic layout via dagre.\n\n![Example Output](https://raw.githubusercontent.com/yogsma/excalidraw-plugin/main/examples/web-app-architecture.png)\n\n## Installation\n\n### From Marketplace (recommended)\n\nAdd the marketplace and install the plugin:\n\n```\n/plugin marketplace add yogsma/excalidraw-plugin\n/plugin install excalidraw@yogsma-plugins\n```\n\nThen reload plugins to activate:\n\n```\n/reload-plugins\n```\n\n### Local Development\n\nTo test the plugin locally without installing:\n\n```bash\nclaude --plugin-dir /path/to/excalidraw-plugin\n```\n\nDependencies (`@dagrejs/dagre`, `sharp`) install automatically on first use.\n\n## Usage\n\n### `/excalidraw:draw` Command\n\n```\n/excalidraw:draw React frontend connecting to an Express API with PostgreSQL and Redis cache\n```\n\nThis generates three files in your working directory:\n- `web-application.excalidraw` — editable in [excalidraw.com](https://excalidraw.com)\n- `web-application.svg` — scalable vector graphic\n- `web-application.png` — 2x resolution raster image\n\n### `excalidraw:diagram-from-code` Agent\n\nThe plugin includes an autonomous agent that analyzes your codebase and generates an architecture diagram automatically. It can be selected from the `/agents` menu or triggered automatically when you ask Claude to diagram a codebase. It discovers services, databases, queues, and their connections by examining:\n\n- Package manifests (`package.json`, `go.mod`, etc.)\n- Docker configurations\n- Database connection strings and ORM configs\n- HTTP clients and route definitions\n- Message queue clients\n\n## How It Works\n\n```\nNatural Language → Claude → IR JSON → dagre layout → .excalidraw → SVG + PNG\n```\n\n1. Claude parses your description into an intermediate representation (IR) JSON\n2. `generate.mjs` builds a dagre graph, runs layout, and converts to Excalidraw elements\n3. `export.mjs` renders the Excalidraw file to SVG and rasterizes to PNG via sharp\n\n## IR Format\n\nThe intermediate representation that Claude generates:\n\n```json\n{\n  \"title\": \"System Architecture\",\n  \"direction\": \"TB\",\n  \"nodes\": [\n    { \"id\": \"frontend\", \"label\": \"Frontend\\n(React)\", \"type\": \"component\", \"color\": \"blue\" },\n    { \"id\": \"api\", \"label\": \"API Server\\n(Express)\", \"type\": \"component\", \"color\": \"green\" },\n    { \"id\": \"db\", \"label\": \"PostgreSQL\", \"type\": \"database\", \"color\": \"orange\" }\n  ],\n  \"edges\": [\n    { \"from\": \"frontend\", \"to\": \"api\", \"label\": \"REST\" },\n    { \"from\": \"api\", \"to\": \"db\", \"label\": \"SQL\" }\n  ],\n  \"groups\": [\n    { \"id\": \"backend\", \"label\": \"Backend\", \"members\": [\"api\", \"db\"] }\n  ]\n}\n```\n\n## Color Palette\n\n| Color  | Background | Stroke   | Use Case           |\n|--------|-----------|----------|--------------------|\n| blue   | #a5d8ff   | #1971c2  | Frontend, UI       |\n| green  | #b2f2bb   | #2f9e44  | APIs, Services     |\n| orange | #ffd8a8   | #e8590c  | Databases, Storage |\n| red    | #ffc9c9   | #e03131  | Auth, Security     |\n| purple | #d0bfff   | #7048e8  | Infrastructure     |\n| yellow | #ffec99   | #f08c00  | Queues, Events     |\n| gray   | #dee2e6   | #495057  | External / 3rd party |\n\n## Node Types\n\n- **component** — rounded rectangle (general services, apps)\n- **database** — databases, data stores, caches\n- **queue** — message queues, event buses\n- **user** — users, actors, clients\n- **cloud** — cloud services, external APIs\n\n## Layout Directions\n\n- `TB` — top-to-bottom (default, best for hierarchical architectures)\n- `LR` — left-to-right (best for data pipelines and sequences)\n\n## Plugin Structure\n\n```\n├── .claude-plugin/\n│   ├── plugin.json                     # Plugin manifest\n│   └── marketplace.json                # Marketplace distribution manifest\n├── commands/draw.md                    # /excalidraw:draw slash command\n├── agents/diagram-from-code.md         # Codebase analysis agent\n└── skills/excalidraw/\n    ├── SKILL.md                        # Auto-triggering skill\n    ├── references/\n    │   ├── excalidraw-schema.md        # Excalidraw v2 format reference\n    │   └── element-catalog.md          # Node types & color palette\n    └── scripts/\n        ├── package.json                # Dependencies\n        ├── generate.mjs                # IR → Excalidraw JSON (dagre layout)\n        └── export.mjs                  # Excalidraw → SVG + PNG\n```\n\n## Limitations\n\n- SVG export uses clean geometric shapes (not hand-drawn style) — open the `.excalidraw` file in Excalidraw for the sketchy look\n- Text width is estimated by character count, not font metrics\n- Large diagrams (20+ nodes) may be cluttered — use groups to manage complexity\n- `sharp` requires native compilation; falls back to SVG-only if unavailable\n\n## Privacy Policy\n\nThis plugin processes all data locally on your machine. It does not collect, store, or transmit any user data. No external network requests are made — the diagram generation and export scripts run entirely offline. No analytics, telemetry, or tracking of any kind is included.\n\n## License\n\nMIT\n",
  "bytes": 5133,
  "sha": "6f2c14aae36edc26af70d1503eedeb5d548b4e7fcf07bde537453f5b7eed2fee",
  "repo_slug": "yogsma/excalidraw-plugin",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_yogsma_excalidraw_plugin_excalidraw_plug_207cbdbc/readme"
}