# @bendyline/squisq-graph 中文文档

规范地址：https://npmcn.com/package/%40bendyline/squisq-graph/

版本：2\.13\.1
npm 元数据更新时间：2026-10-29T03:23:47.083Z
中文译文更新时间：2026-11-07T22:11:50.980Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bendyline/squisq-graph
原文对照：https://npmcn.com/package/%40bendyline/squisq-graph/?lang=original
项目主页：https://github.com/bendyline/squisq
源码仓库：https://github.com/bendyline/squisq

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

- 包体积（解压后）：114 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^22\.22\.2 \|\| ^24\.15\.0 \|\| \>=26\.0\.0
- 运行依赖：0 个
- 首次发布：2026-10-21T13:27:59.325Z
- 最新版本发布：2026-10-29T03:23:46.683Z
- 近 30 天下载量：2946（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

Squisq 的图形布局 : 带有正边缘路由的复合层布局, 有共享边端口的嵌入式容器, 确定性, 无依赖性, 并可在 Web Worker 中运行

## 安装

```sh
npm install @bendyline/squisq-graph
```

也可以使用：`pnpm add @bendyline/squisq-graph`、`yarn add @bendyline/squisq-graph`、`bun add @bendyline/squisq-graph`

## README

# @bendyline/squisq-graph (英语)

Squisq 的图形布局 : 复合层布局 ("Sugiyama") 垂直边缘路由。 把它交给盒子、可选容器和边缘 返回每个框的位置,并返回每个边缘的轴向路由.

-   **边缘流出一道.** 循环通过画出最小的边缘被打破 与流相抗衡,而节点被命令越行越少.
-   **集装箱保持完整.** 节点可以在容器节点内嵌入到任意 深处。 每个容器都是自己布置的,所以内装物不会泄漏 和边缘离开它的边界的港口。 边缘走向相同的 邻居共享一个端口(或与 `portSharing: 'container'`,每个边缘 共用一端端口).
-   **扇子读作树.** 长边缘进入一个节点 共享它们的弯道点, 在一个频道中汇合的运行 共享一个音轨, 所以一个枢纽绘制为 树干有树枝,而不是平行线的梳子.
-   **决取相取.** 相同的输入总是输出相同;链接是 被输入顺序所打破. `graphSignature` 指纹图及其 缓存选项.
-   **任何单位.** 大小节点,以像素表示,或以字符单元格表示 `integerCoordinates: true`。 。 。 .
-   **脱去主线.** `createWorkerLayoutEngine` 在 Web 中运行布局 工人回到电话线上,没人能开始.

0运行时间依赖;运行在浏览器和节点.

```ts
import { layoutGraph, polylinePath } from '@bendyline/squisq-graph';

const result = layoutGraph(
  {
    nodes: [
      { id: 'src', width: 60, height: 24 },
      { id: 'a.ts', width: 80, height: 28, parent: 'src' },
      { id: 'b.ts', width: 80, height: 28, parent: 'src' },
      { id: 'main.ts', width: 90, height: 28 },
    ],
    edges: [
      { id: 'm-a', source: 'main.ts', target: 'a.ts' },
      { id: 'a-b', source: 'a.ts', target: 'b.ts' },
    ],
  },
  { direction: 'right' },
);

for (const edge of result.edges) {
  const d = polylinePath(edge.points, { radius: 6 });
  // <path d={d} marker-end="url(#arrow)" />
}
```

在Squisq本身,它把自动接发的节点 `diagram` 模板 并备份 ASCII 图表编辑器 **安排** 动作 (单位:千美元)`arrangeAsciiDiagram`) (中文(简体) ).

部分 [s](https://github.com/bendyline/squisq) 单相机 麻省理工学院 有执照.

## 常见问题

### @bendyline/squisq-graph 是什么？

Squisq 的图形布局 : 带有正边缘路由的复合层布局, 有共享边端口的嵌入式容器, 确定性, 无依赖性, 并可在 Web Worker 中运行

### 如何安装 @bendyline/squisq-graph？

在项目目录运行 npm install @bendyline/squisq-graph，或使用 pnpm add / yarn add / bun add。

### @bendyline/squisq-graph 支持 TypeScript 吗？

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

### @bendyline/squisq-graph 支持 ESM 还是 CommonJS？

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

### @bendyline/squisq-graph 需要什么版本的 Node\.js？

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

### @bendyline/squisq-graph 可以商用吗？

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

### @bendyline/squisq-graph 的下载量有多少？

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

### @bendyline/squisq-graph 还在维护吗？

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