mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-10-12 04:29:51 +08:00

Files

T

Dayuan Jiang c774a39c33 feat(mcp-server): drawing guide hints and the user's own drawing rules (#980 )

* feat(mcp-server): add source-reading and clear-canvas hints to the drawing guide

Carry the missing web-prompt sentences into the MCP drawing guide: draw from
a document, image or web page by reading it yourself first, compare image
replications with screenshot_diagram, keep replies short after a successful
draw, compose artistic requests from standard shapes, and clear the canvas by
sending only the two root cells. Replace the "If the diagram is large" bullet
with guidance on choosing create_new_diagram vs edit_diagram.

The server INSTRUCTIONS mention reading files yourself and opening .drawio
files with load_diagram; the create_new_diagram description documents the
clear-canvas call, and its handler reports "Canvas cleared" when the prepared
XML holds only the root cells. Add tests for both and the matching README
lines in the mcp-server and claude-plugin packages.

* feat(mcp-server): append the user's instructions.md to the drawing guide

Read <DRAWIO_DATA_DIR>/instructions.md (default ~/.next-ai-drawio) on
every call and append its first 5000 characters to the drawing guide
under a "## Custom Instructions" heading, for start_session,
get_drawing_guide and the diagram-workflow prompt. start_session now
tells the model where the file lives. Document the feature in both
READMEs and cover it with unit and server-wiring tests.

* fix(mcp-server): review fixes for drawing guide text and custom instructions file

* fix(mcp-server): Codex review fixes for the guide and custom instructions

- Report "Canvas cleared" only for a one-page document; several empty
  pages get the page summary
- Build the instructions.md path with path.join (Windows separators)
- Keep the 15000-character guide budget in the wiring test
- Plugin README: DRAWIO_DATA_DIR also holds instructions.md

2026-10-11 20:04:59 +09:00

4.6 KiB

Raw Blame History

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

claude --plugin-dir /path/to/packages/claude-plugin

Or add the MCP server directly:

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
`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` 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

How It Works

Claude Code <--stdio--> MCP Server <--http--> Browser (draw.io)

Ask Claude to create a diagram
Claude calls start_session to open a browser window
Claude generates diagram XML and sends it to the browser
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)
`DEBUG`	unset	Set to `true` to log debug messages

License

Apache-2.0

4.6 KiB Raw Blame History