Open digulla opened 4 years ago
Hi @digulla @knsv
I'm new to svelte and open source, but I'm interested in giving this issue a shot.
Out of curiosity is there a reason this was filed under mermaid-js/mermaid
as opposed to mermaid-js/mermaid-live-editor
? I ask because it looks to me like the issue would need to be fixed in the mermaid live editor.
Hi,
If I understand correctly, we have the same issue. Here's a visual example for the dev team.
I have this issue as well. Workarounds or fixes?
Same here. Any updates from the team?
Hi @digulla @knsv
I'm new to svelte and open source, but I'm interested in giving this issue a shot.
Out of curiosity is there a reason this was filed under
mermaid-js/mermaid
as opposed tomermaid-js/mermaid-live-editor
? I ask because it looks to me like the issue would need to be fixed in the mermaid live editor.
This issue is in the mermaid-js/mermaid
repository. The mermaid-js/mermaid-live-editor
library just makes use of the former to render diagrams in a more visual editor. The mermaid repository generates an SVG for the mermaid code input.
Also, what would the expected fix be for this issue. Will we make the arrow go outwards then come back inwards to avoid overlapping the title?
This still seems to be an issue, just wondering if there has been any ideas of how to work round this?
This still seems to be an issue, just wondering if there has been any ideas of how to work round this?
You could change the orientation from top-down to left-right:
flowchart LR %% LR instead of TD
subgraph one
A
end
subgraph two
B
end
A --> B;
Thanks, this option can work sometimes but not always - I was also going to explore css options to try and force the subgraph label to be above the arrow with a semi transparent background - but I have not had the time to explore yet.
Hi, this is a bit "late to the party" for this thread, but better late than never! 🙌
This is a solution that worked fairly well for me, and it's fairly flexible in letting you "nudge" the labels around.
If you add a style block like the one below, you should see some results in the rendered markdown! :)
<style>
.cluster-label span {
background-color: red;
display: block;
margin-left: 250px;
}
</style>
If you want a more "deep dive" in how I got to this solution: open the dev tools (ctrl + shift + c), and inspect the elements you want to apply your custom CSS to, note the class name, and it should work as long as the CSS is correct.
Does the workaround described by @JulianNymark work for you guys?
Hi, sorry I have not had a chance to explore this too far. Yes I expect it will in certain situations it will sort the problem :-), however the diagrams I work with are often changing, so one fixed repositioning of the title would not always work. So, very useful information but not a general fix.
@JulianNymark workaround worked great for me, thanks!
flowchart TD
A --> B
subgraph mysubgraph
B--> C
end
C --> D
%% Styling
classDef subgraphstyle margin-right:3cm
class mysubgraph subgraphstyle
flowchart TD
A --> B
subgraph mysubgraph
B--> C
end
C --> D
%% Styling
classDef subgraphstyle margin-right:3cm
class mysubgraph subgraphstyle
Unfortunately, this approach only works if all the label lengths are similar. If some subgraphs have longer labels than other, the structure of the diagram falls apart when hardcoding pixel distances.
Is there any way to change the z index of the arrows and render them behind the labels?
mermaid-js renders the arrow through the text "two" in this flowchart:
Describe the solution you'd like
One of these would work:
subgraph one [title] v>
for bottom right,^>
for top right,v<
for bottom left or define default CSS classes that one could refer to.The first solution is probably the most simple to implement, the second one will look nicer (boxes around text tend to look uneven). The third is most effort but most flexible.