企业官网建设流程全解析

视频网站cms系统,鞍山网站制作,浙江建设信息港首页介绍,中智软件开发有限公司AI之Tool#xff1a;Next AI Draw.io的简介、安装和使用方法、案例应用之详细攻略 目录 Next AI Draw.io的简介 1、特点 Next AI Draw.io的安装和使用方法 1、安装 2、使用方法 T1、在线试用 (Try it Online)#xff1a; T2、使用 Docker 运行 (推荐) T3、本地安装 (…AI之ToolNext AI Draw.io的简介、安装和使用方法、案例应用之详细攻略目录Next AI Draw.io的简介1、特点Next AI Draw.io的安装和使用方法1、安装2、使用方法T1、在线试用 (Try it Online)T2、使用 Docker 运行 (推荐)T3、本地安装 (Installation)Next AI Draw.io的案例应用动画转换器连接器 (Animated transformer connectors)GCP 架构图 (GCP architecture diagram)AWS 架构图 (AWS architecture diagram)Azure 架构图 (Azure architecture diagram)猫咪素描图 (Cat sketch prompt)Next AI Draw.io的简介Next AI Draw.io 是一个基于 Next.js 的 Web 应用程序它将人工智能能力与 draw.io 图表深度集成。该应用允许用户通过自然语言命令和AI 辅助可视化来创建、修改和增强图表。它旨在提供一个 AI 驱动的图表创建工具支持聊天、绘图和可视化功能。GitHub地址https://github.com/DayuanJiang/next-ai-draw-io1、特点该项目具备以下核心特点 LLM 驱动的图表创建 (LLM-Powered Diagram Creation)利用大型语言模型LLM直接通过自然语言命令创建和操作 draw.io 图表。 基于图像的图表复制 (Image-Based Diagram Replication)用户可以上传现有图表或图片AI 将自动复制并增强它们。 PDF 和文本文件上传 (PDF Text File Upload)支持上传 PDF 文档和文本文件以提取内容并从现有文档生成图表。 AI 推理过程显示 (AI Reasoning Display)对于支持的模型如 OpenAI o1/o3, Gemini, Claude 等可以查看 AI 的思考过程。 图表历史记录 (Diagram History)提供全面的版本控制跟踪所有更改允许用户在 AI 编辑之前查看和恢复图表的先前版本。 交互式聊天界面 (Interactive Chat Interface)与 AI 进行实时沟通以优化和完善图表。 云架构图支持 (Cloud Architecture Diagram Support)专门支持生成云架构图包括 AWS、GCP 和 Azure。 动画连接器 (Animated Connectors)在图表元素之间创建动态和动画连接器以实现更好的可视化效果。 多提供商支持 (Multi-Provider Support)支持多种 AI 提供商包括 AWS Bedrock、OpenAI、Anthropic、Google AI、Azure OpenAI、Ollama、OpenRouter、DeepSeek 和 SiliconFlow。除了 AWS Bedrock 和 OpenRouter 外所有提供商都支持自定义端点。Next AI Draw.io的安装和使用方法1、安装Next AI Draw.io 提供了多种使用和安装方式。2、使用方法T1、在线试用 (Try it Online)无需安装可直接访问项目的演示网站进行体验。注意由于流量较高演示网站目前使用 minimax-m2 模型。为获得最佳效果建议使用 Claude Sonnet 4.5 或 Claude Opus 4.5 进行自托管。自带 API Key (Bring Your Own API Key)用户可以在聊天面板的设置图标中配置自己的 AI 提供商和 API Key以绕过演示网站的使用限制。您的密钥将本地存储在浏览器中不会存储在服务器上。T2、使用 Docker 运行 (推荐)步骤 1安装 Docker。步骤 2运行以下命令docker run -d -p 3000:3000 \ -e AI_PROVIDERopenai \ -e AI_MODELgpt-4o \ -e OPENAI_API_KEYyour_api_key \ ghcr.io/dayuanjiang/next-ai-draw-io:latest或者复制 env.example 到 .env 并编辑配置然后运行cp env.example .env # 编辑 .env 文件 docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest步骤 3在浏览器中打开 http://localhost:3000。离线部署如果 embed.diagrams.net 被阻止可以查阅离线部署选项。T3、本地安装 (Installation)步骤 1克隆仓库bash git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io步骤 2安装依赖bash npm install步骤 3配置 AI 提供商复制 env.example 到 .env.localcp env.example .env.local编辑 .env.local 文件配置以下变量AI_PROVIDER设置为您选择的提供商如 bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow。AI_MODEL设置为要使用的具体模型。添加所需提供商的 API 密钥。TEMPERATURE可选的温度设置例如 0 用于确定性输出。对于不支持此设置的模型如推理模型可不设置。ACCESS_CODE_LIST可选的访问密码可逗号分隔设置多个密码。警告如果未设置此项任何人都可以直接访问您的部署站点可能导致令牌快速耗尽。强烈建议设置此选项。查阅《详细提供商配置指南》获取每个提供商的详细设置说明。步骤 4运行开发服务器bash npm run dev步骤 5在浏览器中打开 http://localhost:3000。部署 (Deployment)最简单的部署方式是使用 Next.js 官方推荐的 Vercel 平台。确保在 Vercel 控制台中设置与本地 .env.local 文件中相同的环境变量。Next AI Draw.io的案例应用项目提供了一些示例提示词及其生成的图表展示了其强大的功能动画转换器连接器 (Animated transformer connectors)提示词Give me a **animated connector** diagram of transformers architecture. (给我一个带有动画连接器的 Transformer 架构图。)GCP 架构图 (GCP architecture diagram)提示词Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance. (生成一个带有 GCP 图标的 GCP 架构图。在这个图中用户连接到一个托管在实例上的前端。)AWS 架构图 (AWS architecture diagram)提示词Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance. (生成一个带有 AWS 图标的 AWS 架构图。在这个图中用户连接到一个托管在实例上的前端。)Azure 架构图 (Azure architecture diagram)提示词Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance. (生成一个带有 Azure 图标的 Azure 架构图。在这个图中用户连接到一个托管在实例上的前端。)猫咪素描图 (Cat sketch prompt)提示词Draw a cute cat for me. (给我画一只可爱的猫。)这些案例展示了该应用如何通过自然语言命令结合特定图标和动画效果生成各种复杂的架构图和简单的示意图。