docs: add MCP server section to README (preview feature)

This commit is contained in:
Dayuan Jiang
2025-12-17 12:31:42 +09:00
parent c0952d6170
commit f6eeeb0d5b
4 changed files with 102 additions and 0 deletions

View File

@@ -26,6 +26,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
- [目录](#目录)
- [示例](#示例)
- [功能特性](#功能特性)
- [MCP服务器预览](#mcp服务器预览)
- [快速开始](#快速开始)
- [在线试用](#在线试用)
- [使用Docker运行推荐](#使用docker运行推荐)
@@ -88,6 +89,38 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
- **云架构图支持**专门支持生成云架构图AWS、GCP、Azure
- **动画连接器**:在图表元素之间创建动态动画连接器,实现更好的可视化效果
## MCP服务器预览
> **预览功能**:此功能为实验性功能,可能会有变化。
通过MCP模型上下文协议在Claude Desktop和Cursor等AI代理中使用Next AI Draw.io。
```bash
npx -y @next-ai-drawio/mcp-server
```
### Claude Desktop配置
添加到Claude Desktop配置文件macOS上为`~/Library/Application Support/Claude/claude_desktop_config.json`
```json
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["-y", "@next-ai-drawio/mcp-server"]
}
}
}
```
然后让Claude创建图表
> "创建一个展示用户认证流程的流程图包含登录、MFA和会话管理"
图表会实时显示在浏览器中!
详情请参阅[MCP服务器README](../packages/mcp-server/README.md)。
## 快速开始
### 在线试用

View File

@@ -26,6 +26,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
- [目次](#目次)
- [](#例)
- [機能](#機能)
- [MCPサーバープレビュー](#mcpサーバープレビュー)
- [はじめに](#はじめに)
- [オンラインで試す](#オンラインで試す)
- [Dockerで実行推奨](#dockerで実行推奨)
@@ -88,6 +89,38 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
- **クラウドアーキテクチャダイアグラムサポート**クラウドアーキテクチャダイアグラムの生成を専門的にサポートAWS、GCP、Azure
- **アニメーションコネクタ**:より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
## MCPサーバープレビュー
> **プレビュー機能**:この機能は実験的であり、変更される可能性があります。
MCPModel Context Protocolを介して、Claude DesktopやCursorなどのAIエージェントでNext AI Draw.ioを使用できます。
```bash
npx -y @next-ai-drawio/mcp-server
```
### Claude Desktop設定
Claude Desktopの設定ファイルmacOSでは`~/Library/Application Support/Claude/claude_desktop_config.json`)に追加:
```json
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["-y", "@next-ai-drawio/mcp-server"]
}
}
}
```
Claudeにダイアグラムの作成を依頼
> 「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを作成してください」
ダイアグラムがリアルタイムでブラウザに表示されます!
詳細は[MCPサーバーREADME](../packages/mcp-server/README.md)をご覧ください。
## はじめに
### オンラインで試す