3

Is there a way to make a diagram like below in Mermaid?

diagram

I have bumped into 2 problems in an attempt to do so in mermaid.

  1. How to make a node where two sub-nodes are attached together side by side?
  2. If using subgraph for each node of a sub-node pair, how to maintain direction(orientation) separately between global scope and subgraph scope? It seems like Mermaid ignores the subgraph scope direction(orientation) and applies the global scope direction when a node inside a subgraph is linked to a node inside another subgraph. The following code generates the below. You see that even though the subgraphs' direction is set to be LR, TB from global scope direction is applied.
flowchart TB
    subgraph node0
        direction LR
            node00[data constructor]
            node01[pointer]
            node00 --adjacent--- node01
            
    end
    
    node01 ---> node10
    
    subgraph node1
        direction LR
            node10[data]
            node11[pointer]
            node10 --adjacent--- node11
    end

diagram made using Mermaid

Smart Humanism
  • 155
  • 1
  • 6
  • 1
    I have a similar issue, I don't think mermaid is capable of this. I have resorted to HTML tables and hard-coding my own svgs. – Graeme Stuart Nov 09 '22 at 10:11
  • @GraemeStuart If you don't know this, there is what is called graphviz that can do this but mermaid is easier to use on the go. It is a shame mermaid isn't capable of this. :) – Smart Humanism Nov 10 '22 at 13:11
  • Maybe I'd need to also learn how to hard-code svg for the maximum manipulation. – Smart Humanism Nov 10 '22 at 13:12
  • 1
    Yes, I'm integrating with markdown in a jekyll site so I want to be able to add simple diagrams. If it's simple then svg works well. – Graeme Stuart Nov 10 '22 at 15:23
  • @GraemeStuart Aha, you're smart. I might try the same strategy in the future. :) – Smart Humanism Nov 19 '22 at 07:59
  • Mermaid documentation shows that direction in subgraphs is possible. Would love to see it function as defined. – GaTechThomas Feb 28 '23 at 23:58
  • Turns out that it is possible. Just don't reach inside a subgraph. In other words, reference the subgraph from outside; don't reference the items inside from the outside. In your code, just change `node01 ---> node10` to `node0 ---> node1` and direction functions properly. – GaTechThomas Mar 01 '23 at 00:26

0 Answers0