Mermaid: Add syntax for double headed arrows

[knsv]

This can make diagrams less cluttered.

The obvious syntax: <--> wont work is it will be interpreted as an odd tag by the browser.

Maybe:

*-->

Am open for suggestions and better ideas.

[davidmarkclements]

Switch the arrows around?

a >--< b

Although that might still cause problems, not sure would need to be explored and cross browser tested.

Bit of a leap, but the duality of the plus-minus could be considered "two way",

a -±> b

That's easy on a mac keyboard (top left under esc), Win and Linux users would need to use key combos by default

The third option is to simply render codependent entities as a single double-headed arrow,

a --> b
b --> a

As far as I can see the meaning is the same, but the visual is improved.
You could always add an option to render arrows separately in the event of
an unforeseen use case.

[agladysh]

a ->> b?

Anyway, I'd like to see this feature too

[knsv]

We should support this. I would happily add contributions in this area.
The ->> syntax is a little to close a regular arrow I think.

The >--< option is intuitive in one way but odd in another way. My favorite, but strong opionions are appreviated.

The third option is the obvious one and if nothing else, this has to work. Regardless of any shorter syntax agreed upon:

a --> b
b --> a

[agladysh]

How should one force two separate arrows (i.e. the current behavior) when using two entries? This is sometimes needed for readability.

[CyborgMaster]

I like either >--< or *-->

[yieme]

I like *--> or maybe even --* for both ways

[zegal-cn]

*-*

[AXGKl]

When at this one I would highly appreciate to be able to just reverse the direction of single headed arrow as well.

Rationale: In a TD diag the arrangement on the screen heavily depends on entities left or right. And so I'm often in the conflict of having EITHER a good arrangement but then with logically wrong or no arrow heads OR the right arrow direction.

Should I open a new one for this? Since I think it can be done within the work for this one...

[yxliang01]

Would be appreciated if this can be implemented soon since it has been 3 years.

[KoalaBear84]

I just wanted a line with on both sides an arrow, looks like it is not possible

[snowyu]

Use the unicode Char(LONG LEFT RIGHT ARROW): “⟷” to be more intuitive.

[CyborgMaster]

@snowyu, the main argument against a unicode character is Mermaid's inspiration by Markdown. One of the main advantages is the ability for developers to easily type these files with a standard text editor. That becomes much more difficult if the characters used are not found on a standard keyboard.

I still advocate for a syntax using normal ASCII characters. Possibly *-->.

[snowyu]

I have been using markdown too. You can copy-paste in the graphic env easily.

Even in the terminal env, for instance, in the Vim text-editor you could enter insert mode and press Ctrl + V + U and then the code-point number as a 4-digit hexadecimal number (pad with zeros if necessary). So you would type Ctrl + V + U 2 7 f 7.

I think this is not a conflict with the using ASCII characters. It could be supported both way.
But It seems to find a proper ASCII characters hardly. So the unicode way could be supported first.

[adavidzh]

Would be appreciated if this can be implemented soon since it has been 3 years.

I agree. What's needed?

[FDiskas]

Simple <-->

[davidmarkclements]

Read the very first comment.

[knsv]

This one is implemented with the syntax <-->

[KoalaBear84]

But it does not work? Any guidance? (Or is the live editor not updated)
https://mermaidjs.github.io/mermaid-live-editor/

[phuongnd08]

@knsv As of 8.2.6, double headed arrow is still not rendered. It is accepted by the processor though.

This

      graph TD
      A[Christmas] <-->|Get money| B(Go shopping)
      B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
      C -->|One| D[Laptop]
      C -->|Two| E[iPhone]
      C -->|Three| F[Car]

get rendered to this

[yieme]

@knsv thank you for the double arrow support. This is awesome! I've been able to confirm what @phuongnd08 is seeing with the mermaid live editor.

It also looks like the live editor is using version, 8.2.6, as: https://mermaidjs.github.io/mermaid-live-editor/src.95fd6b94.js contains: module.exports={name:"mermaid-live-editor",version:"0.2.0", ... ,mermaid:"^8.2.6", ...

[heavysixer]

@knsv, thanks for all the work you've provided for this lib. I just pulled master and built it from source and was unable to get the double arrows to render correctly. I see that there are specs (which pass) but when trying it in an editor the double arrow is ignored though no error occurs. Just and FYI. I am happy to help debug this further but since this is day one of me looking at the source i'm still trying to get my bearings. Please let me know where i can be of service.

[tamvm]

@phuongnd08 you can "hack" double headed arrows with classDiagram as this example: https://mermaid-js.github.io/mermaid/#/?id=class-diagram-experimental