# @coldtea/pr-lens-renderer 中文文档

规范地址：https://npmcn.com/package/%40coldtea/pr-lens-renderer/

版本：0\.6\.2
npm 元数据更新时间：2026-11-08T19:00:55.662Z
中文译文更新时间：2026-11-10T10:47:49.626Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40coldtea/pr-lens-renderer
原文对照：https://npmcn.com/package/%40coldtea/pr-lens-renderer/?lang=original
项目主页：https://github.com/coldteadotai/pr-lens/tree/main/packages/renderer#readme
源码仓库：https://github.com/coldteadotai/pr-lens

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：895 kB，203 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.11
- 运行依赖：1 个
- 首次发布：2026-08-23T11:08:48.342Z
- 最新版本发布：2026-11-08T19:00:55.482Z
- 近 30 天下载量：289127（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 24 个）

## 中文简介

PR Lens渲染器:一个用自成一体的动画SVG出局的有计划有效的图表文档.

## 安装

```sh
npm install @coldtea/pr-lens-renderer
```

也可以使用：`pnpm add @coldtea/pr-lens-renderer`、`yarn add @coldtea/pr-lens-renderer`、`bun add @coldtea/pr-lens-renderer`

## README

# @ koldtea/pr-lens-resters - referser (英语)

一个有计划有效的PR Lens图文档,一个自成一体的动画SVG出局. 没有网络, 没有文件系统, 没有时钟 : 同一文档在任何机器上生成到相同的字节, 所以让一个图表被自己的散列处理 .

麻省理工学院 Coldtea AI.

```bash
pnpm add @coldtea/pr-lens-renderer
```

```ts
import { parseGraphDoc } from "@coldtea/pr-lens-schema";
import { render, renderAll } from "@coldtea/pr-lens-renderer";

const doc = parseGraphDoc(json);

// One diagram.
const { svg, width, height } = render(doc, { lens: "architecture", theme: "dark" });

// Every drill-down section, in the light/dark pair, plus the manifest a comment
// is built from. Pass themes: ["neutral"] for a surface that shows one image.
const { assets, manifest } = renderAll(doc, { config });
```

## 两个镜头

`architecture` 画出卡片的车道,上面写着变化: 彩色轮廓和每个三角洲的徽章, 清除被鬼所缠绕和被打穿的元素, 被自己的三角洲所涂上色线, 一个有光线的英雄边缘, 以及文件标有的任何东西上的行走脉冲 `animated`。 。 。 .

`data-flow` 绘制流程为序列: 参与者列、 生命线、 激活栏、 回箭头、 自我信息、 架构镜片在文档标记的每个步骤上的行走脉冲 `animated`。这些步骤共用一个周期,并依次进行:一个点一次过一箭,按步骤发生顺序,一个接一个步骤连续转接. 转弯完全花在了它的过道上,所以下个箭灯作为最后一个点会降落.

## GitHub 注释的渲染

每个文件都是自成一体的. 没有脚本,没有外部样式表,没有图像,没有字体文件,也没有需要周围页面的CSS自定义属性,因为GitHub通过一个没有该页面的代理服务器提供注释图像. 动画是SMIL, 它作为装入的 `<img>`;这里的准确图案是被证明在真实拉动请求注释中播放的图案.

主题是独立的文件而不是一个适应的文件,因为一个图像无法看到它登陆的页面的主题. 双双对齐:

```html
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="…-dark.svg">
  <img src="…-light.svg" alt="…">
</picture>
```

## 决定主义

硬性要求是,一个图不会在两个勉强改变任何事情的推力之间重新排列.

-   **深度** 是从源头发出的最长的路径,所以箭头点在它留下的节点下方. 周期的排序也通过将关闭的边缘放下来进行,选择的顺序是按文档顺序行走,而不是地图迭代顺序.
-   **`layout.rank` 财务报告和审定财务报表 `layout.laneOrder` 是提示**,作为发言而不是回答。 一个提示可以把一个节点推得更低;它不能将一个节点抬起在它的食物之上。 因此,取出模型的一丝不苟的提示不能颠倒边缘.
-   **深度在一个道内计算.** 仅晚入故事的一行车道仍然起于其列上方,一行车道上无名牌所占用的一行车道没有留下空行.
-   **文字从表格中测量**所以一个没有安装字体的CI跑者 和一台笔记本电脑一样.
-   **每个坐标在被写入前是圆形的**,每个比较都是按代码单位而不是按 `localeCompare`。在最后一点中不同的算术, 或查询主机的整理数据的一种, 将会改变字节, 和渲染散列.
-   **每个车道都是一样的固定宽度**一个恒常而不是任何来源于 车道所持有的东西 宽度从内容配对的每列到前列的内容,所以在第一车道上加上一个有长名的节点,可以滑走后行道后行道的每张卡片. 其代价是,持有狭窄东西的道比需要的要宽;稳定的价值更大。 一个车道头太长了,它乐队放弃了尾巴而不是扩大乐队.

在一车道上添加一个节点会留下其他车道中的每张卡片,具体位置在它之前或之后. 对此有考证,而参考文件有金色的SVG:更改为一是更改审查者所见所闻,因此在作出承诺前由人审查.

```bash
pnpm test                 # compares against the goldens
UPDATE_GOLDENS=1 pnpm test  # records them, for a human to read the diff of
```

## 地图集

每一个变相都带着一个 `atlas`:该图片的每个道,节点,边缘和流阶都落地,在同一视图框单元中,文件被写入.

```ts
const { svg, atlas } = render(doc, { lens: "architecture", theme: "dark" });
atlas.nodes["send-broadcast-bulk"]; // { x, y, width, height }
atlas.messages["send-pipeline"]?.["batch-post"];
```

弹出一个文件的平面 得绕起一个相接点,一个相接点用ID来命名它的元素。 只有渲染器知道它们中任何一个的结局,所以几何学在相片旁行走,而不是被一个必须猜测的读者测出.

流动步骤首先按出流键,因为一个步骤的ID只在它自己的流量内是独一无二的:两个流量可能每个带一个叫做 `retry`,而两个文档都不对.

地图集与SVG一样具有决定性意义. 同一个文档,相同的框,在同一密钥顺序中,每个坐标的圆形与文件旁边写到的坐标完全一致,所以一个框和它所代表的矩形在最后的位置不能有分歧. 主题从不移动任何东西, 所以一个地图集 回答两个半 `<picture>` 双人.

每个镜头都填充着它画的东西. 建筑镜头放出行道,牌和边并没走出行道;数据流镜头放出行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行道行 一个相同渲染的节点会画出两次,在两个堆叠的流中向一列行行走,得到覆盖两个行走道的框:一个发送到该节点的读取器正在被发送到所有行走道上. 牌盒是牌,而不是上方的徽章条,这是面纱可能暗淡的背景.

`routes` 将每个箭头按出,按键如 `edges`页:1 `path` 在画布上,加上它的 `label` 药盒里有一个 用它来点出一发箭头,因为弯曲箭头的边框也盖住它从未碰过的牌. 数据流镜头离开 `routes` 空因为 `messages` 已经装入了直立的台阶.

```ts
atlas.routes["composer-to-queue"]; // { path: "M218,154 L218,206", label: { x: 175.58, y: 172.5, width: 84.85, height: 15 } }
```

## 穿行者嵌入

```ts
import { renderWalkthroughEmbed } from "@coldtea/pr-lens-renderer";

const result = renderWalkthroughEmbed(doc, { theme: "dark" });
if (result.type === "rendered") write(result.embed.svg);
```

文档作为一款动画SVG走过,宽870,用于显示图像并运行无脚本的表面:拉出请求注释,README. 舞台上方的字幕被命名为"GitHub警示"(GitHub),相机在画布上自身路径和速度的图表之间飞来飞去,而每一步的焦点外出的背景被遮住,而不是被遮住,因为画面无法知道所登陆的页面的颜色. 巡回演出两次,以最后一步、标题和全部为主 `prefers-reduced-motion` 还是这样 只有图 参观旅行随行.

结果是 `absent` 用于一个没有走过的文件 `unresolvable`对于一个在图上画不到的旅游点的人来说. `renderAll` 绘制它要求的每半对嵌入物,并将其列在下面 `walkthrough` 在表里;a `neutral` 因为嵌入层是透明的,每半个调制.

帆布和嵌入式共享条纹布局,相机和走行道分辨率(`stripLayout`, (中文(简体) ), `frame`, (中文(简体) ), `interpolateFlight`, (中文(简体) ), `resolveWalkthrough`)),于是一步被设定在一地上,一地被设定在一地上. 浏览器捆绑从 `@coldtea/pr-lens-renderer/walkthrough`,没有达到节点; `planTiles` 并且嵌入自己留在根入处, 因为他们画.

## 惩戒

仓库的 `.github/pr-lens.yml` 是一个叠加,在布局前在此应用,并且从未被写回推断,因此随着代码的移动,一个更正一直被持有:

```ts
render(doc, { lens: "architecture", theme: "dark", config });
```

`rename`, (中文(简体) ), `lane` 财务报告和审定财务报表 `group` 地址节点由 `id:<node-id>` 或以迷惑的方式, A 类 `lane` 校正可能为从未声明的文档命名带; 它会创建, 并带有标签的 id, 所以写 `lane: infrastructure` 而不是说 `lane: l3`。 。 。 .

`exclude` 每一个边缘和流动步骤 触动它去掉的东西, 每一个指向别处的视图, 每个布局提示都留下了一些 已经消失的东西的命名, 和每一个走过的步骤, 哪个图或最后一个焦点元素随它而去。 两步以下的走行道也随之而去,因为一步就是标题。 半个箭头比无箭更糟糕,而更正后的文件是与其他文件一样的文件,所以它仍然被描述.

## 地址

由于 GitHub 的图像代理缓存硬化, 渲染器是内容地址 : 一个已更改的图表必须作为新的 URL 到达, 而不是作为新字节出现在旧的 URL . `contentHash`, (中文(简体) ), `renderAssetId` 财务报告和审定财务报表 `renderAssetFileName` 是这种格式的单一所有者,而建立这种URL的每一个表面都必须经过它们.

一个资产 `path` 安全加入输出目录,及其 `id` 永远是合法的 `Id`。视图 ID 由提取模型编写,合同允许其中包含 `/`, (中文(简体) ), `:` 财务报告和审定财务报表 `.`这样 `a/../../elsewhere` 是一个有效的代号;这些字符在进入地址的路上被重拼为一对一,这不能产生分隔符或点段. 重投可以延长一个已经接近合同极限的ID,所以一个会溢出一个可读的前缀,并会以整个原作的文摘结尾,这就是阻止两个不同观点被传递到同一个地址的原因.

## 无法信任的文本

标签、字幕和标题来自一个模型。 它们在边界被为XML所逃出,而代码点XML 1.0也没有拼写(大多数控制字符,孤独的代名词,两个非字符)也在那里被丢弃,因为这个计划限制标签的长度,但可能不包含哪个字符,其中一个会使文件无法解析,而不仅仅是看错.

## 拒绝

`PrLensRenderError` 携带一个 `code` 呼叫器可以打开 : `UNKNOWN_VIEW`, (中文(简体) ), `LENS_NOT_DECLARED`, (中文(简体) ), `NOTHING_TO_RENDER`, (中文(简体) ), `NO_FLOW_IN_SCOPE`, (中文(简体) ), `TOO_MANY_ASSETS`。解析的文件在其他方面是安全的: 渲染者信任 `@coldtea/pr-lens-schema` 永远不要重新验证它.

`TOO_MANY_ASSETS` 无法通过解析文档达到: 合同将视图树封入 `MAX_VIEWS`,这是 `MAX_RENDER_ASSETS` 由两个主题除以a `<picture>` 双人需要。 手造的可以到达它,因为这个盖子生活在一个精细而精细的状态中,无法活入所推断的类型. 支票是先验条件 `renderAll` 因为一个渲染的图片数量取决于呼叫者要求的多少主题.

* * *

部分 [PR 镜头](https://prlens.dev/)审查什么才是真正重要的.

## 常见问题

### @coldtea/pr-lens-renderer 是什么？

PR Lens渲染器:一个用自成一体的动画SVG出局的有计划有效的图表文档\.

### 如何安装 @coldtea/pr-lens-renderer？

在项目目录运行 npm install @coldtea/pr-lens-renderer，或使用 pnpm add / yarn add / bun add。

### @coldtea/pr-lens-renderer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @coldtea/pr-lens-renderer 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @coldtea/pr-lens-renderer 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.11。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @coldtea/pr-lens-renderer 可以商用吗？

@coldtea/pr-lens-renderer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @coldtea/pr-lens-renderer 的下载量有多少？

根据 npm 官方下载统计，@coldtea/pr-lens-renderer 在 2026/10/11 – 2026/11/09 这 30 天内被下载 289,127 次，日均约 9,638 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @coldtea/pr-lens-renderer 还在维护吗？

最新版本 0\.6\.2 发布于 2026/11/09（1 天前）；至今共发布 24 个版本，其中过去 12 个月发布了 24 个；首次发布于 2026/08/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。