title: Mermaid Flowchart Line Style
body: <p>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 <a href="https://github.com/mermaid-js/mermaid/issues/2549#issuecomment-1032169475" rel="nofollow noreferrer">workaround</a> with dummy nodes doesn't resolve it. I expect this could be achieved in mermaid with <a href="https://github.com/d3/d3-shape/blob/main/README.md#custom-curves" rel="nofollow noreferrer">custom curve</a> settings but I don't understand their use.</p>
  <p>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.</p>
  <p><img src="https://i.stack.imgur.com/wS5ly.png" alt="" /></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"&gt;&lt;/script&gt;
  &lt;div class="mermaid"&gt;
  
  %%{init: {'flowchart' : {'curve' : 'stepBefore'}}}%%
  
  flowchart  TD
    A((A))
    A --- B
    A --- C
    A --- D
    A --- E
    B --- B1
    B --- B2
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>