【GitHub每日速递 20251209】Next.js融合AI，让draw.io图表创建、修改、可视化全靠自然语言！

news/2025/12/9 15:00:54/文章来源:https://www.cnblogs.com/freedom-w/p/19326696

原文: https://mp.weixin.qq.com/s/sp92prUjoAuJwfDEfL09Dg

Next.js融合AI，让draw.io图表创建、修改、可视化全靠自然语言！

[next-ai-draw-io] 是一个集成AI功能的在线图表编辑工具的 Web应用。简单讲，它让你用自然语言命令来画图、改图，AI帮你自动生成和优化图表。适用人群：需要快速制作流程图、架构图的产品经理、开发者和设计师。

项目地址：https://github.com/DayuanJiang/next-ai-draw-io

主要语言：TypeScript

stars: 3.0k

核心功能

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

技术栈

Next.js：作为前端框架和路由。
Vercel AI SDK：用于流式传输 AI 响应和多供应商支持。
react - drawio：用于图表的表示和操作。图表以可在 draw.io 中渲染的 XML 形式表示，AI 会根据命令生成或修改该 XML。

多供应商支持

支持多种 AI 供应商，包括 AWS Bedrock（默认）、OpenAI / 兼容 OpenAI 的 API、Anthropic、Google AI、Azure OpenAI、Ollama、OpenRouter、DeepSeek。其中，claude - sonnet - 4 - 5 在带有 AWS 徽标的 draw.io 图表上进行过训练，是创建 AWS 架构图的最佳选择。

启动方式

使用 Docker（推荐）：先安装 Docker，然后运行特定的 Docker 命令，可通过浏览器访问 http://localhost:3000 查看应用。需根据需求替换环境变量以配置 AI 供应商。
常规安装：克隆仓库，安装依赖，配置 AI 供应商（创建并编辑 .env.local 文件），运行开发服务器，最后通过浏览器访问 http://localhost:3000。

部署方式

最简单的部署方式是使用 Vercel 平台，需在 Vercel 仪表板中设置环境变量。也可通过特定的部署按钮进行部署。

项目结构

app 目录：包含 Next.js 应用路由，有聊天 API 端点和主页面。
components 目录：包含各种 React 组件，如聊天面板、聊天输入、历史对话框和 UI 组件。
contexts 目录：包含 React 上下文提供者，用于全局图表状态管理。
lib 目录：包含实用函数和帮助程序，如多供应商 AI 配置和 XML 处理工具。
public 目录：包含静态资产，如示例图像。

优势

集成了 AI 能力，通过自然语言即可操作图表，降低了图表创建和修改的难度。
支持多种 AI 供应商，用户可根据自身需求和偏好进行选择。
具备完善的版本控制和交互式聊天界面，方便用户对图表进行管理和优化。

应用场景

技术架构设计：可用于生成 AWS、GCP、Azure 等云服务的架构图，帮助技术人员快速可视化系统架构。
创意绘图：例如绘制可爱的动物草图等，满足创意设计需求。
教学和演示：在教学过程中，通过自然语言命令快速创建图表进行讲解；在演示中，利用动画连接器等功能增强可视化效果。

OpenAI Codex CLI 安装使用全攻略，ChatGPT 计划也能搭配！

[codex] 是一个在终端中运行的轻量级编程代理工具。简单讲，它能帮你自动生成代码、理解项目结构，并在命令行里完成编程任务。适用人群：开发者、程序员

项目地址：https://github.com/openai/codex

主要语言：Rust

stars: 51.8k

主要信息

核心功能：Codex CLI 是 OpenAI 推出的一个本地运行的编码代理工具。它可以辅助开发者进行编码工作，并且可以与 ChatGPT 计划结合使用，支持多种配置选项和使用场景。
安装方式
- 使用 npm 全局安装：npm install -g @openai/codex
- 使用 Homebrew 安装：brew install --cask codex
- 也可以从最新 GitHub 版本下载适合自己平台的二进制文件。
使用 ChatGPT 计划：运行 codex 后选择“Sign in with ChatGPT”，推荐使用 ChatGPT 的 Plus、Pro、Team、Edu 或 Enterprise 计划账号登录使用。也可以使用 API 密钥，但需要额外设置。
Model Context Protocol (MCP)：Codex 可以访问 MCP 服务器，配置方法可参考 config docs。
配置：Codex CLI 支持丰富的配置选项，偏好设置存储在 ~/.codex/config.toml 中，完整配置选项见 Configuration。
Execpolicy：可参考 Execpolicy quickstart 设置 Codex 可执行命令的规则。