# ireko 中文文档

规范地址：https://npmcn.com/package/ireko/

版本：0\.1\.3
npm 元数据更新时间：2026-11-03T21:34:09.989Z
中文译文更新时间：2026-11-03T22:24:28.483Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/ireko
原文对照：https://npmcn.com/package/ireko/?lang=original
项目主页：https://mark1russell7.github.io/ireko/
源码仓库：https://github.com/mark1russell7/ireko

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

- 包体积（解压后）：709 kB，56 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12
- 运行依赖：0 个
- peer 依赖：react \>=18，@xyflow/react ^12\.0\.0
- 首次发布：2026-10-16T22:59:23.956Z
- 最新版本发布：2026-11-03T21:34:09.689Z
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

TypeScript的可组合图形和树布局。为每个容器选择一个布局，并为任何渲染器获取框和路由边缘。

## 安装

```sh
npm install ireko
```

也可以使用：`pnpm add ireko`、`yarn add ireko`、`bun add ireko`

## README

# ireko

**TypeScript的可组合图形和树布局。为每个容器选择一个布局，并为任何渲染器获取框和路由边缘。**

![A system architecture laid out by ireko: nested containers with services, and extra edges between them](https://raw.githubusercontent.com/mark1russell7/ireko/main/packages/ireko/src/__golden__/architecture.svg)

[指南](https://mark1russell7.github.io/ireko/learn/tour/) · [操场上](https://mark1russell7.github.io/ireko/playground/) · [画廊](https://mark1russell7.github.io/ireko/gallery/) · [API](https://mark1russell7.github.io/ireko/reference/api/) · [反应流](https://mark1russell7.github.io/ireko/guides/react-flow/)

ireko在日语中是一组盒子的意思。该库布局了嵌套框的树：树环的网格，架构图，整洁的组织结构图或React Flow子流。它没有运行时依赖项。经过压缩和压缩后，内核大约为13 kB。

## 安装

```sh
npm install ireko
```

## 使用它

```ts
import { grid, layout, radial } from "ireko";
import { toSVG } from "ireko/svg";

const root = grid.nested("system",
  radial.nested("web", "home", "cart", "search"),
  grid("api", "auth", "orders"),
);
const result = layout({ root, edges: [{ source: "cart", target: "orders", label: "checkout" }] });

result.nodes;  // a box for each node: { id, x, y, width, height, container, depth, ... }
result.edges;  // a route for each edge: { source, target, kind, points, label }
// The router avoid draws edges around the other boxes: layout(input, { router: "avoid" })
result.issues; // the findings of the audit: [] for this input
document.body.innerHTML = toSVG(result);
```

## 两种观点

每个有子节点的节点选择两个东西：

-   **一个策略:** 如何安排它的孩子。 `grid` 把它们排成行和列。 `radial` 把它们放在戒指上。 `tree` 制作一个整洁的树，例如组织结构图。 `layers` 从孩子之间的边缘绘制流程图。
-   **一个模式:** 它的孩子去哪里。在 `linked` 模式下，它们在节点周围，并且边将它们连接起来。在 `nested` 模式时，它们位于节点的框内。

您可以将自己的策略添加到引擎中。选择加入策略 `force` 从 `ireko/strategies/force` 安排一个没有层级的网络。将其注册为 `createEngine`。

这两种选择仅适用于一个节点，因此每个容器都有自己的布局。引擎在放置每个子树之前测量它们，所以没有两个子树重叠。每个布局都检查自己，并把每个问题放进去 `issues`。

## 文本语言

几行相同的输入。这个 [操场上](https://mark1russell7.github.io/ireko/playground/) 使用它。

```ts
import { layout } from "ireko";
import { toSVG } from "ireko/svg";
import { parse } from "ireko/text";

const parsed = parse(`
  system nested {
    web radial nested { home cart search }
    api { auth orders }
  }
  cart -> orders "checkout"
`);
if (parsed.ok) document.body.innerHTML = toSVG(layout(parsed.input));
```

## 入口点

| 进口 | 内容 |
| --- | --- |
| `ireko` | 引擎，策略，路由器，审计和构建器。它不进口任何东西。 |
| `ireko/text` | `parse` 和 `print` 对于文本语言 |
| `ireko/svg` | `toSVG` （字符串，也在服务器上）和 `mountSvg` （现场观看） |
| `ireko/dom` | `mountDom`：一个实时视图，每个框有一个元素 |
| `ireko/canvas` | `mountCanvas`：画布上的实时视图，用于大型布局 |
| `ireko/render` | 主题，视口和实时视图的动画 |
| `ireko/react` | `useLayout`， `LayoutSvg` 和 `LayoutView` |
| `ireko/xyflow` | `layoutFlow`， `toXYFlow`， `PolylineEdge` 和 `GroupNode` 用于React Flow 12 |
| `ireko/examples` | 画廊的输入 |

实时视图具有平移、缩放、选择和从一个布局到下一个布局的动画。

## 反应

```tsx
import { LayoutView, useLayout } from "ireko/react";

function Diagram({ input }) {
  const result = useLayout(input); // keep input in a memo or a state
  return <LayoutView layout={result} style={{ height: 400 }} onPick={(id) => console.log(id)} />;
}
```

`LayoutSvg` 绘制一个没有效果的静态SVG，因此它与服务器呈现一起工作。

## 反应流子流

`layoutFlow` 给每个组一个节点 `parentId` 子节点)保存子节点的大小，并给每个节点一个位置。每个组织都有自己的策略。

```tsx
import { ReactFlow } from "@xyflow/react";
import { edgeTypes, layoutFlow, nodeTypes } from "ireko/xyflow";

const { nodes, edges } = layoutFlow(myNodes, myEdges, {
  nodeSpec: (node) => (node.id === "server" ? { layout: "radial" } : undefined),
});

<ReactFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} fitView />;
```

这个 [React流程指南](https://mark1russell7.github.io/ireko/guides/react-flow/) 有一个现场演示。

## 何时使用另一个库

这个库展示了容器树。对于带有层的大型有向图，例如带有长链的流程图，请使用dagre或ELK。这个库没有交叉减少，没有端口，没有围绕障碍物的路由。这个 [比较](https://mark1russell7.github.io/ireko/compare/) 请听详细报道。

## 需求

-   当前浏览器，或Node.js 22.12或更高版本
-   ESM只
-   React 18或更高版本 `ireko/react`, `@xyflow/react` 12 `ireko/xyflow`． 两者都是可选的对等依赖项。

## 链接

-   [该指南](https://mark1russell7.github.io/ireko/learn/tour/)：游览，模式，策略，文本语言，边缘和渲染器
-   [为什么是两次](https://mark1russell7.github.io/ireko/design/two-passes/)：引擎如何防止重叠，在浏览器中进行测试
-   [写一个策略](https://mark1russell7.github.io/ireko/learn/custom-strategy/)
-   [的更新日志](https://github.com/mark1russell7/ireko/blob/main/packages/ireko/CHANGELOG.md)
-   [源](https://github.com/mark1russell7/ireko)

## 许可证

麻省理工学院

## 常见问题

### ireko 是什么？

TypeScript的可组合图形和树布局。为每个容器选择一个布局，并为任何渲染器获取框和路由边缘。

### 如何安装 ireko？

在项目目录运行 npm install ireko，或使用 pnpm add / yarn add / bun add。

### ireko 支持 TypeScript 吗？

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

### ireko 支持 ESM 还是 CommonJS？

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

### ireko 需要什么版本的 Node\.js？

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

### ireko 可以商用吗？

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

### ireko 还在维护吗？

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