mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.16k stars 6.41k forks source link

Flowchart edge labels placement #490

Closed ZelphirKaltstahl closed 7 years ago

ZelphirKaltstahl commented 7 years ago

The placement of edge labels in flowcharts is unfortunate. For example:

graph TD
  A---|This is the text|B;

From the examples of the website already writes the text on the edge, instead of next to it. In horizontal flowcharts this is even worse and makes the text look like stroke through. On the other hand in sequence diagrams the text is at least placed above the edges, which is already an improvement. Desirable would be some integrated logic, which tries to avoid lines going over the the texts of labels and/or text, which breaks in an optimal way, so that it is not crossed by edges or nodes.

This might be difficult to implement, but is crucial to pretty diagrams.

Rektis commented 7 years ago

The manual shows that labels have a background colour. This would allow placement directly on the edge.

Judging by the changelog, this got broken before 7.0 and is fixed since then, but it still doesn't work in the live editor: https://knsv.github.io/mermaid/live_editor/ Maybe the live editor is using an older version? I exclusively use the live editor to quickly make some diagrams. It'd be great if it could be updated.

tylerlong commented 7 years ago

I think it has been fixed.

https://mermaidjs.github.io/mermaid-live-editor/#/edit/Z3JhcGggTFIKICBBLS0tfFRoaXMgaXMgdGhlIHRleHR8QjsK

Feel free to reopen if you still have this issue.

Rektis commented 7 years ago

It seems to work now.

Thank you so much!

On 16 September 2017 at 06:34, Tyler Long notifications@github.com wrote:

I think it has been fixed.

https://mermaidjs.github.io/mermaid-live-editor/#/edit/ Z3JhcGggTFIKICBBLS0tfFRoaXMgaXMgdGhlIHRleHR8QjsK

Feel free to reopen if you still have this issue.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/knsv/mermaid/issues/490#issuecomment-329944880, or mute the thread https://github.com/notifications/unsubscribe-auth/AHo0WXKHEGyIHFkVcuTNWWhLldf2NyXXks5si0_IgaJpZM4MaMfD .