首页 › new-tools › 让AI画出设计师水平的图:本周四件新工具

你将拿到的信息差:一个让 Claude Code、Codex 画出杂志级图表的开源技能,上线没多久就冲到近 5 万星(截至今日 GitHub trending 数据 49,920 星,单日再涨 1,083);一个让你用 4GB 显存跑 70B 大模型、刚更新到 v3.0 的推理框架 AirLLM(36,257 星,今日 +541);外加两个刚上架几天、还没被中文圈注意到的苗子级新工具——一个给 AI 编程代理上“本地护栏”,一个把 AI 塞进了 Cisco Packet Tracer。这四件,中文圈目前几乎没人写过。


一、diagram-design:AI 画的图,终于能见人了

仓库:github.com/cathrynlavery/diagram-design(开源免费) 在线画廊:cathrynlavery.github.io/diagram-design

先说大多数人踩过的坑:让 Claude 或 ChatGPT“画个架构图”,拿回来的一定是那种圆角方块 + 渐变配色的“AI 味”图表,放进正式文档里自己都嫌丑。用 Mermaid 写代码吧,布局永远歪的;开 Figma 手调吧,30 分钟就没了。

作者是 Cathryn Lavery——写技术博客 littlemight.com,顺手经营电商品牌 BestSelf.co 的独立开发者。她的解法不是做一个画图软件,而是给 AI 编程工具做一个画图技能(Skill):你说“给我画一张前端、后端、数据库加 Redis 缓存的架构图”,代理直接产出一个自包含的 HTML + SVG 文件——无构建步骤、无 JavaScript、无外部图片依赖,浏览器双击就能开。

几个真正值钱的设计:

1. 近 40 种图类型,全部三种皮肤。README 里列了 39 种:架构图、时序图、状态机、ER 图、泳道图、金字塔、桑基图、鱼骨图、Wardley 地图、用户旅程图、数据库模式图……每种都有浅色、深色、完整排版三个变体。仓库首页简介甚至已经写到 44 种——迭代快到文档都追不上。

2. 60 秒品牌适配。说一句 "onboard diagram-design to https://yoursite.com",它会去抓你的网站首页,提取主色、辅色、字体栈,映射成 paper(纸色)、ink(墨色)、accent(强调色)等语义角色,给你看一遍 diff,确认后写入 style-guide.md。此后每张图都自动长在你品牌的视觉体系里,还会输出一份“保真回执”,列明采样了哪些 URL 和字体。给多个客户做项目时,还能存成命名档案,互不串色。

3. 老图搬家。已有的 draw.io(含 .drawio.png 这种内嵌格式)、Mermaid 代码块、Excalidraw 白板文件,都能读进来重新绘制,并且带四个“旋钮”:格式(html/svg/png)、尺寸(文档内嵌、16:9 幻灯片、A4 打印……)、细节(faithful 保留 24 节点 / balanced 12 个 / simplified 7 个)、受众(工程师/混合/高管)。同一个源文件,给老板看的版本和给工程师看的版本可以一键各出一张。

4. 反“AI 味”的偏执。设计规范写死了:整图只有一个强调色,每图只允许 1–2 个视觉焦点,1px 细边框、无阴影、圆角不超 10px,所有坐标必须是 4 的倍数。仓库里甚至有一整套几何校验、渲染校验的 CI 脚本,防止文字溢出、色块遮挡——这是把“出版级排版”当工程问题来做。

安装(Claude Code 两步):

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Codex、Factory Droid、Pi、Kiro、OpenCode 都有对应装法,README 写得清清楚楚。导出 PNG 需要一次性装 Playwright:pip install playwright && playwright install chromium。

国内对比:我们习惯 ProcessOn、亿图这类拖拽工具,或在飞书/语雀文档里贴 Mermaid 代码块。差距不在“能不能画”,而在两件事:一是品牌一致性——国内工具没有“读完你官网就换肤”的能力;二是工作流——它是代理技能,写文档的 AI 顺手就把图出了,不需要切换软件。适用人群:写技术文档、做汇报 PPT、给客户交付方案的后端/架构师/技术写作,尤其是用 Claude Code 或 Codex 的人。

二、AirLLM:4GB 显存跑 70B,v3.0 又狠了一截

仓库:github.com/lyogavin/airllm(Apache 2.0,pip 免费安装) 机制一句话:显存够不够,取决于模型的“一层”有多大,而不是模型整体有多大。

AirLLM 不是新面孔——2023 年 11 月就发了初版——但它这两天又爬上了 GitHub trending(今日 +541 星),因为更新是真狠:

原理并不玄:它每次只在 GPU 上保留一层权重,算完写回内存、立刻腾显存、再取下一层,用磁盘换显存:

flowchart TD
    A["671B权重躺在硬盘里"] --> B["每次只取一层进显存"]
    B --> C["GPU算完这一层"]
    C --> D["结果写回内存"]
    D --> E["显存立刻腾空"]
    E --> B

代价也得说清楚:慢。瓶颈在磁盘读取,适合离线批处理、跑评测、做数据合成,别指望拿来当聊天助手。开启 4bit/8bit 分块压缩后可获得最高 3 倍提速(README 引用了论文 arxiv:2212.09720 的做法),精度损失几乎可忽略——因为只压权重、不压激活值。

上手是真的简单:

from airllm import AutoModel
model = AutoModel.from_pretrained("Qwen/Qwen3-235B-A22B")  # 约3GB显存

Llama 全系、Qwen 全系(含 MoE 和 FP8)、DeepSeek V2/V3/R1、Mistral、Phi、Gemma、ChatGLM、Baichuan 都在支持列表里,Mac(Apple Silicon)也能跑。

国内对比:国内玩家的常规路径是 llama.cpp/Ollama 加量化模型,或者按小时租云上 24GB 显卡。AirLLM 的差异化是不量化也能小卡跑——手里只有老 4GB 卡、或想在公司配发的低配工作站上离线跑大模型做数据处理的人,多了一条免费的路。适用人群:显卡寒酸但想本地跑大模型做批处理的后端、数据工程师、学生党。

三、两个刚出土的苗子:AI 代理的“护栏”与“网工助手”

这两件是我在 GitHub 上按“最近三天新建”筛出来的,star 还是两位数,但方向都对:

laya-guard(github.com/scs0209/laya-guard,Python,12 星,截至发稿 10 小时前还在提交):给 AI 编程代理上的免费本地护栏——代理的每一次工具调用都在本机判定(正则 + Laya 引擎),输出允许/人工复核/拦截三种结果。海外社区现在最焦虑的就是“代理拿到 shell 权限之后乱来”,企业方案全在云端网关上,端侧、免费、可审计的护栏还是空白位。想研究 agent 安全的人,这是极好的源码样本。

agentpackettracer(github.com/safdev758/agentpackettracer,Python,10 星):把本地 AI 助手嵌进 Cisco Packet Tracer,带一组经过校验的网络工具、支持多家模型提供商,还可选接入 headless Codex 工作进程。说白了:让 AI 在网络模拟器里替你敲拓扑、配设备。通信/网工背景的读者可以重点看——用 AI 学思科认证、验证组网方案的玩法,可能就从这类小仓库长出来。

四、信息差总结

你以为 实际上
AI 画图只能出“圆角方块丑图” diagram-design 让代理产出出版级 SVG,还能读你官网自动换肤
跑 70B 模型至少要两张 24GB 卡 AirLLM 分层流式加载,4GB 单卡跑 70B,671B 约 12GB
本地跑大模型必须量化 AirLLM 全精度分层加载,量化只作为 3 倍提速的可选项
Agent 安全靠云端审计 laya-guard 把判定放到本机,每一次工具调用都有 allow/review/block
Packet Tracer 只能手动敲 agentpackettracer 让 AI 助手在模拟器里配网络

五、行动指南

  1. 今天就能做:在 Claude Code 里执行上面两行安装命令,对它说“给我画一张我司系统的架构图”,对比一下你以前贴 Mermaid 的产出;
  2. 花 60 秒做品牌适配:说 "onboard diagram-design to 你的官网",之后所有图自动统一风格;
  3. 本周末:pip install airllm,用你手头最小的卡跑一次 Qwen/Qwen3-32B,感受“分层加载”的真实速度,再决定要不要上 235B;
  4. 关注两个苗子仓库:玩 agent 安全的看 laya-guard 的判定逻辑实现,通信背景的盯 agentpackettracer 的工具封装方式——这个量级的仓库,源码一小时能读完;
  5. 谨慎项:AirLLM 别用于交互式对话场景(太慢);diagram-design 的 PNG 导出依赖 Playwright + Chromium,公司内网环境先确认能装。

参考来源

  1. diagram-design 仓库:https://github.com/cathrynlavery/diagram-design
  2. diagram-design 在线画廊(39 种图直接预览):https://cathrynlavery.github.io/diagram-design/
  3. AirLLM 仓库(含 v3.0 与 Kimi K3 更新日志):https://github.com/lyogavin/airllm
  4. laya-guard 仓库:https://github.com/scs0209/laya-guard
  5. agentpackettracer 仓库:https://github.com/safdev758/agentpackettracer
flowchart TD
    A["你说:画张架构图"] --> B{"本项目首次出图?"}
    B -->|是| C["读你官网提取配色字体"]
    C --> D["写入style-guide存档"]
    B -->|否| E["直接套用品牌档案"]
    D --> F["输出自包含HTML加SVG"]
    E --> F

本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵爱卫生(微信ID: gprshome201101)维护。 聚焦5G/6G核心网、3GPP标准、AI工具实战。知识星球「51学通信」提供深度技术答疑和行业洞察。

[!tip] 51学通信知识星球 星主:爱卫生(微信:gprshome201101)——公众号「51学通信」创办者,19 年通信行业运维与讲师经验,著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书(各大电商平台有售)。 星球定位:深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域,主打运维岗位与信令分析。 当前规模:5200 篇主题 / 990 个回答,198 元/年。 加入福利:加入星球后请加爱卫生微信,拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题,另有群内分享。 AI 加持:51学通信知识星球已作为 skill 接入 WorkBuddy,使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例,做总结、找文档和 PPT 等场景全覆盖。

51学通信知识星球海报-扫码加入