Arrow through text in simple Flowchart

[digulla]

mermaid-js renders the arrow through the text "two" in this flowchart:

graph TD
  subgraph one
     A
  end
  subgraph two
     B
  end
  A --> B;

Describe the solution you'd like

One of these would work:

• Render the text on top of the arrow with a semi-transparent background over the arrow (same color as the box) to "dim" the arrow,
• Render the text twice, once as an outline (2-3px thick, same color as the box) and on top of the arrow,
• Add an option to move the text into a corner of the box (or do that automatically if you can). For example: 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.

[scootyboots]

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.

[g-berthiaume]

Hi,

If I understand correctly, we have the same issue.
Here's a visual example for the dev team.

[aspiazza]

I have this issue as well. Workarounds or fixes?

[debemdeboas]

Same here. Any updates from the team?

[Yash-Singh1]

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.

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?

[jpadfield]

This still seems to be an issue, just wondering if there has been any ideas of how to work round this?

[Yash-Singh1]

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;

[jpadfield]

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.

[JulianNymark]

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.

[jgreywolf]

Does the workaround described by @JulianNymark work for you guys?

[jpadfield]

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.

[royalmelon]

@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

Loading

[manugarri]

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?