Next AI Draw.io

AI驱动的图表创建工具 - 对话、绘制、可视化

关于扩容与限制 (或者说:我的钱包顶不住了)

大家对这个项目的热情太高了——看来大家都真的很喜欢画图!但这也带来了一个幸福的烦恼:我们经常触发出上游 AI 接口的频率限制 (TPS/TPM)。一旦超限,系统就会暂停,导致请求失败。

作为一个独立开发者,目前的 API 费用全是我自己在掏腰包(纯属为爱发电)。为了保证服务能细水长流,同时也为了避免我个人陷入财务危机,我不得不设置以下临时用量限制:

Token 用量
5万/分钟
50万/天
每日请求数
20

寻求赞助 (求大佬捞一把)

要想彻底解除这些限制,扩容后端是唯一的办法。我正在积极寻求 AI API 提供商或云平台的赞助。

作为回报(无论是额度支持还是资金支持),我将在 GitHub 仓库和 Live Demo 网站的显眼位置展示贵公司的 Logo 作为平台赞助商。

联系我

一个集成了AI功能的Next.js网页应用,与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。

功能特性

  • LLM驱动的图表创建:利用大语言模型通过自然语言命令直接创建和操作draw.io图表
  • 基于图像的图表复制:上传现有图表或图像,让AI自动复制和增强
  • 图表历史记录:全面的版本控制,跟踪所有更改,允许您查看和恢复AI编辑前的图表版本
  • 交互式聊天界面:与AI实时对话来完善您的图表
  • AWS架构图支持:专门支持生成AWS架构图
  • 动画连接器:在图表元素之间创建动态动画连接器,实现更好的可视化效果

示例

以下是一些示例提示词及其生成的图表:

动画Transformer连接器

提示词: 给我一个带有动画连接器的Transformer架构图。

带动画连接器的Transformer架构

GCP架构图

提示词: 使用GCP图标生成一个GCP架构图。用户连接到托管在实例上的前端。

GCP架构图

AWS架构图

提示词: 使用AWS图标生成一个AWS架构图。用户连接到托管在实例上的前端。

AWS架构图

Azure架构图

提示词: 使用Azure图标生成一个Azure架构图。用户连接到托管在实例上的前端。

Azure架构图

猫咪素描

提示词: 给我画一只可爱的猫。

猫咪绘图

工作原理

本应用使用以下技术:

  • Next.js:用于前端框架和路由
  • Vercel AI SDKai + @ai-sdk/*):用于流式AI响应和多提供商支持
  • react-drawio:用于图表表示和操作

图表以XML格式表示,可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。

多提供商支持

  • AWS Bedrock(默认)
  • OpenAI / OpenAI兼容API(通过 OPENAI_BASE_URL
  • Anthropic
  • Google AI
  • Azure OpenAI
  • Ollama
  • OpenRouter
  • DeepSeek

注意:claude-sonnet-4-5 已在带有AWS标志的draw.io图表上进行训练,因此如果您想创建AWS架构图,这是最佳选择。

支持与联系

如果您觉得这个项目有用,请考虑 赞助 来帮助托管在线演示站点!

如需支持或咨询,请在 GitHub仓库 上提交issue或联系:me[at]jiang.jp