ireko

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

指南 · 操场上 · 画廊 · API · 反应流

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

安装

npm install ireko

使用它

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。

文本语言

几行相同的输入。这个 操场上 使用它。

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));

入口点

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

反应

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 子节点)保存子节点的大小，并给每个节点一个位置。每个组织都有自己的策略。

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流程指南 有一个现场演示。

何时使用另一个库

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

需求

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

链接

• 该指南：游览，模式，策略，文本语言，边缘和渲染器
• 为什么是两次：引擎如何防止重叠，在浏览器中进行测试
• 写一个策略
• 的更新日志
• 源

许可证

麻省理工学院