尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Next AI Draw.io MCP Server 浏览器图表不更新怎么排查

Next AI Draw.io MCP Server 浏览器图表不更新怎么排查 Next AI Draw.io MCP Server 浏览器图表不更新怎么排查【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io在 Claude Desktop、Cursor 或 VS Code 中配置了 next-ai-draw-io 的 MCP Server 后常见的一类故障是AI 已经成功执行了create_new_diagram或edit_diagram但浏览器里打开的 draw.io 页面一直停留在旧内容没有刷新出新的图形。这篇文章针对这个现象给出排查路径先确认浏览器页面是否绑定到了正确的会话再检查会话是否存在、端口是否正常最后看 draw.io 嵌入源是否可达。理解更新链路是排查的前提。MCP Server 与 AI 客户端之间走 stdio服务端另起一个内嵌 HTTP Server默认http://localhost:6002负责提供 draw.io 界面和图表状态浏览器页面通过轮询获取新状态。也就是说浏览器能不能更新取决于它打开的 URL 是否带上了 MCP 会话 ID。架构说明见 MCP Server README 的 How It Works 一节。确认前提配置生效且客户端已重启MCP 客户端的配置必须长这样以 Claude Desktop 为例其他客户端同理完整列表在 README{ mcpServers: { drawio: { command: npx, args: [next-ai-drawio/mcp-serverlatest] } } }文档明确要求更新配置后必须重启 MCP 客户端然后让 AI 创建图表浏览器才会出现实时预览。如果你刚改过配置却只是重开聊天窗口而没有重启客户端工具调用可能根本没路由到 drawio 服务现象之一就是浏览器毫无反应。会话由start_session工具创建。它启动内嵌 HTTP 服务并打开浏览器窗口成功时返回类似以下内容Session ID 和 URL 每次不同Session started successfully! Session ID: mcp-xxxxxxxx-xxxxxx Browser URL: http://localhost:6002?mcpmcp-xxxxxxxx-xxxxxx如果工具返回的是Error: No active session. Please call start_session first.说明当前没有活跃会话——此时先调用start_session打开浏览器窗口即可这是 README Troubleshooting 一节给出的处理办法。第一步检查浏览器 URL 是否带?mcp参数README 的 Browser not updating 条目给出的官方判断点是确认浏览器 URL 带有?mcp查询参数。这个参数里携带的 MCP 会话 ID 是浏览器页面与服务器状态之间的连接缺少它页面就不知道该轮询哪个会话的图表。正确的 URL 形如http://localhost:6002?mcpmcp-xxxxxxxx-xxxxxx排查方式看当前浏览器标签页的地址栏确认包含?mcp且参数值与start_session返回的 Session ID 一致如果 URL 里的端口或会话 ID 是旧的比如上一轮会话的直接用start_session返回的最新 Browser URL 重新打开页面页面加载正常时左上角会显示会话 ID 的后 8 位见 http-server.ts 中生成的页面头部可以据此核对页面绑定的会话是否正确。第二步确认端口没有被占满内嵌 HTTP Server 默认监听 6002 端口。如果 6002 被占用服务会自动向后尝试下一个可用端口直到 6020当 6002–6020 范围内全部不可用时start_session会直接失败并返回No available ports in range 6002-6020错误逻辑见 http-server.ts。注意实际使用的端口以start_session返回的 Browser URL 为准——如果你手动打开的http://localhost:6002是旧进程或别的服务页面自然收不到新状态。想要固定端口的话在 MCP 配置里通过环境变量PORT指定例如设为 6003{ mcpServers: { drawio: { command: npx, args: [next-ai-drawio/mcp-serverlatest], env: { PORT: 6003 } } } }改完配置同样要重启 MCP 客户端再验证。第三步确认 draw.io 界面本身能加载MCP Server 是自包含的但浏览器里的 draw.io 嵌入界面默认从https://embed.diagrams.net加载。如果页面框架出来了、内嵌的 draw.io 区域却是空白说明嵌入源没加载成功此时图表自然无从更新。私有部署环境下可以通过DRAWIO_BASE_URL环境变量换成自托管的 draw.io 实例官方给出的示例见 README 的 Private Deployment 一节docker run -d -p 8080:8080 jgraph/drawio然后把 MCP 配置中的env加上DRAWIO_BASE_URL: http://localhost:8080或你的服务器地址。如果你的环境要求离线或内网访问这一步是必须的默认地址不可达时浏览器端会停留在无编辑器状态。如何验证排查成功排查完成后按 README 的使用流程做一次完整验证调用start_session浏览器打开带?mcp参数的预览页让 AI 执行一句图表指令例如文档中的示例Create a flowchart showing user authentication with login, MFA, and session managementcreate_new_diagram成功时返回Diagram content set successfully!并附上页面解析结果此时浏览器应实时显示该流程图。浏览器端的更新依赖轮询页面脚本每 2 秒请求一次/api/state?sessionId...并在版本号变化时重新加载 XML轮询逻辑见 http-server.ts 内嵌页面的poll函数所以状态写入后刷新有秒级延迟属于正常现象若 URL 的会话参数正确、服务端返回成功而页面长时间无任何变化再回到第一步核对会话 ID 是否一致。边界与限制内嵌 HTTP 服务只绑定127.0.0.1浏览器必须在本机打开远程机器上的标签页无法直接连到该预览服务会话状态保存在服务器内存中MCP 客户端重启、会话失效后需要重新调用start_sessiondelete_page拒绝删除最后一页、create_new_diagram会替换全部页面等工具行为属于正常设计不是不更新故障详见 index.ts 中的工具描述。【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表