你上一次在中文技术圈看到这三个名字，是什么时候？答案大概率是：从来没有。过去48小时，Hacker News 的 Show HN 栏目被三件小工具刷了屏：一个398分的「用文字指定坐标的画图语言」reladraw、一个三天拿下421分和2400+ Star 的 YC W26 新项目 Whiteboard，还有一个300分、正在 Product Hunt 首页挂着的摸鱼神器 Lofi Cities。三件货有一个共同点：都不到一周大，中文圈目前零教程、零评测。今天这篇把三件全部拆开——是什么、多少钱、跟国内的东西比强在哪、你今晚就能怎么用。看完这篇，你在画架构图、做软件设计、找专注背景音这三件事上，信息差直接拉满。
官网/仓库：https://github.com/reladraw/reladraw （在线试玩：https://reladraw.github.io/reladraw/ ） 价格：完全免费，Apache-2.0 开源 现状：v0.15.0，TypeScript 写的解析器+布局引擎+SVG 渲染器，零运行时依赖
先说它解决什么问题。画图工具圈有一个存在多年的「两头堵」：
reladraw 的作者（HN 用户 jpwalsh234）就是被这个夹缝逼出来的。它的语法长这样：
node app "Web app"
node app.ui "Interface"
node app.api "API" below app.ui
node store "Database" right of app level with app
edge app.api -> store "queries" from: right to: left
看明白了吗？位置是相对声明的：below app.ui（在某某下面）、right of app（在某某右边）、level with app（跟某某对齐）。你不用手算一个像素坐标，但布局权在你手里。一条命令 npm install -g reladraw 装好，reladraw diagram.reladraw -o diagram.svg 直接吐出 SVG。它还能作为一个标签嵌进网页，页面里写几行 DSL 就地渲染成图。
真正值得中国用户注意的，是它的 AI 姿势。 README 里专门写了一节「Using it with an agent」：一条命令 npx skills add reladraw/reladraw -g，就能把 reladraw 的技能包同时装进 Claude Code、Codex、Cursor、Copilot 等所有你在用的 AI 编码工具。这背后的逻辑很狠：AI agent 生成 Mermaid 图没问题，但生成 draw.io 那种绝对坐标的图基本不可用——每次都要重算坐标。reladraw 把坐标「相对化」，等于给 AI 造了一种它能稳定输出的画图语言。你以后可以直接跟 Claude Code 说「给这个模块画张部署架构图」，它产出的 .reladraw 文件渲染出来就是你想要的位置。
跟国内同类对比：ProcessOn 模板全但收费、在线私有格式锁定；亿图图示同类问题。draw.io 国内用得也多，但 AI agent 没法稳定操作它。Mermaid 国内文档圈用得最多，但布局失控是老毛病。reladraw 正好卡在两者之间，而且是为 AI 时代设计的——这一点 ProcessOn 和亿图都还没反应过来。
适用人群：天天要往 README/技术文档/公众号文章里塞架构图的后端和运维；用 Claude Code/Cursor 干活、想让 AI 顺手把图也出了的人；写技术博客的人。
⚠️ 提醒一句：项目自己声明「语言还不稳定，语法随时会变」，v0.15.0，属于早期上车，别拿它画公司级的正式交付图，自己文档和博客里用正合适。
仓库：https://github.com/devdotfast/whiteboard （公司官网：dev.fast） 价格：仓库 MIT 协议、免费开源可自部署；商业化方案以官网为准（尚未公开细节） 现状：Show HN 发布三天，421 分、141 条评论；GitHub 约 2400 Star（截至9月30日为2366）
这家公司叫 /dev/fast，组织签名栏写的是：「Rethinking dev tools for the era of slop code」——在「AI 批量产出的灌水代码」时代，重新思考开发工具。这句话就是 Whiteboard 的题眼。
它的定位不是通用白板（不是 Miro、不是飞书白板那种），而是一块专给「认真做软件设计」用的开源画布：动手让 AI 生成代码之前，先把模块边界、数据流、取舍在画布上想清楚。为什么这个东西突然火了？因为 AI 写码的速度上来之后，行业里反而冒出一个反向共识：写得太快、想得太少，代码是 AI 写的，锅是你的。HN 上 141 条评论基本在围绕这个痛点吵。顺手一提，这家公司仓库里还躺着一个 Rust 写的结构化 diff 工具 diffr，方向一脉相承——全是冲着「AI 产出的代码质量不可控」来的。
三天 2400 Star 是什么概念？大多数 Show HN 项目一辈子就停在两位数。这个速度说明「AI 时代需要一块设计画布」不是伪需求。MIT 协议意味着你可以直接拉下来给团队自部署，改造成自己公司的设计评审工具，没有授权成本。
跟国内同类对比：国内团队讨论设计，要么飞书白板/腾讯文档随手画（画完就丢，跟代码库没有半点关系），要么口头+脑图（XMind/幕布）。没有「专门为软件设计而生的、开源可自部署的画布」这个品类。Whiteboard 填的就是这个空。对想做出海产品的开发者，这也是个信号：dev tools 在 AI 时代有一波「重新做一遍」的窗口期，/dev/fast 这种三五人小队抢的就是时间差。
适用人群：带团队做设计评审的 Tech Lead；接外包、需要在动手前跟客户对齐方案的人；被 AI 生成的「能跑但看不懂」的代码折磨过的所有人。
官网：https://loficities.com （正在 Product Hunt 首页） 价格：网页完全免费、无账号、无弹窗；变现靠卖视频素材和广告牌 现状：Show HN 300 分、120 评论；作者 Safa Elmali 独立开发
前两件是给程序员的，这件是给所有人的。打开就是一个像素风的夜晚城市：巴黎阁楼、东京塔下的霓虹雨、香港维多利亚港、悉尼的蓝花楹……16 座城市随你切。配的音乐不是播放器里放的歌，而是你的浏览器用 Web Audio API 现场合成的——和弦进行、鼓组、贝斯、旋律，全部实时生成，零采样、零录音，所以歌单永远播不完。连黑胶底的炒豆声都是合成出来的。
几个细节能看出作者的功力：
?obs，界面自动隐藏、音乐自动开始，直接当直播背景；S 一键把当前画面存成 1920×1080 的 PNG 壁纸。它的商业化打法也值得单独一说：网页免费，但 16 城的 1080p60 视频循环素材在 Gumroad 上卖（可用于含商业化的直播背景，需署名）；每座城市的广告牌出租，你的品牌可以用像素画进场景。免费产品+素材售卖+场景内广告，一个人跑通了三条收入线。
跟国内同类对比：国内专注场景基本被两类占据——网易云的 lofi 歌单（版权歌，改天可能就下架）和潮汐、番茄 ToDo 这类订阅制 App。YouTube 上的 Lofi Girl 直播间是海外标杆但要科学上网。Lofi Cities 的差别是本质性的：音乐是当场合成的，不依赖任何曲库，没有版权问题，还能离线、能当直播背景、能白嫖 1080p 壁纸。香港和东京两座城市对中文用户还有点加成的亲切感。
适用人群：写码/写文档需要背景音的人；做陪伴式直播、学习直播的主播；做视频需要无版权城市夜景素材的创作者。
把三件放一起看，结论比单个工具更有价值：2026 年下半年冒头的爆款小工具，全是「小切口 + 浏览器即全部 + 单人可维护」。reladraw 零依赖吐 SVG，Lofi Cities 连音乐都不从服务器拉，Whiteboard 直接开源让你自部署。服务器成本趋近于零，一个人就能养活。这也是为什么它们三天就能冲上 HN 首页——试用门槛低到打开链接就是全部。
flowchart TD
A["你现在要干什么"] --> B["给文档配架构图"]
A --> C["写代码前先理设计"]
A --> D["只想要专注背景音"]
B --> E{"需要精确控制布局吗"}
E -->|要| F["reladraw<br/>文字定相对位置<br/>一条命令出SVG"]
E -->|不要| G["Mermaid<br/>全自动布局凑合用"]
C --> H["Whiteboard<br/>YC W26开源设计画布<br/>MIT可自部署"]
D --> I["Lofi Cities<br/>浏览器实时合成Lofi<br/>免费无账号"]
F --> J["装agent技能<br/>让Claude Code顺手出图"]
H --> K["拉仓库给团队<br/>做设计评审"]
I --> L["按P开小窗<br/>直播加?obs参数"]
| 场景 | 你知道的 | 海外已经在用的 | 差距点 |
|---|---|---|---|
| 画架构图 | Mermaid 布局失控，draw.io 手拖半天 | reladraw：文字声明相对位置，AI 可稳定生成 | 时间差+方法差 |
| 软件设计 | 飞书白板/脑图，画完即丢 | Whiteboard：专为软件设计的开源画布 | 认知差 |
| 专注背景音 | 网易云歌单、订阅制白噪音 App | Lofi Cities：本地合成、可直播、可离线 | 价格差 |
| 做工具出海 | 卷 Agent、卷大模型应用 | 小切口+零服务器成本的个人工具照样上 HN | 视角差 |
npm install -g reladraw，把 README 里的示例跑一遍出张 SVG；然后 npx skills add reladraw/reladraw -g，下次让 Claude Code 画图，直接验收；?obs 这招用起来；本文由「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 等场景全覆盖。