Add support for changing the length of edges

[matteodelabre]

📑 Summary

There is currently no way of influencing the length of (i.e. the number of ranks spanned by) a particular link in a flowchart. A workaround that uses invisible nodes has been proposed in #637. This PR provides an extension of the edge syntax that enables users to request a minimum length for any edge. The length of an edge can be extended by adding extra characters in its definition, as follows:

Length	1	2	3
Normal	---	----	-----
Normal with arrow	-->	--->	---->
Thick	===	====	=====
Thick with arrow	==>	===>	====>
Dotted	-.-	-..-	-...-
Dotted with arrow	-.->	-..->	-...->

Note that this is change backwards compatible, because the syntax for length-1 edges coincides with the existing syntax which already generated length-1 edges. This feature leverages the minlen option exposed by Dagre which was not previously available when using Mermaid.

Resolves #637, resolves #1495.

📏 Design Decisions

The Jison grammar for edges was refactored to avoid handling each combination of edge and arrow types separately. This makes the implementation of the new feature simpler and facilitates the addition of new edge and arrow types. The destructLink and destructStartLink parsing functions were modified accordingly.

A length attribute, containing the length of each parsed edge, is added their internal representation. This attribute’s value is passed down to Dagre in the renderer via the minlen option.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 🔖 targeted develop branch

[knsv]

@matteodelabre Nice job Mattéo! I will check this out more closely this weekend!

[knsv]

This looks great! I appreciate that you took your time to add documentation as well as additional tests. This ensures adaption by the userbase and makes sure that the function wont break down the line.

In particular I like what you did in flowDb with determining the link type and in flow.jison with the lexing of links! Also good that the grammar still supports the multi directional arrows that is supported by the new renderer.

But now the beta renderer needs length functionality as well...

Thanks!

[AndrewScribner]

if would be great if there was a way to adjust spacing between nodes and line length. This could be a setting (linkStyle maybe) that would allow the length of a line to be adjusted.