你上一次在中文技术圈看到这三个名字，是什么时候？答案大概率是：从来没有。过去48小时，Hacker News 的 Show HN 栏目被三件小工具刷了屏：一个398分的「用文字指定坐标的画图语言」reladraw、一个三天拿下421分和2400+ Star 的 YC W26 新项目 Whiteboard，还有一个300分、正在 Product Hunt 首页挂着的摸鱼神器 Lofi Cities。三件货有一个共同点：都不到一周大，中文圈目前零教程、零评测。今天这篇把三件全部拆开——是什么、多少钱、跟国内的东西比强在哪、你今晚就能怎么用。看完这篇，你在画架构图、做软件设计、找专注背景音这三件事上，信息差直接拉满。 --- ## 一、reladraw：把 draw.io 的活，压缩成五行文字 **官网/仓库**：https://github.com/reladraw/reladraw （在线试玩：https://reladraw.github.io/reladraw/ ） **价格**：完全免费，Apache-2.0 开源 **现状**：v0.15.0，TypeScript 写的解析器+布局引擎+SVG 渲染器，零运行时依赖 先说它解决什么问题。画图工具圈有一个存在多年的「两头堵」： - **Mermaid、Graphviz、D2** 这一派：你声明节点和连线，位置它自己算。省事，但当你脑子里有一张具体的图时，它摆出来的布局总差点意思； - **draw.io、Excalidraw** 这一派：位置完全手动，想精确控制？那就一个框一个框地拖，或者让 AI agent 去手算坐标、改一坨冗长的 XML。 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，属于早期上车，别拿它画公司级的正式交付图，自己文档和博客里用正合适。 ## 二、Whiteboard（YC W26）：三天 2400 Star，给「AI 时代想不清楚就写码」的人一块画布 **仓库**：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 生成的「能跑但看不懂」的代码折磨过的所有人。 ## 三、Lofi Cities：一座像素城市 + 一台住在你浏览器里的作曲机 **官网**：https://loficities.com （正在 Product Hunt 首页） **价格**：网页完全免费、无账号、无弹窗；变现靠卖视频素材和广告牌 **现状**：Show HN 300 分、120 评论；作者 Safa Elmali 独立开发 前两件是给程序员的，这件是给所有人的。打开就是一个像素风的夜晚城市：巴黎阁楼、东京塔下的霓虹雨、香港维多利亚港、悉尼的蓝花楹……16 座城市随你切。配的音乐不是播放器里放的歌，而是**你的浏览器用 Web Audio API 现场合成的**——和弦进行、鼓组、贝斯、旋律，全部实时生成，零采样、零录音，所以歌单永远播不完。连黑胶底的炒豆声都是合成出来的。 几个细节能看出作者的功力： - **9 种风格**随你切：jazzhop（默认，Rhodes 电钢琴+摇摆 boom-bap）、钢琴、ambient、bossa、synth city pop、lofi house、吉他、sad、甚至 medieval（鲁特琴+牧笛）； - **天气系统**：给任何城市加雨、雪、落叶、晴天，城市环境音跟着变； - **专注/睡眠定时器**：25/5 或 50/10 番茄钟循环，睡眠模式 15–90 分钟淡出； - **按 P 开画中画小窗**浮在所有应用上面，**离线可用**（PWA，开过一次断网照跑）； - **做直播的注意**：OBS 里加浏览器源，地址后面加 `?obs`，界面自动隐藏、音乐自动开始，直接当直播背景； - 按 `S` 一键把当前画面存成 1920×1080 的 PNG 壁纸。 它的商业化打法也值得单独一说：网页免费，但 16 城的 1080p60 视频循环素材在 Gumroad 上卖（可用于含商业化的直播背景，需署名）；每座城市的广告牌出租，你的品牌可以用像素画进场景。免费产品+素材售卖+场景内广告，一个人跑通了三条收入线。 **跟国内同类对比**：国内专注场景基本被两类占据——网易云的 lofi 歌单（版权歌，改天可能就下架）和潮汐、番茄 ToDo 这类订阅制 App。YouTube 上的 Lofi Girl 直播间是海外标杆但要科学上网。Lofi Cities 的差别是本质性的：音乐是当场合成的，不依赖任何曲库，没有版权问题，还能离线、能当直播背景、能白嫖 1080p 壁纸。香港和东京两座城市对中文用户还有点加成的亲切感。 **适用人群**：写码/写文档需要背景音的人；做陪伴式直播、学习直播的主播；做视频需要无版权城市夜景素材的创作者。 ## 这三件货，共同指向一个趋势 把三件放一起看，结论比单个工具更有价值：**2026 年下半年冒头的爆款小工具，全是「小切口 + 浏览器即全部 + 单人可维护」**。reladraw 零依赖吐 SVG，Lofi Cities 连音乐都不从服务器拉，Whiteboard 直接开源让你自部署。服务器成本趋近于零，一个人就能养活。这也是为什么它们三天就能冲上 HN 首页——试用门槛低到打开链接就是全部。 ```mermaid flowchart TD A["你现在要干什么"] --> B["给文档配架构图"] A --> C["写代码前先理设计"] A --> D["只想要专注背景音"] B --> E{"需要精确控制布局吗"} E -->|要| F["reladraw
文字定相对位置
一条命令出SVG"] E -->|不要| G["Mermaid
全自动布局凑合用"] C --> H["Whiteboard
YC W26开源设计画布
MIT可自部署"] D --> I["Lofi Cities
浏览器实时合成Lofi
免费无账号"] F --> J["装agent技能
让Claude Code顺手出图"] H --> K["拉仓库给团队
做设计评审"] I --> L["按P开小窗
直播加?obs参数"] ``` ## 信息差总结 | 场景 | 你知道的 | 海外已经在用的 | 差距点 | |------|---------|---------------|--------| | 画架构图 | Mermaid 布局失控，draw.io 手拖半天 | reladraw：文字声明相对位置，AI 可稳定生成 | 时间差+方法差 | | 软件设计 | 飞书白板/脑图，画完即丢 | Whiteboard：专为软件设计的开源画布 | 认知差 | | 专注背景音 | 网易云歌单、订阅制白噪音 App | Lofi Cities：本地合成、可直播、可离线 | 价格差 | | 做工具出海 | 卷 Agent、卷大模型应用 | 小切口+零服务器成本的个人工具照样上 HN | 视角差 | ## 行动指南 1. **今晚10分钟**：`npm install -g reladraw`，把 README 里的示例跑一遍出张 SVG；然后 `npx skills add reladraw/reladraw -g`，下次让 Claude Code 画图，直接验收； 2. **本周**：打开 https://github.com/devdotfast/whiteboard 过一遍 README 和 issues——三天 2400 Star 的项目，早看一周就早一周知道海外 dev tools 在往哪卷；团队有设计评审需求的，评估自部署； 3. **马上**：收藏 https://loficities.com ，写代码时按 P 开小窗当背景；做直播的把 `?obs` 这招用起来； 4. **跳出工具看**：三个产品都是「打开链接就是全部」的打法。想做出海小工具的，把「零服务器、单文件、免费+周边变现」这个组合抄进你的选题库。 ## 参考来源 1. Show HN: Reladraw — A diagram language where you decide where to place things：https://github.com/reladraw/reladraw 2. reladraw 在线试玩：https://reladraw.github.io/reladraw/ 3. Show HN: Whiteboard (YC W26)：https://github.com/devdotfast/whiteboard 4. Lofi Cities 官网（含 FAQ 与更新日志）：https://loficities.com 5. Hacker News Show HN 栏目（本文三件货均来自该页）：https://news.ycombinator.com/show --- > 本文由「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 等场景全覆盖。