Next AI Draw.io 如何从 URL 链接提取网页内容生成图表-育师

Next AI Draw.io 如何从 URL 链接提取网页内容生成图表

【免费下载链接】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

Next AI Draw.io 除了支持上传图片和 PDF/文本文件，还可以直接粘贴一个网页链接：应用会抓取页面正文、转成 Markdown，再把它作为上下文发给 AI 模型，生成对应的 draw.io 图表。这篇文章面向已经能运行该应用（本地开发环境或在线演示站）的读者，说明如何完成「粘贴 URL → 提取正文 → 输入提示词 → 图表渲染」这条路径，以及如何核对每一步是否成功。

整条链路由前端组件和服务端接口协作完成：

输入框工具栏上的链接按钮打开 UrlInputDialog，前端校验 URL 后调用 extractUrlContent，向POST /api/parse-url发送{"url": "..."}；
服务端 parse-url 路由自己发起抓取（带 15 秒超时、拒绝重定向、拦截内网地址），用@extractus/article-extractor提取正文，再用 Turndown 把 HTML 转成 Markdown（移除script、style、iframe、noscript节点）；
提取成功后，chat-panel 在你提交消息时，把内容以[URL: 链接]\nTitle: 标题\n\n正文的形式拼进发送给模型的消息文本；
模型返回 draw.io XML 后，图表渲染在画布上。

准备运行环境

按 README 的本地安装步骤执行：

git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.local npm run dev

启动后在浏览器打开 http://localhost:6002。如果跳过本地部署，也可以用 README 中提到的在线演示站（自带使用限额，可在聊天面板设置里用自己的 API Key 绕过）。

无论哪种方式，都要先配好一个可用的 AI Provider 和模型——提取本身不依赖模型，但「用提取内容生成图表」需要模型参与。各 Provider 的环境变量配置见 Provider Configuration Guide。

在聊天面板中提取 URL 内容

在聊天输入框右下角的工具栏找到链接图标按钮（悬停提示为 “Extract from URL”，中文界面为“从 URL 提取”）。
弹窗标题为「从 URL 提取内容」，说明文字是“粘贴 URL 以提取和分析其内容”。把网页地址粘贴进去，按回车或点「提取」。
前端先做本地校验：URL 不能为空（否则提示“请输入 URL”），且必须能被new URL()解析（否则提示“URL 格式无效”），校验不通过时请求根本不会发出。
校验通过后按钮变为“提取中...”并禁用输入。此期间 UrlInputDialog 与 chat-input 通过isExtracting状态锁住弹窗，避免重复提交。
成功时弹窗关闭，输入框上方出现该 URL 的预览卡片，展示页面标题和字符数，可点击移除（移除后该 URL 不再随下一条消息发送）。
失败时 URL 会从预览列表里删除，并用 toast 显示服务端返回的具体错误文案（错误对照见下文）。

输入提示词并生成图表

URL 提取完成后，输入框中写你的提示词（例如「根据这篇文章生成一张系统架构流程图」），点发送。提交时 chat-panel 的processFilesAndAppendContent会把已提取的内容拼接到你的提示词后面，再连同当前画布 XML 一起发给/api/chat；发送成功后该 URL 附件会自动清空，不会残留到下一条消息。

验证方式：图表按流式输出渲染到右侧 draw.io 画布上，聊天消息中出现display_diagram工具调用即表示 XML 已生成并显示。如果只看到错误提示而没有图表，先确认上一节提取是否成功——内容根本没提取到的 URL 不会拼进消息。

直接调用提取接口核对

如果你想确认问题出在「提取」还是「提示词/模型」环节，可以直接请求提取接口。以下命令中把https://example.com/article（即输入框占位示例地址）替换成你要验证的页面：

curl -X POST http://localhost:6002/api/parse-url \ -H "Content-Type: application/json" \ -d '{"url":"https://example.com/article"}'

成功时返回三个字段（字段定义见 lib/url-utils.ts 的UrlResponseSchema）：title（页面标题，缺失时为Untitled）、content（Markdown 正文）、charCount（正文字符数）。失败时 HTTP 状态非 200，响应体为{"error": "..."}，常见文案与含义对照 route.ts 中的实现：

HTTP 状态	错误文案	触发条件
400	`URL is required`	请求体缺少`url`或非字符串
400	`Invalid URL format`	`new URL(url)`解析失败
400	`Cannot access private/internal URLs`	目标为内网地址，见下文限制
400	`Could not fetch URL content`	抓取失败，包括页面发生 3xx 重定向
504	`Timed out while fetching URL content`	抓取超过 15 秒
422	`PDF URLs are not supported. Please download and upload the PDF file directly`	响应 Content-Type 为`application/pdf`
400	`Could not extract content from URL`	页面抓到了但提取不出正文
400	`Content exceeds 150k character limit (…)`	Markdown 正文超过 150000 字符
500	`Failed to fetch or parse URL content`	服务端未预期的异常

例如返回 400 且文案是Could not extract content from URL，说明页面本身可以访问但正文提取失败（比如纯导航页、登录页），此时应换一个信息更完整的页面地址，而不是调整提示词。

已知限制与排查要点

只接受公网 URL：ssrf-protection.ts 会拦截localhost、127.0.0.1、::1、私有 IP 段（10/8、172.16/12、192.168/16、169.254/16 等）、.local/.internal/.localhost域名以及云元数据服务地址，且对主机名做 DNS 解析后再校验解析结果；parse-url 路由中的注释明确该接口对私有地址一律拒绝，ALLOW_PRIVATE_URLS变量只作用于 LLM Provider 的 baseUrl 覆盖，不影响本接口。
不支持重定向：服务端抓取使用redirect: "error"，任何 3xx 跳转都会被拒绝并返回Could not fetch URL content。如果链接会跳到登录页或域名迁移页，提取会失败，需使用跳转后的最终地址。
15 秒超时：EXTRACT_TIMEOUT_MS固定为 15000 毫秒，慢页面会收到 504。
PDF 链接需改走文件上传：422 错误提示下载后用文件上传入口处理 PDF。
内容长度上限 150000 字符：与 PDF 提取上限一致，超长页面会被整体拒绝，需要换用内容更聚焦的页面。
非 UTF-8 页面：服务端会先探测字符集（优先 HTTPContent-Type头，其次文档头部的<meta charset>，默认 UTF-8），再解码，Shift_JIS/GBK/EUC/Big5 等编码的页面不会变成乱码。