fix: make mermaid.parse throw an error on invalid shapes

[aloisklink]

📑 Summary

Currently, invalid shapes cause an error when rendering, but not when parsing. This confuses the Mermaid Live Editor, e.g. by not showing the error message.

Instead, I've added an isValidShape() that validates if the shape is valid at parse time. This only checks shapes using the new extended shapes syntax.

E.g.

const diagram = "flowchart TB\nA@{ shape: aaaa }";

// currently throws an error, and
// will continue to error after this PR is merged
mermaid.render(diagram); 

// currently works fine, but will error after this PR is merged
mermaid.parse(diagram); 

Example:

See mermaid.live

flowchart TB
      A@{ shape: aaaa }

As you can see, mermaid.live doesn't show an error message, even though the diagram failed to render:

📏 Design Decisions

I've used TypeScript to ensure that all the types are correct, with one issue:

Currently, using A(-this is an ellipse node-) is broken (see #5976) and also causes an invalid shape error at render time, but I've ignored it in this PR, so it will continue pass at parse-time (we have unit tests checking ellipse parsing).

The list of valid types for FlowVertex are all taken from:

• FlowVertexTypeParam:

  mermaid/packages/mermaid/src/diagrams/flowchart/parser/flow.jison

  Lines 428 to 458 in e765007

  	{$$ = $idString;yy.addVertex($idString,$text,'square');}
  	| idString DOUBLECIRCLESTART text DOUBLECIRCLEEND
  	{$$ = $idString;yy.addVertex($idString,$text,'doublecircle');}
  	| idString PS PS text PE PE
  	{$$ = $idString;yy.addVertex($idString,$text,'circle');}
  	| idString '(-' text '-)'
  	{$$ = $idString;yy.addVertex($idString,$text,'ellipse');}
  	| idString STADIUMSTART text STADIUMEND
  	{$$ = $idString;yy.addVertex($idString,$text,'stadium');}
  	| idString SUBROUTINESTART text SUBROUTINEEND
  	{$$ = $idString;yy.addVertex($idString,$text,'subroutine');}
  	| idString VERTEX_WITH_PROPS_START NODE_STRING\[field] COLON NODE_STRING\[value] PIPE text SQE
  	{$$ = $idString;yy.addVertex($idString,$text,'rect',undefined,undefined,undefined, Object.fromEntries([[$field, $value]]));}
  	| idString CYLINDERSTART text CYLINDEREND
  	{$$ = $idString;yy.addVertex($idString,$text,'cylinder');}
  	| idString PS text PE
  	{$$ = $idString;yy.addVertex($idString,$text,'round');}
  	| idString DIAMOND_START text DIAMOND_STOP
  	{$$ = $idString;yy.addVertex($idString,$text,'diamond');}
  	| idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP
  	{$$ = $idString;yy.addVertex($idString,$text,'hexagon');}
  	| idString TAGEND text SQE
  	{$$ = $idString;yy.addVertex($idString,$text,'odd');}
  	| idString TRAPSTART text TRAPEND
  	{$$ = $idString;yy.addVertex($idString,$text,'trapezoid');}
  	| idString INVTRAPSTART text INVTRAPEND
  	{$$ = $idString;yy.addVertex($idString,$text,'inv_trapezoid');}
  	| idString TRAPSTART text INVTRAPEND
  	{$$ = $idString;yy.addVertex($idString,$text,'lean_right');}
  	| idString INVTRAPSTART text TRAPEND
  	{$$ = $idString;yy.addVertex($idString,$text,'lean_left');}

  , or
• ShapeID type:

  mermaid/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts

  Line 493 in e765007

  export type ShapeID = keyof typeof shapes;

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
  • Not needed, since this is a bug fix
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot]

🦋 Changeset detected

Latest commit: f6c32b6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	f6c32b6
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6720aed1a1f350000897befe
😎 Deploy Preview	https://deploy-preview-6002--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/mermaid-js/mermaid@6002

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@6002

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@6002

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@6002

commit: f6c32b6

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 35 lines in your changes missing coverage. Please review.

Project coverage is 4.50%. Comparing base (bdf145f) to head (f6c32b6).
Report is 6 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00%	30 Missing ⚠️
...id/src/rendering-util/rendering-elements/shapes.ts	0.00%	4 Missing ⚠️
...aid/src/rendering-util/rendering-elements/nodes.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6002      +/-   ##
==========================================
- Coverage     4.50%   4.50%   -0.01%     
==========================================
  Files          384     383       -1     
  Lines        53867   53873       +6     
  Branches       596     622      +26     
==========================================
  Hits          2425    2425              
- Misses       51442   51448       +6     

Flag	Coverage Δ
unit	4.50% <0.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...aid/src/rendering-util/rendering-elements/nodes.ts	0.00% <0.00%> (ø)
...id/src/rendering-util/rendering-elements/shapes.ts	0.00% <0.00%> (ø)
packages/mermaid/src/diagrams/flowchart/flowDb.ts	0.00% <0.00%> (ø)

... and 1 file with indirect coverage changes

[knsv]

LGTM!