@bendyline/squisq-graph (英语)

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

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

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

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 单相机 麻省理工学院 有执照.