Mermaid Flowchart Line Style

Question

Flowchart lines in other apps are normally angular with all lines to/from a node merged in each cardinal direction at the start. It's a common issue, this workaround with dummy nodes doesn't resolve it. I expect this could be achieved in mermaid with custom curve settings but I don't understand their use.

How can the common line segments shown in the red circles be overlaid or merged? Note horizontal and vertical sections are affected. The flowchart code is given below.

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<div class="mermaid">

%%{init: {'flowchart' : {'curve' : 'stepBefore'}}}%%

flowchart  TD
  A((A))
  A --- B
  A --- C
  A --- D
  A --- E
  B --- B1
  B --- B2

</div>

Answer 1

Could you use a linear curve as a work around?

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<div class="mermaid">

%%{init: {'flowchart' : {'curve' : 'linear'}}}%%

flowchart  TD
  A((A))
  A --- B
  A --- C
  A --- D
  A --- E
  B --- B1
  B --- B2

</div>