README_CN.md

AIO Canvas

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

English | 中文 | 日本語

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

注：感谢 字节跳动豆包 的赞助支�，本项目的 Demo 现已接入强大的 K2-thinking 模型�

20251110_draw_io_demo.mp4

目录

• AIO Canvas
  • 目录
  • 示例
  • 功能特性
  • MCPæœ�务器（预览）
    • Claude Code CLI
  • 快速开始
    • 在线试用
    • æ¡Œé�¢åº”用
    • 使用Dockerè¿�è¡Œ
    • 安装
  • 部署
    • 部署到腾讯云EdgeOne Pages
    • 部署到Vercel
    • 部署到Cloudflare Workers
  • 多æ��供商支æŒ�
  • 工作原ç�†
  • 支æŒ�与è�”ç³»
  • 常è§�问题
  • Star历å�²

示例

以下是一些示例�示��其生�的图表：

动画Transformer连接器 �示�： 给我一个带有**动画连接器**的Transformer架构图。
GCP架构图 �示�： 使用**GCP图标**生�一个GCP架构图。在这个图中，用户连接到托管在实例上的�端。	AWS架构图 �示�： 使用**AWS图标**生�一个AWS架构图。在这个图中，用户连接到托管在实例上的�端。
Azure架构图 �示�： 使用**Azure图标**生�一个Azure架构图。在这个图中，用户连接到托管在实例上的�端。	猫咪素� �示�： 给我画一��爱的猫。

功能特性

• LLM驱动的图表创建：利用大语言模型通过自然语言命令直接创建和æ“�作draw.io图表
• **基于图åƒ�的图表å¤�制**：上传现有图表或图åƒ�，让AI自动å¤�制和增强
• **PDF和文本文件上传**：上传PDF文档和文本文件，æ��å�–内容并从现有文档生æˆ�图表
• AI推ç�†è¿‡ç¨‹æ˜¾ç¤ºï¼šæŸ¥çœ‹æ”¯æŒ�模型的AIæ€�考过程（OpenAI o1/o3ã€�Geminiã€�Claude等）
• **图表历å�²è®°å½•**：全é�¢çš„版本控制，跟踪所有更改，å…�许您查看和æ�¢å¤�AI编辑å‰�的图表版本
• 交互å¼�è�Šå¤©ç•Œé�¢ï¼šä¸ŽAI实时对è¯�æ�¥å®Œå–„您的图表
• 云架构图支æŒ�：专门支æŒ�生æˆ�云架构图（AWSã€�GCPã€�Azure）
• 动画连接器：在图表元素之间创建动æ€�动画连接器，实现更好的å�¯è§†åŒ–效果

MCP�务器（预览）

预览功能：此功能为实验性功能，�能�稳定。

通过MCP（模型上下文�议）在Claude Desktop�Cursor和VS Code等AI代�中使用AIO Canvas。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@canvas-a-i-o/mcp-server@latest"]
    }
  }
}

Claude Code CLI

claude mcp add drawio -- npx @canvas-a-i-o/mcp-server@latest

然�让Claude创建图表：

"创建一个展示用户认��程的�程图，包�登录�MFA和会�管�"

图表会实时显示在�览器中�

详情请�阅MCP�务器README，了解VS Code�Cursor等客户端�置。

快速开始

在线试用

无需安装�直接在我们的演示站点试用：

使用自己的 API Key：您�以使用自己的 API Key �绕过演示站点的用��制。点击�天��中的设置图标���置您的 Provider 和 API Key。您的 Key 仅�存在�览器本地，�会被存储在�务器上。

桌�应用

从 Releases 页� 下载适用于您平�的原生桌�应用：

支�的平�：Windows�macOS�Linux。

使用Docker�行

查看 Docker 指�

安装

1. 克隆仓库：

git clone https://github.com/PhenixStar/canvas-A-I-O
cd canvas-a-i-o
npm install
cp env.example .env.local

详细设置说明请�阅�供商�置指�。

2. �行开��务器：

npm run dev

3. 在�览器中打开 http://localhost:6002 查看应用。

部署

部署到腾讯云EdgeOne Pages

您�以通过腾讯云EdgeOne Pages一键部署。

直接点击此按钮一键部署：

查看腾讯云EdgeOne Pages文档了解更多详情。

�时，通过腾讯云EdgeOne Pages部署，也会获得�日�费的DeepSeek模型�度。

部署到Vercel

部署Next.js应用最简å�•çš„æ–¹å¼�是使用Next.js创建者æ��供的Vercelå¹³å�°ã€‚请确ä¿�在Vercel控制å�°ä¸­è®¾ç½®çŽ¯å¢ƒå�˜é‡�，就åƒ�您在本地 .env.local 文件中所å�šçš„那样。

查看Next.js部署文档了解更多详情。

部署到Cloudflare Workers

查看 Cloudflare 部署指�

多�供商支�

• 字节跳动豆包
• AWS Bedrock（默认）
• OpenAI
• Anthropic
• Google AI
• Google Vertex AI
• Azure OpenAI
• Ollama
• OpenRouter
• DeepSeek
• SiliconFlow
• ModelScope
• SGLang
• Vercel AI Gateway

除AWS Bedrock和OpenRouter外，所有�供商都支�自定义端点。

📖 详细的�供商�置指� - 查看��供商的设置说明。

�务端多模型�置

管ç�†å‘˜å�¯ä»¥é…�置多个æœ�务端模型，让所有用户无需æ��供个人 API Key å�³å�¯ä½¿ç”¨ã€‚通过 AI_MODELS_CONFIG 环境å�˜é‡�（JSON 字符串）或 ai-models.json 文件é…�置。

**模型�求**：此任务需�强大的模型能力，因为它涉�生�具有严格格�约�的长文本（draw.io XML）。推�使用 Claude Sonnet 4.5�GPT-5.1�Gemini 3 Pro 和 DeepSeek V3.2/R1。

注æ„�：claude 系列已在带有 AWSã€�Azureã€�GCP 等云架构 Logo çš„ draw.io 图表上进行训练，因此如果您想创建云架构图，这是最佳选择。

工作原�

本应用使用以下技术：

• Next.js：用于å‰�端框架和路由
• Vercel AI SDK（ai + @ai-sdk/*）：用于æµ�å¼�AIå“�应和多æ��供商支æŒ�
• react-drawio：用于图表表示和æ“�作

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

支�与�系

特别感谢字节跳动豆包赞助演示站点的 API Token 使用� 注册�山引擎 ARK 平���获得50万�费Token�

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

如需支�或咨询，请在GitHub仓库上�交issue或�系维护者：

• 邮箱：me[at]jiang.jp

常�问题

请�阅 FAQ 了解常�问题和解决方案。

Star历�

---