mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-12 04:29:51 +08:00
Dayuan Jiang
8ab837679e
* feat(mcp-server): load .drawio.svg (Editable SVG) files with load_diagram
* feat(mcp-server): summarize the user's manual changes per cell in stale rejections and get_diagram
* feat(mcp-server): XML reference for tables, layers and groups via get_drawing_guide topic
* feat(mcp-server): DRAWIO_LANG, DRAWIO_UI and DRAWIO_DARK for the preview page
Three host-config environment variables fix the language, theme and
dark mode of the draw.io editor embedded in the preview page. The new
drawio-themes module holds the theme list and draw.io's locale names
(zh-hant becomes zh-tw); drawioEmbedParams() in http-server.ts builds
the variable tail of the iframe query and getHtmlPage fills the new
{{DRAWIO_PARAMS}} placeholder. Without the variables the page keeps
sending dark=auto as before. Both READMEs document the variables.
* feat(mcp-server): report XML cut off inside a cell and explain drawing in parts
create_new_diagram and add_page now detect bare-cell XML that ends inside an
unfinished mxCell (XML comments stripped first) and return an error with the
last 300 characters of the input, asking the model to resend from that cell or
continue with edit_diagram add operations. isMxCellXmlComplete moves from
lib/utils.ts into packages/mcp-server/src/new-diagram.ts and is re-exported
from lib/utils.ts for the web app. The drawing guide gains a "Large diagrams"
paragraph and the INSTRUCTIONS edit_diagram line mentions drawing in parts.
* fix(mcp-server): review fixes for load .drawio.svg, change summary, XML reference, draw.io embed options, truncation message
* fix(mcp-server): Codex review fixes for .drawio.svg loading, change summary, references, embed options and truncation
- Truncation check: a closing tag such as </mxCell/> that the auto-fix
repairs is no cut, and input without any cell keeps the validator's
message
- Guide: a call rejected as cut off drew nothing, so all of its cells are
sent again; the topic pointer is its own paragraph
- Change summary: decoded labels (no or merged words from <br>),
a fast path for equal XML, and "the order of the cells changed" as
the fallback
- DRAWIO_UI in any case, DRAWIO_LANG=zh-Hans maps to draw.io's zh
- load_diagram and export_diagram describe which files load again
137 lines
5.3 KiB
Markdown
137 lines
5.3 KiB
Markdown
# Next AI Draw.io - Claude Code Plugin
|
|
|
|
AI-powered Draw.io diagram generation with real-time browser preview for Claude Code.
|
|
|
|
## Installation
|
|
|
|
### From Plugin Directory (Coming Soon)
|
|
|
|
Once approved, install via:
|
|
```
|
|
/plugin install next-ai-drawio
|
|
```
|
|
|
|
### Manual Installation
|
|
|
|
```bash
|
|
claude --plugin-dir /path/to/packages/claude-plugin
|
|
```
|
|
|
|
Or add the MCP server directly:
|
|
```bash
|
|
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
|
|
```
|
|
|
|
## Features
|
|
|
|
- **Real-time Preview**: Diagrams appear and update in your browser as Claude creates them
|
|
- **Drawing Rules and Shape Libraries**: Claude gets the web app's layout and style rules and the icon docs for AWS, Azure, GCP, Kubernetes and more
|
|
- **Self-check**: Claude can take a screenshot of the rendered diagram and fix what looks wrong
|
|
- **Draw from Your Files**: ask Claude to draw from a document, image or web page; it reads the source with its own tools and draws. Existing .drawio files open with load_diagram
|
|
- **Version History**: Restore one of the last 20 versions from the **History** button, shown as thumbnails
|
|
- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
|
|
- **Edit Support**: Modify existing diagrams with natural language instructions, including your own edits in the browser
|
|
- **Export**: Save diagrams as `.drawio`, `.png`, `.svg`, or `.drawio.svg` files
|
|
- **Auto-save**: Each diagram is saved to `~/.next-ai-drawio/`, so `claude --resume` can pick it up again
|
|
- **Custom Instructions**: keep your own drawing rules in `~/.next-ai-drawio/instructions.md` (for example "Always draw in minimal style"); they are appended to the drawing guide on every call
|
|
- **Self-contained**: Embedded server, no external dependencies required
|
|
|
|
## Use Case Examples
|
|
|
|
### 1. Create Architecture Diagrams
|
|
|
|
```
|
|
Generate an AWS architecture diagram with Lambda, API Gateway, DynamoDB,
|
|
and S3 for a serverless REST API
|
|
```
|
|
|
|
### 2. Flowchart Generation
|
|
|
|
```
|
|
Create a flowchart showing the CI/CD pipeline: code commit -> build ->
|
|
test -> staging deploy -> production deploy with approval gates
|
|
```
|
|
|
|
### 3. System Design Documentation
|
|
|
|
```
|
|
Design a microservices e-commerce system with user service, product catalog,
|
|
shopping cart, order processing, and payment gateway
|
|
```
|
|
|
|
### 4. Cloud Architecture (AWS/GCP/Azure)
|
|
|
|
```
|
|
Generate a GCP architecture diagram with Cloud Run, Cloud SQL, and
|
|
Cloud Storage for a web application
|
|
```
|
|
|
|
### 5. Sequence Diagrams
|
|
|
|
```
|
|
Create a sequence diagram showing OAuth 2.0 authorization code flow
|
|
between user, client app, auth server, and resource server
|
|
```
|
|
|
|
### 6. Draw From a Document
|
|
|
|
```
|
|
Read docs/architecture.md and draw the system as a diagram
|
|
```
|
|
|
|
### 7. Recreate a Sketch
|
|
|
|
```
|
|
Recreate the whiteboard photo at ~/Desktop/sketch.jpg as a clean draw.io diagram
|
|
```
|
|
|
|
## Available Tools
|
|
|
|
| Tool | Description |
|
|
|------|-------------|
|
|
| `start_session` | Opens browser with real-time diagram preview; the result includes the drawing rules. Pass `session_id` to continue a saved diagram |
|
|
| `list_saved_diagrams` | List the auto-saved diagrams of earlier sessions, newest first, with their pages |
|
|
| `get_drawing_guide` | Return the drawing rules again |
|
|
| `get_shape_library` | Return the shapes and icon styles of a library such as `aws4` |
|
|
| `create_new_diagram` | Create a new diagram from XML |
|
|
| `load_diagram` | Load a `.drawio` or `.drawio.svg` file from disk |
|
|
| `edit_diagram` | Edit diagram by ID-based operations; all or nothing |
|
|
| `get_diagram` | Get the current diagram XML |
|
|
| `screenshot_diagram` | Return a PNG of a page so Claude can check the result |
|
|
| `export_diagram` | Save diagram to a `.drawio`, `.png`, `.svg`, or `.drawio.svg` file |
|
|
| `list_pages`, `add_page`, `rename_page`, `delete_page` | Work with multi-page diagrams |
|
|
| `restore_version` | Undo: go back to an earlier version from History (redo is possible too) |
|
|
|
|
## How It Works
|
|
|
|
```
|
|
Claude Code <--stdio--> MCP Server <--http--> Browser (draw.io)
|
|
```
|
|
|
|
1. Ask Claude to create a diagram
|
|
2. Claude calls `start_session` to open a browser window
|
|
3. Claude generates diagram XML and sends it to the browser
|
|
4. You see the diagram update in real-time!
|
|
|
|
## Configuration
|
|
|
|
| Variable | Default | Description |
|
|
|----------|---------|-------------|
|
|
| `PORT` | `6002` | Port for the embedded HTTP server |
|
|
| `DRAWIO_BASE_URL` | `https://embed.diagrams.net` | Base URL for draw.io (for self-hosted deployments) |
|
|
| `DRAWIO_DATA_DIR` | `~/.next-ai-drawio` | Folder for auto-saved diagrams and your `instructions.md`; `off` turns auto-save off (`instructions.md` is then read from the default folder) |
|
|
| `DRAWIO_LANG` | unset | Language of the draw.io editor, such as `en`, `zh`, `zh-tw`, `ja` or `de`. Unset, draw.io chooses (the browser language on `embed.diagrams.net`, English on a self-hosted draw.io) and the user can change it under **Extras > Language** |
|
|
| `DRAWIO_UI` | unset | draw.io theme: `kennedy`, `atlas`, `dark`, `min`, `sketch` or `simple`. Unset, the user picks one under **Extras > Theme** |
|
|
| `DRAWIO_DARK` | `auto` | Dark mode of the draw.io editor: `auto` follows the system, `1` forces dark, `0` forces light |
|
|
| `DEBUG` | unset | Set to `true` to log debug messages |
|
|
|
|
## Links
|
|
|
|
- [Homepage](https://next-ai-drawio.jiang.jp)
|
|
- [GitHub Repository](https://github.com/DayuanJiang/next-ai-draw-io)
|
|
- [MCP Server Documentation](https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server)
|
|
|
|
## License
|
|
|
|
Apache-2.0
|