一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸

简介: 一句话生成拓扑图!next-ai-draw-io 结合 AI 与 Draw.io,通过自然语言秒出架构图,支持私有部署、免费大模型接口,彻底解放生产力,绘图效率直接爆炸。

一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸

前言

作为天天跟架构图、拓扑图死磕的技术人,谁没为画一张规范的图表头秃过?手动拖拽组件、调整布局、对齐线条,动辄半小时起步,要是需求改了还得推倒重来 —— 直到我挖到 next-ai-draw-io 这个宝藏开源项目,直接把 AI 塞进了 Draw.io,一句话就能生成复杂图表,旧图截图还能秒变可编辑文件,彻底解放双手!

如果你没有大模型API,本篇文章星哥再推荐两个免费获取大模型的渠道,还请多多点赞。。。

img

了解next-ai-draw-io

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

效果如下图:

next-ai-draw-io效果图

前期准备

搭建next-ai-draw-io需要准备

  1. 一台服务器或者NAS
  2. 安装了Docker 或者Docker compose
  3. 有自己申请的大模型API

准备大模型接口

  1. 开源项目:GPT_API_free
  2. openrouter提供的免费接口

获取免费的OpenAI的key: https://github.com/chatanywhere/GPT_API_free,限制:有的模型每天只有5次,可以选择deepseek。

可以参考星哥之前写的文章有这好事?DeepSeek-R1-70B的大模型免费用,申请一个KEY,大模型名称“openai/gpt-oss-20b:free”或者其他。deepseek/deepseek-r1-distill-llama-70b:free[不能用了]

模型要求:此任务需要强大的模型能力,因为它涉及生成具有严格格式约束的长文本(draw.io XML)。推荐使用Claude Sonnet 4.5、GPT-4o、Gemini 2.0和DeepSeek V3/R1。

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

安装next-ai-draw-io

安装next-ai-draw-io有很多种,这里星哥就采用最简单的docker方式,如果想继续可以参考开源项目:https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/README_CN.md

1.准备

建立目录,编辑配置文件

mkdir -p /data/docker/ai-draw
cd /data/docker/ai-draw
wget https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/refs/heads/main/env.example
mv env.example .env
编辑
vim .env
这步可以忽略,等镜像成功之后,可以在设置中填写。
# OpenAI Configuration
# OPENAI_API_KEY=sk-...
# OPENAI_BASE_URL=https://api.openai.com/v1  # Optional: Custom OpenAI-compatible endpoint
# OPENAI_ORGANIZATION=org-...  # Optional
# OPENAI_PROJECT=proj_...      # Optional

改成
OPENAI_API_KEY=<你申请的免费的key>
#OPENAI_BASE_URL=https://api.chatanywhere.tech/v1 #(国内)
OPENAI_BASE_URL=https://api.chatanywhere.org/v1 #(国外)

2.启动镜像

docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest

或者:
docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=gpt-4o \
  -e OPENAI_API_KEY=your_api_key \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

3.访问next-ai-draw-io

ip+端口访问,如下图

img

设置大模型并生成图

点击右上角的设置按钮

如图,设置Provider、Model ID、API Key、 Base URL

输入之后,再到对话框中,填入自己想要的生成的网络图、拓扑图等。

img

发号施令

img

左侧生成的图片

img

img

使用OepnRouter再试试。

img

最后

对技术人来说,工具的核心价值就是 “把时间花在核心逻辑上,而非重复劳动”。next-ai-draw-io 恰好戳中了图表创作的痛点,用 AI 降低了专业图表的创作门槛,而且基于 Docker 部署在自己的服务器 / NAS 上,数据不跑路,用着更放心。

如果你也经常跟各类图表打交道,真心建议试试这个项目,相信我,会打开新世界的大门~ 觉得好用的话,别忘了给作者点个 star 支持下开源!

👉 GitHub 地址:https://github.com/DayuanJiang/next-ai-draw-io

相关文章
|
2月前
|
机器学习/深度学习 人工智能 缓存
让AI评测AI:构建智能客服的自动化运营Agent体系
大模型推动客服智能化演进,从规则引擎到RAG,再到AI原生智能体。通过构建“评估-诊断-优化”闭环的运营Agent,实现对话效果自动化评测与持续优化,显著提升服务质量和效率。
1701 86
让AI评测AI:构建智能客服的自动化运营Agent体系
|
1月前
|
机器学习/深度学习 人工智能 前端开发
构建AI智能体:七十、小树成林,聚沙成塔:随机森林与大模型的协同进化
随机森林是一种基于决策树的集成学习算法,通过构建多棵决策树并结合它们的预测结果来提高准确性和稳定性。其核心思想包括两个随机性:Bootstrap采样(每棵树使用不同的训练子集)和特征随机选择(每棵树分裂时只考虑部分特征)。这种方法能有效处理大规模高维数据,避免过拟合,并评估特征重要性。随机森林的超参数如树的数量、最大深度等可通过网格搜索优化。该算法兼具强大预测能力和工程化优势,是机器学习中的常用基础模型。
474 165
|
2月前
|
人工智能 前端开发 算法
大厂CIO独家分享:AI如何重塑开发者未来十年
在 AI 时代,若你还在紧盯代码量、执着于全栈工程师的招聘,或者仅凭技术贡献率来评判价值,执着于业务提效的比例而忽略产研价值,你很可能已经被所谓的“常识”困住了脚步。
1588 89
大厂CIO独家分享:AI如何重塑开发者未来十年
|
22天前
|
人工智能 网络协议 开发者
无成本搭建 AI 画图神器!我以后再也不会手绘架构图了
小富带你零成本搭建AI画图神器!基于Next.js和开源项目next-ai-draw-io,结合Vercel免费部署,秒变AI绘图平台。输入文字自动生成可二次编辑的流程图、架构图,支持多模型,无需服务器,一键上线,写文档、画架构效率翻倍!
277 0
|
1月前
|
JSON 应用服务中间件 nginx
采集 Nginx 日志的几种方式
本文系统介绍采集Nginx日志的六种主流方式:本地文件读取、Agent采集(如Filebeat)、Syslog转发、Sidecar模式、JSON格式化输出及云服务集成。涵盖单机到云原生场景,助你构建高效、可扩展的日志体系,提升监控与故障排查能力。(238字)
319 152
|
1月前
|
存储 自然语言处理 测试技术
一行代码,让 Elasticsearch 集群瞬间雪崩——5000W 数据压测下的性能避坑全攻略
本文深入剖析 Elasticsearch 中模糊查询的三大陷阱及性能优化方案。通过5000 万级数据量下做了高压测试,用真实数据复刻事故现场,助力开发者规避“查询雪崩”,为您的业务保驾护航。
1434 89
|
1月前
|
SQL 自然语言处理 调度
Agent Skills 的一次工程实践
**本文采用 Agent Skills 实现整体智能体**,开发框架采用 AgentScope,模型使用 **qwen3-max**。Agent Skills 是 Anthropic 新推出的一种有别于mcp server的一种开发方式,用于为 AI **引入可共享的专业技能**。经验封装到**可发现、可复用的能力单元**中,每个技能以文件夹形式存在,包含特定任务的指导性说明(SKILL.md 文件)、脚本代码和资源等 。大模型可以根据需要动态加载这些技能,从而扩展自身的功能。目前不少国内外的一些框架也开始支持此种的开发方式,详细介绍如下。
3223 8