flowchart: node borders syntax does not work

[aruncveli]

Description

I've been searching for ways to represent data flow diagrams in Mermaid. I could not find any specific mention of those in the docs, but have been using flowcharts with custom styling to make them data flow diagrams. This goes a long way, with one nuisance.

The symbol for databases/datastores, a rectangular node with only top and bottom borders, is hackable in Mermaid using stroke-dasharray. Due to the way the CSS property works, the author needs to know the dimensions of the node to experiment with and fix its value. This dimension dependent code also makes it hard to achieve a uniform visualization across different screen sizes, which alter the dimension of the nodes.

Searching the issues in this repository, I went through #5895, #1893, #2389 and #3636. This means that @maiermic had already implemented the required functionality generically (incredible work!), with a syntax like datastore[|borders:tb|Datastore] for top and bottom borders. But this syntax does not work at least in the recent versions of Mermaid, with the node just appearing as a regular node with borders on all sides.

It's possible that the feature regressed, got forgotten, deprecated, etc. But unfortunately, I couldn't find any specific information regarding that (via GitHub code search) in the docs or code.

If not, I guess this sort of qualifies as a bug - sort of since it's hidden from the docs that this feature exists. Nevertheless, I'd like to ask you whether this is fixable even though the popularity of this feature will not likely be at the top.

Steps to reproduce

Try to render the code:

flowchart LR
  datastore[|borders:tb|Datastore] -->|input| process((System)) -->|output| entity[Customer]

The datastore node is rendered as a regular rectangular node.

flowchart LR
  datastore[|borders:tb|Datastore] -->|input| process((System)) -->|output| entity[Customer]

Loading

Screenshots

No response

Code Sample

flowchart LR
  datastore[|borders:tb|Datastore] -->|input| process((System)) -->|output| entity[Customer]

Setup

• Mermaid version: 11.13.0
• Browser and Version: Chrome 146.0.7680.80

Suggested Solutions

Since I do not have any prior experience working in this codebase, I prompted GitHub Copilot Agent on Auto mode to figure out why the diagrams demos/dataflowchart.html isn't rendering borders properly. It spit out these changes, likely building on the previous work:

• packages/mermaid/src/diagrams/flowchart/flowDb.ts's basenode to define a property borders as borders: vertex.props?.borders.
• borders be uncommented here.
• Somewhere around here, if the node has a truthy borders property, conditionally add borders to rect as:

/**
 * Applies selective borders to a rectangle using stroke-dasharray.
 * @param rect - The D3 selection of the rect element
 * @param borders - A string containing any combination of 't', 'r', 'b', 'l'
 * @param totalWidth - The width of the rectangle
 * @param totalHeight - The height of the rectangle
 */
function applyNodePropertyBorders(
  rect: D3Selection<SVGRectElement>,
  borders: string,
  totalWidth: number,
  totalHeight: number
) {
  const strokeDashArray: number[] = [];
  const addBorder = (length: number) => strokeDashArray.push(length, 0);
  const skipBorder = (length: number) => strokeDashArray.push(0, length);

  borders.includes('t') ? addBorder(totalWidth) : skipBorder(totalWidth);
  borders.includes('r') ? addBorder(totalHeight) : skipBorder(totalHeight);
  borders.includes('b') ? addBorder(totalWidth) : skipBorder(totalWidth);
  borders.includes('l') ? addBorder(totalHeight) : skipBorder(totalHeight);

  rect.attr('stroke-dasharray', strokeDashArray.join(' '));
}

Diff file attachment:
changes.patch.

Neither did I perform any regression testing nor am I vouching that the above AI changes are the best solution to the issue. I merely wanted to specify one (artificial) chain of thought.

But I confirm that the above changes constitute a functional solution to the issue, since it restored the functionality as implemented before, and the diagrams in demos/dataflowchart.html started rendering as expected.

Additional Context

No response

[lee-treehouse]

It definitely regressed at some point. I do wonder, rather than restore the borders functionality, is it better to bring in a new dedicated shape? As of https://mermaid.js.org/syntax/flowchart.html#expanded-node-shapes-in-mermaid-flowcharts-v11-3-0 30 new shapes were introduced. I do not know what they all are (they are all listed, but only some are pictured).

I would like to know if there already is a suitable new shape, or if one could be added. The new shapes were added here

[aruncveli]

Hey, those new shapes don't contain the one I'm looking for. So, a new one could be added. Is it free for anyone to add one, or should there be a consensus between some maintainers first for naming and the like?

If the linked issue establishes the contract for adding a new shape, I could potentially attempt to (or help someone else) add one.

[lee-treehouse]

I'm pretty new to the project but from what I have seen so far.. You could have a go and raise a PR and then get feedback. Or, you could wait for this issue to become approved but then next steps would still be raise a PR and get feedback :)

It seems relatively small (given you can take inspiration from https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/rendering-util/rendering-elements/shapes), CONTRIBUTING.MD has some good instructions to get you started, and it could be fun to do :)

oh, and there's this https://github.com/mermaid-js/mermaid/blob/develop/docs/adding-new-shape.md