Using the D2 Diagraming Language, How Do I render a set of shapes between two other shapes

Question

I'm using the following D2 Diagramming Code on the D2 Playground with the Dagre rendering engine to represent a partition layout:

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

Direct Link to Playground

This results in the following image:

I also tried adding an outside box and using the ELK engine with the following code:

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
}

Direct Link

and I got the following diagram:

My end goal is to have the two cylinders level with each other, and all the squares/containers (the two swaps, RAID0 and RAID1) in a column between them. I don't really care if the swaps are on top of each other or side by side, but I want to have straight lines from both drives p1 and p3 shapes to the appropriate RAID container between them.

Is this type of customization even possible in D2 with any engine (either on the D2 Playground or another site/library?)

Answer 1

The problem this isn't working with Dagre or Elk, is because by default they are trying to use the flow information in your structure to direct the edges in the graph. The connections from your cylinders are "directed", too, and thus the layout will arrange them so that the corresponding nodes will be on top of each other rather than next to each other.

I don't know for Dagre or Elk (and specifically not in the context of D2), but to answer your question for alternative libraries: with the yFiles library, you can specify that certain edges should not induce a direction in the hierarchic layout or that certain nodes should be placed on the same vertical layer.

If you don't specify these constraints the yFiles library will come up with similar drawings, otherwise.

Here is an example diagram that was laid out automatically with the "from sketch" mode in yEd-live, which let's you manually specify the same-layer/same column constraints. You can also do this programmatically, as you can see in this demo. For this case you would specify 3 columns, put your cylinders in the outer columns and the remaining items in the second column, and then declare the edges from the cylinders to the middle column to be "undirected".

^{Disclaimer: I work for the company that creates the above (free and commercial) tools. My comments are my own and I do not represent the company, here.}