使用 D2 图表语言，如何在其他两个形状之间渲染一组形状

Question

我在 D2 Playground 上使用以下 D2 图表代码和 Dagre 渲染引擎来表示分区布局：

nvme0n1: {
  shape: cylinder
  p1 -> p2 -> p3
}

nvme1n1: {
  shape: cylinder
  width: 20
  p1 -> p2 -> p3
}

RAID1: {
  FAT32
}

RAID0: {
  LUKS: {
    "Filesystem (ext4, btrfs, etc.)"
  }
}

SWAP0: "Swap (Encrypted)"
SWAP1: "Swap (Encrypted)"

nvme0n1.p1 -> RAID1 -> nvme1n1.p1
nvme0n1.p2 -> SWAP0
nvme1n1.p2 -> SWAP1
nvme0n1.p3 -> RAID0 -> nvme1n1.p3

直接链接到游乐场

这会产生以下图像：

我还尝试添加一个外部盒子并使用 ELK 引擎，代码如下：

outsidebox: {
  width: 2000

  nvme0n1: {
    shape: cylinder
    p1 -> p2 -> p3
    height: 400
  }

  nvme1n1: {
    shape: cylinder
    height: 400
    p1 -> p2 -> p3
  }

  RAID1: {
    FAT32
  }

  RAID0: {
    LUKS: {
      "Filesystem (ext4, btrfs, etc.)"
    }
  }

  SWAP0: "Swap (Encrypted)"
  SWAP1: "Swap (Encrypted)"

  nvme0n1.p1 -> RAID1 -> nvme1n1.p1
  nvme0n1.p2 -> SWAP0
  nvme1n1.p2 -> SWAP1
  nvme0n1.p3 -> RAID0 -> nvme1n1.p3
}

直接链接

我得到了下图：

我的最终目标是让两个圆柱体彼此水平，并且所有方块/容器（两个交换，RAID0 和 RAID1）位于它们之间的一列中。我并不关心交换是否彼此重叠或并排，但我希望从两个驱动器

p1

和

p3

形状到它们之间适当的

RAID

容器有直线。

这种类型的定制是否可以在 D2 中使用任何引擎（在 D2 Playground 或其他站点/库上？）

Answer 1

这不适用于 Dagre 或 Elk，因为默认情况下它们会尝试使用结构中的流信息来引导图中的边。圆柱体的连接也是“定向”的，因此布局将排列它们，以便相应的节点将彼此重叠而不是彼此相邻。

我不知道 Dagre 或 Elk（特别是在 D2 的上下文中），但要回答您对替代库的问题：使用 yFiles 库，您可以指定某些边缘不应在分层布局或某些节点应放置在同一垂直层上。

如果您不指定这些约束，yFiles 库将提供类似的绘图，否则。

这里是一个示例图，它是在 yEd-live 中使用“从草图”模式自动布局的，它允许您手动指定相同层/相同列约束。您也可以通过编程方式执行此操作，如在此演示中所示。对于这种情况，您将指定 3 列，将圆柱体放入外部列，将其余项目放入第二列，然后声明从圆柱体到中间列的边缘为“无向”。

^{免责声明：我为创建上述（免费和商业）工具的公司工作。我的评论仅代表我自己，不代表公司。}