# @ai-matrx/diagrams 中文文档

规范地址：https://npmcn.com/package/%40ai-matrx/diagrams/

版本：0\.4\.17
npm 元数据更新时间：2026-10-28T18:31:45.271Z
中文译文更新时间：2026-11-05T22:41:58.069Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40ai-matrx/diagrams
原文对照：https://npmcn.com/package/%40ai-matrx/diagrams/?lang=original
项目主页：https://github.com/AI-Matrix-Engine/aidream/tree/main/apps/shared/diagrams#readme
源码仓库：https://github.com/AI-Matrix-Engine/aidream

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

- 包体积（解压后）：7.9 MB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：0 个
- 首次发布：2026-10-22T15:19:17.237Z
- 最新版本发布：2026-10-28T18:31:44.565Z
- 近 30 天下载量：11019（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 20 个）

## 中文简介

AI Matrx图引擎:将3.2.0作为十种图型的纯函数(验证,布局,渲染),外加纯-DOM测量脚本,将渲染的图变成数字.

## 安装

```sh
npm install @ai-matrx/diagrams
```

也可以使用：`pnpm add @ai-matrx/diagrams`、`yarn add @ai-matrx/diagrams`、`bun add @ai-matrx/diagrams`

## README

# @ai- matrx/ 图表

AI Matrx 图表引擎: [保存](https://github.com/tt-a1i/archify) 3.2.0(麻省理工学院) **纯函数**。一个光谱进入;一个经过验证的、铺设的、自成一体的图表在节点出现 或者在浏览器中,没有节点内置,没有文件系统和网络.

```bash
npm install @ai-matrx/diagrams
```

```ts
import { validate, layout, render } from "@ai-matrx/diagrams";

const spec = { meta: { title: "Checkout", subtitle: "Order to paid" }, /* ... */ };

const checked = validate("workflow", spec, { quality: "showcase" });
// { ok, diagnostics: [{ code, severity, message, subject, evidence, supportedFixes }], composition, checks }

const geometry = layout("workflow", spec); // { receipt }  (Archify's --layout-json contract)
const picture = render("workflow", spec, { theme: "dark" }); // { svg, html, receipt }
```

十个类型: `architecture`, (中文(简体) ), `workflow`, (中文(简体) ), `sequence`, (中文(简体) ), `dataflow`, (中文(简体) ), `lifecycle`, (中文(简体) ), `erd`, (中文(简体) ), `class`, (中文(简体) ), `tree`, (中文(简体) ), `timeline`, (中文(简体) ), `waterfall`。每个函数 **从不丢入不良输入**: 计程错误,布局拒绝 而未知类型又以 `Diagnostic`s,每个人说什么是错的,在哪里,与数字,和 支持哪些修正.

`render().html` 是 Archify 的完整独立浏览器页面(约800 KB,包括字体),并且是 字节- 与“ 保存 CLI” 所写内容相同( 软件包的等同测试为全部 25 捆绑) (见e/cn.4/sub.2/2003/l.31). `render().svg` 仅是图;它从该图的 CSS 变量中取出颜色 周围页面.

## 嵌入应用程序

`render(type, spec, { theme, mode: "embed", legend? })` 返回您自己内部托管的图片 UI:没有标题,主题切换,导出菜单,工具栏,护照弹出,节点索引或卡片. `svg` 实值 自我主题(主题符号、类和字体内含,所有范围都扩大到 `svg.mxd`)并总是显示WALE 图片:从不裁剪,从不卷起. `bindEmbed` 与两个轴上的容器相匹配(a) 内容高的主机以被封顶的高度获得全宽并添加了缩放(Ctrl/Cmd+wheel或citch,), 拖到锅上, `zoomIn`编号 :`zoomOut`编号 :`resetZoom` 手柄上,或 `controls: true` 用于内置按钮). `data-mxd-min-width` 作为衡量尺度的可识别底座. `html` 是一个iframe 的小文档 `srcdoc` 并绘制自己的缩放按钮。 点击或激活节点发射 `diagram:node` (单位:千美元)`detail: {id, label, type}`; svg 上的自定义Event, 外加设定时给父方的邮件),所以 你的UI决定要展示什么。 当你挂载 `svg` 自己弦,打电话 `bindEmbed(svgElement)` 一次 这是在文件中.

节点状态在图片上,从不移动它: `handle.setNodeState({status, current, tone})` (或 `nodeState` 绑定选项)绘制出每个节点的状态(`idle|pending|running|done|warning|failed|skipped`数字 : 平面图 平面图 平面图; `running` 旋转,除非读者喜欢减少运动,"你是一个 这里的节点(一个破碎的环和 `aria-current="step"`,与 `select`页:1 节点( e)`cyan|green|violet|amber|rose|orange|slate`) (中文(简体) ). 每个颜色都是图片中自己的主题符号之一. `handle.legend()` 仅列出绘制的内容,并实际使用颜色(`DIAGRAM_NODE_STATUSES`, (中文(简体) ), `DIAGRAM_NODE_TONES` 名称集).

### 选择目标宽度

`DESKTOP_READER_DIAGRAM_WIDTH` 是引擎的桌面阅读器宽度,目前为930 CSS像素. A 类 `targetWidth` 其下可以进行狭长的适应,必要时可以进行更广泛的回落. 在它上方,引擎绘制成书面的光谱。 一个主机重试一个宽度的被修改的图表 容器可以使用 `DESKTOP_READER_DIAGRAM_WIDTH - 1` 以保留窄放适应.

```ts
import { DESKTOP_READER_DIAGRAM_WIDTH, render } from "@ai-matrx/diagrams";
const picture = render("workflow", spec, { targetWidth: DESKTOP_READER_DIAGRAM_WIDTH - 1 });
```

## 度量成像

`@ai-matrx/diagrams/measure` 是一个纯 DOM 函数, 将已渲染的图变成数字 (单位:千美元)`inspection.v1`:文本大小,被剪接和被截断的文本,重叠,出界元素,交叉, 标签在行上,文本对比.

```ts
import { measure } from "@ai-matrx/diagrams/measure";
const inspection = measure(document.querySelector("svg")!);
```

对于无头抓取,注入与文本相同的功能,这样一个浏览器和一个无头页面返回 同样的JSON:

```ts
import { MEASURE_SCRIPT, SETTLE_EXPRESSION, measureExpression } from "@ai-matrx/diagrams/measure";
await page.setContent(render("workflow", spec).html!);
await page.evaluate(SETTLE_EXPRESSION); // fonts + the viewer's layout
const inspection = await page.evaluate(measureExpression("svg"));
```

## 这里有什么

无反应( 聊天和帆布渲染器位于 `@ai-matrx/rich-content`),不启动浏览器(该 刮刮器进行无头抓取,没有文件输出,没有git或寄存器-证据验证,没有 网络品牌抓取. 内建品牌标识解析; 拒绝使用裸露的 URL 或 文摘标注品牌 诊断。 见 `NOTICE` 从Archify那里得来的是什么 改变了什么 哪些第三方标记 由于许可证原因被撤销.

有一个很薄的CLI(`ai-matrx-diagrams render|validate|layout`它只用于对等测试 与原始档案CLI相对.

## 常见问题

### @ai-matrx/diagrams 是什么？

AI Matrx图引擎:将3\.2\.0作为十种图型的纯函数\(验证,布局,渲染\),外加纯-DOM测量脚本,将渲染的图变成数字\.

### 如何安装 @ai-matrx/diagrams？

在项目目录运行 npm install @ai-matrx/diagrams，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 ai-matrx-diagrams，可以用 npx ai-matrx-diagrams 直接运行。

### @ai-matrx/diagrams 支持 TypeScript 吗？

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

### @ai-matrx/diagrams 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ai-matrx/diagrams 需要什么版本的 Node\.js？

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

### @ai-matrx/diagrams 可以商用吗？

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

### @ai-matrx/diagrams 的下载量有多少？

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

### @ai-matrx/diagrams 还在维护吗？

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