1 篇文章带有标签 “diagram-generation”

1. 项目概述

Next AI Draw.io 是一个 AI 驱动的图表创建工具，通过自然语言命令和 AI 辅助可视化来创建、修改和增强 draw.io 图表。

核心特性

• LLM 驱动的图表创建：利用大语言模型通过自然语言直接创建和操作 draw.io 图表
• 基于图像的图表复制：上传现有图表或图像，让 AI 自动复制和增强
• PDF 和文本文件上传：上传 PDF 文档和文本文件以提取内容并生成图表
• AI 推理显示：查看支持模型的 AI 思考过程（OpenAI o1/o3、Gemini、Claude 等）
• 图表历史记录：全面的版本控制，跟踪所有更改
• 交互式聊天界面：与 AI 实时交流以完善图表
• 云架构图表支持：专门支持生成云架构图表（AWS、GCP、Azure）
• 动画连接器：创建动态和动画化的图表元素连接器

技术栈

• 框架：Next.js 16.x + React 19.x
• AI SDK：Vercel AI SDK (ai + @ai-sdk/*)
• 图表渲染：react-drawio
• 样式：Tailwind CSS 4.x
• UI 组件：Radix UI + shadcn/ui
• 多语言支持：i18n
• 桌面应用：Electron
• 部署：Vercel / Cloudflare Workers / EdgeOne Pages

2. 整体架构

graph TB
    User[用户] --> Browser[浏览器 / 桌面应用]
    
    Browser --> UI[React 前端 UI]
    UI --> Chat[聊天界面]
    UI --> DrawIO[Draw.io 编辑器]
    UI --> Settings[设置面板]
    
    Chat --> API[Next.js API Routes]
    Settings --> API
    
    API --> ChatAPI[api/chat<br/>核心对话接口]
    API --> ConfigAPI[api/config<br/>配置接口]
    API --> ValidateAPI[api/validate-diagram<br/>图表验证]
    API --> ValidateModelAPI[api/validate-model<br/>模型验证]
    API --> LogAPI[api/log-*<br/>日志反馈]
    API --> ParseURLAPI[api/parse-url<br/>URL 解析]
    API --> ServerModelsAPI[api/server-models<br/>服务端模型]
    
    ChatAPI --> AIProviders[AI 提供商层<br/>lib/ai-providers.ts]
    ChatAPI --> SystemPrompts[系统提示词<br/>lib/system-prompts.ts]
    ChatAPI --> Cache[响应缓存<br/>lib/cached-responses.ts]
    ChatAPI --> Quota[配额管理<br/>lib/dynamo-quota-manager.ts]
    ChatAPI --> Langfuse[Langfuse 追踪<br/>lib/langfuse.ts]
    
    AIProviders --> VercelAI[Vercel AI SDK]
    VercelAI --> OpenAI[OpenAI]
    VercelAI --> Anthropic[Anthropic]
    VercelAI --> Google[Google AI]
    VercelAI --> Bedrock[AWS Bedrock]
    VercelAI --> DeepSeek[DeepSeek]
    VercelAI --> Others[其他 10+ 提供商]
    
    UI --> LocalStorage[本地存储<br/>IndexedDB]
    UI --> SessionStorage[会话存储<br/>lib/session-storage.ts]
    
    style AIProviders fill:#90EE90
    style SystemPrompts fill:#FFD700
    style VercelAI fill:#87CEEB

3. 项目结构