mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 22:32:27 +08:00
docs: add multi-client installation instructions for MCP server
This commit is contained in:
Dayuan Jiang
12
README.md
12
README.md
@@ -97,13 +97,13 @@ Here are some example prompts and their generated diagrams:
|
||||
|
||||
> **Preview Feature**: This feature is experimental and may change.
|
||||
|
||||
Use Next AI Draw.io with AI agents like Claude Desktop and Cursor via MCP (Model Context Protocol).
|
||||
Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
|
||||
|
||||
```bash
|
||||
npx -y @next-ai-drawio/mcp-server
|
||||
```
|
||||
|
||||
### Claude Desktop Configuration
|
||||
### Claude Desktop
|
||||
|
||||
Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
|
||||
|
||||
@@ -118,12 +118,18 @@ Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_
|
||||
}
|
||||
```
|
||||
|
||||
### Claude Code CLI
|
||||
|
||||
```bash
|
||||
claude mcp add drawio -- npx -y @next-ai-drawio/mcp-server
|
||||
```
|
||||
|
||||
Then ask Claude to create diagrams:
|
||||
> "Create a flowchart showing user authentication with login, MFA, and session management"
|
||||
|
||||
The diagram appears in your browser in real-time!
|
||||
|
||||
See the [MCP Server README](./packages/mcp-server/README.md) for more details.
|
||||
See the [MCP Server README](./packages/mcp-server/README.md) for VS Code, Cursor, and other client configurations.
|
||||
|
||||
## Getting Started
|
||||
|
||||
|
||||
@@ -93,7 +93,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
|
||||
|
||||
> **预览功能**：此功能为实验性功能，可能会有变化。
|
||||
|
||||
通过MCP（模型上下文协议）在Claude Desktop和Cursor等AI代理中使用Next AI Draw.io。
|
||||
通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。
|
||||
|
||||
```bash
|
||||
npx -y @next-ai-drawio/mcp-server
|
||||
@@ -114,12 +114,18 @@ npx -y @next-ai-drawio/mcp-server
|
||||
}
|
||||
```
|
||||
|
||||
### Claude Code CLI
|
||||
|
||||
```bash
|
||||
claude mcp add drawio -- npx -y @next-ai-drawio/mcp-server
|
||||
```
|
||||
|
||||
然后让Claude创建图表：
|
||||
> "创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理"
|
||||
|
||||
图表会实时显示在浏览器中！
|
||||
|
||||
详情请参阅[MCP服务器README](../packages/mcp-server/README.md)。
|
||||
详情请参阅[MCP服务器README](../packages/mcp-server/README.md)，了解VS Code、Cursor等客户端配置。
|
||||
|
||||
## 快速开始
|
||||
|
||||
|
||||
@@ -93,7 +93,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
|
||||
|
||||
> **プレビュー機能**：この機能は実験的であり、変更される可能性があります。
|
||||
|
||||
MCP（Model Context Protocol）を介して、Claude DesktopやCursorなどのAIエージェントでNext AI Draw.ioを使用できます。
|
||||
MCP（Model Context Protocol）を介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。
|
||||
|
||||
```bash
|
||||
npx -y @next-ai-drawio/mcp-server
|
||||
@@ -114,12 +114,18 @@ Claude Desktopの設定ファイル（macOSでは`~/Library/Application Support/
|
||||
}
|
||||
```
|
||||
|
||||
### Claude Code CLI
|
||||
|
||||
```bash
|
||||
claude mcp add drawio -- npx -y @next-ai-drawio/mcp-server
|
||||
```
|
||||
|
||||
Claudeにダイアグラムの作成を依頼：
|
||||
> 「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを作成してください」
|
||||
|
||||
ダイアグラムがリアルタイムでブラウザに表示されます！
|
||||
|
||||
詳細は[MCPサーバーREADME](../packages/mcp-server/README.md)をご覧ください。
|
||||
詳細は[MCPサーバーREADME](../packages/mcp-server/README.md)をご覧ください（VS Code、Cursorなどのクライアント設定も含む）。
|
||||
|
||||
## はじめに
|
||||
|
||||
|
||||
@@ -4,17 +4,15 @@ MCP (Model Context Protocol) server that enables AI agents like Claude Desktop a
|
||||
|
||||
**Self-contained** - includes an embedded HTTP server, no external dependencies required.
|
||||
|
||||
## Features
|
||||
|
||||
- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them
|
||||
- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
|
||||
- **Edit Support**: Modify existing diagrams with natural language instructions
|
||||
- **Export**: Save diagrams as `.drawio` files
|
||||
- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net)
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Claude Desktop Configuration
|
||||
```bash
|
||||
npx -y @next-ai-drawio/mcp-server
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
### Claude Desktop
|
||||
|
||||
Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
|
||||
|
||||
@@ -29,37 +27,62 @@ Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_
|
||||
}
|
||||
```
|
||||
|
||||
That's it! The MCP server runs its own embedded HTTP server.
|
||||
### VS Code
|
||||
|
||||
### Use with Claude
|
||||
Add to your VS Code settings (`.vscode/mcp.json` in workspace or user settings):
|
||||
|
||||
1. Restart Claude Desktop after updating config
|
||||
2. Ask Claude to create a diagram:
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"drawio": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@next-ai-drawio/mcp-server"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Cursor
|
||||
|
||||
Add to Cursor MCP config (`~/.cursor/mcp.json`):
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"drawio": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@next-ai-drawio/mcp-server"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Claude Code CLI
|
||||
|
||||
```bash
|
||||
claude mcp add drawio -- npx -y @next-ai-drawio/mcp-server
|
||||
```
|
||||
|
||||
### Other MCP Clients
|
||||
|
||||
Use the standard MCP configuration with:
|
||||
- **Command**: `npx`
|
||||
- **Args**: `["-y", "@next-ai-drawio/mcp-server"]`
|
||||
|
||||
## Usage
|
||||
|
||||
1. Restart your MCP client after updating config
|
||||
2. Ask the AI to create a diagram:
|
||||
> "Create a flowchart showing user authentication with login, MFA, and session management"
|
||||
3. The diagram appears in your browser in real-time!
|
||||
|
||||
## How It Works
|
||||
## Features
|
||||
|
||||
```
|
||||
┌─────────────────┐ stdio ┌─────────────────┐
|
||||
│ Claude Desktop │ <───────────> │ MCP Server │
|
||||
│ (AI Agent) │ │ (this package) │
|
||||
└─────────────────┘ └────────┬────────┘
|
||||
│
|
||||
┌────────▼────────┐
|
||||
│ Embedded HTTP │
|
||||
│ Server (:6002) │
|
||||
└────────┬────────┘
|
||||
│
|
||||
┌────────▼────────┐
|
||||
│ User's Browser │
|
||||
│ (draw.io embed) │
|
||||
└─────────────────┘
|
||||
```
|
||||
|
||||
1. **MCP Server** receives tool calls from Claude via stdio
|
||||
2. **Embedded HTTP Server** serves the draw.io UI and handles state
|
||||
3. **Browser** shows real-time diagram updates via polling
|
||||
- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them
|
||||
- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
|
||||
- **Edit Support**: Modify existing diagrams with natural language instructions
|
||||
- **Export**: Save diagrams as `.drawio` files
|
||||
- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net)
|
||||
|
||||
## Available Tools
|
||||
|
||||
@@ -71,7 +94,30 @@ That's it! The MCP server runs its own embedded HTTP server.
|
||||
| `get_diagram` | Get the current diagram XML |
|
||||
| `export_diagram` | Save diagram to a `.drawio` file |
|
||||
|
||||
## Environment Variables
|
||||
## How It Works
|
||||
|
||||
```
|
||||
┌─────────────────┐ stdio ┌─────────────────┐
|
||||
│ Claude Desktop │ <───────────> │ MCP Server │
|
||||
│ (AI Agent) │ │ (this package) │
|
||||
└─────────────────┘ └────────┬────────┘
|
||||
│
|
||||
┌────────▼────────┐
|
||||
│ Embedded HTTP │
|
||||
│ Server (:6002) │
|
||||
└────────┬────────┘
|
||||
│
|
||||
┌────────▼────────┐
|
||||
│ User's Browser │
|
||||
│ (draw.io embed) │
|
||||
└─────────────────┘
|
||||
```
|
||||
|
||||
1. **MCP Server** receives tool calls from Claude via stdio
|
||||
2. **Embedded HTTP Server** serves the draw.io UI and handles state
|
||||
3. **Browser** shows real-time diagram updates via polling
|
||||
|
||||
## Configuration
|
||||
|
||||
| Variable | Default | Description |
|
||||
|----------|---------|-------------|
|
||||
@@ -81,7 +127,7 @@ That's it! The MCP server runs its own embedded HTTP server.
|
||||
|
||||
### Port already in use
|
||||
|
||||
If port 6002 is in use, the server will automatically try the next available port.
|
||||
If port 6002 is in use, the server will automatically try the next available port (up to 6020).
|
||||
|
||||
Or set a custom port:
|
||||
```json
|
||||
|
||||
Reference in New Issue
Block a user