docs: add multi-client installation instructions for MCP server

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
 

docs/README_CN.md

@@ -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等客户端配置。
 
 ## 快速开始
 

docs/README_JA.md

@@ -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などのクライアント設定も含む）。
 
 ## はじめに
 

packages/mcp-server/README.md

@@ -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
+```json
-2. Ask Claude to create a diagram:
+{
+  "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
 
-```
+- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them
-┌─────────────────┐     stdio      ┌─────────────────┐
+- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
-│  Claude Desktop │ <───────────> │   MCP Server    │
+- **Edit Support**: Modify existing diagrams with natural language instructions
-│    (AI Agent)   │               │  (this package) │
+- **Export**: Save diagrams as `.drawio` files
-└─────────────────┘               └────────┬────────┘
+- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net)
-                                           │
-                                  ┌────────▼────────┐
-                                  │ 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
 
 ## 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