Flowchart node spacing doesn't apply when using subgraph

[danimihalca]

I want to render some flowchart diagrams in a compact way to be readable on mobile, and found out that you can specify some distances between nodes using nodeSpacing (and rankSpacing), but it seems that when you start defining the nodes in a subgraph, it won't apply anymore.

1. Scenario 1 - nodes without subgraphs:
   a) node spacing 10:

%%{init:{'flowchart':{'nodeSpacing': 10}}}%%

flowchart LR

A --> B
C --> D

b) node spacing 50:

%%{init:{'flowchart':{'nodeSpacing': 50}}}%%

flowchart LR

A --> B
C --> D

Renders well, the nodes are properly spaced.

2. Scenario 2, node within subgraphs:
   a) node spacing 10:

%%{init:{'flowchart':{'nodeSpacing': 10, 'rankSpacing':'10'}}}%%

flowchart LR

X --> Y
subgraph X
	direction LR
	A
	C
end

subgraph Y
	direction LR
	B
	D
end

b) node spacing 50:

%%{init:{'flowchart':{'nodeSpacing': 50, 'rankSpacing':'10'}}}%%

flowchart LR

X --> Y

subgraph X
	direction LR
	A
	C
end

subgraph Y
	direction LR
	B
	D
end

Node spacing doesn't apply anymore when these nodes are inside subgraph, the vertical distance between them remains the same.

Expected: To be able to apply node spacing inside a subgraph as well.
Environment: Latest Mermaid Live Editor (9.1.3), Obsidian 0.5.18 (don't know what Mermaid version they're using, but mentioning it here since there I found it first).

[sketchkey]

Bump! This is also the case for rankSpacing within subgraphs — subgraph spacing just seems to revert back to the default.

[varon]

I have also encountered this error.

[natbusa]

RankSpacing and NodeSpacing are not passed to subgraphs. Confirmed

[jonagard]

I hit this and noticed something in the behavior I thought should be recorded here.

First, I'm taking your exact example above and I get this on mermaid.live: mermaid link

Here is an imgur link of the result.

I found that if you do a link from an internal node to an internal node in another subgraph, the spacing is acknowledged. I took your code and just added a link from B to A:

%%{init:{'flowchart':{'nodeSpacing': 10, 'rankSpacing':'10'}}}%%

flowchart LR

X --> Y
subgraph X
	direction LR
	A
	C
end

subgraph Y
	direction LR
	B --> A
	D
end

And I get this in mermaid: mermaid link now.

Here is an imgur link with the result.

I don't know what that implies, but it may help indicate what the root of the issue is.

Editing to add:

You'll note that link reverses the subgraphs. But if you point B to A after the subgraphs, it maintains the order. Here is a hacky workaround for your contrived example that puts the spacing right by using an invisible link:

%%{init:{'flowchart':{'nodeSpacing': 10, 'rankSpacing':'10'}}}%%

flowchart RL

X --> Y
subgraph X
	direction LR
	A
	C
end

subgraph Y
	direction LR
	B
	D
end

B ~~~ A

But of course, for that workaround to apply, you have to have more than one subgraph and you have to hope the invisible link doesn't mess up the layout of your nodes.

[bigNeoneo]

any good news?

[rowanfr]

My apologies, I meant to close the issue #5178 as duplicate and instead accidentally closed it implying solved. This comment is to clarify that the issue with flowchart spacing has not been solved yet

[bernardoadc]

I didn't find the documentation, but have you guys noticed that in the example nodeSpacing is a number and rankSpacing is a string? Don't know if it is relevant.. but thought it was worth pointing it out.