Arrow through text in simple Flowchart

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.

[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.