尧图网站建设 
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-ioNext 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 的UrlResponseSchematitle页面标题缺失时为Untitled、contentMarkdown 正文、charCount正文字符数。失败时 HTTP 状态非 200响应体为{error: ...}常见文案与含义对照 route.ts 中的实现HTTP 状态错误文案触发条件400URL is required请求体缺少url或非字符串400Invalid URL formatnew URL(url)解析失败400Cannot access private/internal URLs目标为内网地址见下文限制400Could not fetch URL content抓取失败包括页面发生 3xx 重定向504Timed out while fetching URL content抓取超过 15 秒422PDF URLs are not supported. Please download and upload the PDF file directly响应 Content-Type 为application/pdf400Could not extract content from URL页面抓到了但提取不出正文400Content exceeds 150k character limit (…)Markdown 正文超过 150000 字符500Failed to fetch or parse URL content服务端未预期的异常例如返回 400 且文案是Could not extract content from URL说明页面本身可以访问但正文提取失败比如纯导航页、登录页此时应换一个信息更完整的页面地址而不是调整提示词。已知限制与排查要点只接受公网 URLssrf-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 等编码的页面不会变成乱码。若提取成功但生成结果不理想调整提示词明确图表类型、模块粒度即可若多次提取失败先按上表的状态码定位是访问、重定向、超时还是提取本身的问题。【免费下载链接】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），仅供参考 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-ioNext 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 的UrlResponseSchematitle页面标题缺失时为Untitled、contentMarkdown 正文、charCount正文字符数。失败时 HTTP 状态非 200响应体为{error: ...}常见文案与含义对照 route.ts 中的实现HTTP 状态错误文案触发条件400URL is required请求体缺少url或非字符串400Invalid URL formatnew URL(url)解析失败400Cannot access private/internal URLs目标为内网地址见下文限制400Could not fetch URL content抓取失败包括页面发生 3xx 重定向504Timed out while fetching URL content抓取超过 15 秒422PDF URLs are not supported. Please download and upload the PDF file directly响应 Content-Type 为application/pdf400Could not extract content from URL页面抓到了但提取不出正文400Content exceeds 150k character limit (…)Markdown 正文超过 150000 字符500Failed to fetch or parse URL content服务端未预期的异常例如返回 400 且文案是Could not extract content from URL说明页面本身可以访问但正文提取失败比如纯导航页、登录页此时应换一个信息更完整的页面地址而不是调整提示词。已知限制与排查要点只接受公网 URLssrf-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 等编码的页面不会变成乱码。若提取成功但生成结果不理想调整提示词明确图表类型、模块粒度即可若多次提取失败先按上表的状态码定位是访问、重定向、超时还是提取本身的问题。【免费下载链接】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），仅供参考