Diagram Studio

我是 Bibas。和你们中的许多人一样，我也在关注 Andrej Karpathy。上周他发了一条帖子，列出了一层层递进的更好阅读 LLM 输出的方法：与其要段落，不如要图表；更进一步，让模型输出"HTML 格式"，就能得到一个漂亮、可交互的网页。

我这样用了好几个月，但图表一直是失败的地方。你让 agent 画出你的架构，得到的却是一个盒子叠一个盒子、标签压在箭头上、箭头指向错误的服务。模型理解了系统，只是不知道该把元素放在哪里。

于是 Diagram Studio 把这件事拆成了两半：

→ Agent 写一段简短的 JSON 规格说明：哪些盒子、哪些箭头、哪些分组

→ 网格引擎负责排版：盒子放在格子里，箭头只在格子之间的空隙穿过，这样盒子就不会重叠，箭头也不会穿过它们

→ 引擎会检查规格说明，在你看到之前就告诉 agent 需要改哪里

你能得到：

• 一个 HTML 文件，约 225 KB。可离线使用，无需安装，无需依赖

• 通过一个 URL（/llms.txt）即可接入 Agent，支持 Claude Code、Codex、Cursor，或直接在 claude.ai 对话

• 如果你想自己拖动盒子，还有可视化编辑器

• 可导出为 SVG、PNG、独立的 HTML 页面、可嵌入的 iframe，或分享链接

• 支持 Mermaid 导入

• 免费，MIT 许可

一个不错的初次测试：让你的 agent 读取 diagram-studio.bibas.dev/llms.txt，把你自己的项目画成图表。

我今天全天都在。告诉我你的 agent 总是画错哪些图表——这些就是我接下来想解决的场景。