给 README 加动态徽章和图表:一条 URL 搞定,不用注册也不用 key

2026-08-12 · README, 开源, 工具

我做的这套东西里,有一个功能是我自己完全没料到会变成主力的:一条 URL 生成一张图,直接嵌进 README

上线的时候我只是顺手做的,想着 mermaid.ink 那种东西挺方便,自己也来一个。结果拉数据一看,它是整个站里调用量最大的一块——七天里 268 次、155 个不同的来源,而且访问日志里赫然出现 go-camo 这个 UA,那是 GitHub 的图片代理。也就是说:有人把图嵌进了自己的 README,之后每次有人翻那个页面,就产生一次调用。

嵌一次,之后就一直在跑。这是我做的所有功能里唯一一个"复利"的。

所以我把它扩了一圈,现在支持五种,都是同一个思路:URL 即图片,没有 SDK、不用注册、不用申请 key。

五种形态

徽章——README 里最常见的那种小标签:

`` ![](https://ainetcafe.com/i/badge/build-passing-brightgreen) ``

标签-内容-颜色 三段,颜色可以写名字(brightgreen/blue/red/orange…)也可以直接写 hex。中文也行,宽度会自动算。

图表——标签和数值用竖线分开:

`` ![](https://ainetcafe.com/i/chart/Mon,Tue,Wed|3,7,5) ``

?type=line 换折线,还有 pie、doughnut、radar、scatter。注意竖线在 URL 里要写成 %7C

架构图——Mermaid、PlantUML、Graphviz 等二十多种图表语言:

`` ![](https://ainetcafe.com/i/mermaid/<base64编码的源码>) ``

把路径里的 mermaid 换成 plantuml / graphviz 就切语言,加 ?format=png 出位图。

二维码:

`` ![](https://ainetcafe.com/i/qr/https%3A%2F%2Fexample.com) ``

最有意思的是第五种:让图指向你的仓库文件

前面四种都是"把内容编码进 URL",内容一改就得重新生成一条 URL。第五种不一样——URL 直接指向仓库里的源文件:

`` ![](https://ainetcafe.com/i/url/raw.githubusercontent.com/你/仓库/main/docs/arch.mmd) ``

你改了 arch.mmd,README 里的图自动就变了,不用重新生成、不用替换链接、不用提交图片文件。架构图跟着代码走,这是我自己用得最多的一个。

它还能直接指向 README.md 本身——会自动把里面 ``mermaid 代码块取出来渲染(?block=2` 取第二张图)。所以你可以把图表源码就写在 README 里,再嵌一张它自己渲染出来的图。

为什么不用 key

因为要嵌在别人的 README 里。任何需要注册、需要 token、需要 SDK 的东西,都不可能被随手嵌进一个开源项目——作者不会为了一张图让所有读者去申请什么东西。所以这条链路必须是:复制 URL、粘贴、结束。

同理,徽章那个我是纯手写 SVG 实现的,不依赖任何渲染引擎。因为嵌在别人 README 里的东西一旦挂了,是别人的页面显示裂图,这个责任我不想担。引擎可以挂,徽章不能。

一个复制即用的页

我把五种形态整理成了一页,每种都有实时预览和一键复制的 Markdown:ainetcafe.com/embed

顺便:agent 也能自己生成这些图

这些图不止人能拼,AI agent 也能直接产出。把 AI 网吧接进你的 agent(一行 MCP 地址 https://ainetcafe.com/mcp),里面的 make_badge / make_chart / render_diagram / text_to_image 都会返回可嵌入的 URL 和现成的 Markdown 行。

让 agent 写完文档顺手把架构图也画了、把徽章也挂上,是个挺自然的用法。

---

利益披露:ainetcafe.com 是我做的。上面这些都免费用、有匿名额度,不用注册。写这篇是因为那个数据确实让我意外——一个顺手做的功能,成了整个站里唯一会自己长大的东西。

给你的 agent 接上 AI 网吧(一行 MCP)→