[Class Diagrams] Multiple comma-delimited generic types results in infinite recursion

[jakraft]

Description

Attempting to use the generic type syntax with multiple comma-delimited types results in infinite recursion. Here are some examples of class diagrams that will cause this error:

```mermaid
classDiagram
  class Foo {
    +FunctionA(Dictionary~string, int~)
    +FunctionB() Dictionary~string, int~
    +FunctionC(List~Dictionary~string, int~~)
  }
```

The error produced in the console is:

view fail RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at parseGenericTypes (state.0d8f293e.js:9:30678)
    at parseGenericTypes (state.0d8f293e.js:9:30729)
    at parseGenericTypes (state.0d8f293e.js:9:30729)
    at parseGenericTypes (state.0d8f293e.js:9:30729)
    ...

Steps to reproduce

1. Go to the live code editor from any browser and open developer tools
2. Paste the code sample into the live editor
3. The diagram will fail to render, and console logs will show the error above

Screenshots

No response

Code Sample

classDiagram
  class Foo {
    +FunctionA(Dictionary~string, int~)
    +FunctionB() Dictionary~string, int~
    +FunctionC(List~Dictionary~string, int~~)
  }

Setup

• Mermaid version: 10.2.3
• Browser and Version: Edge

Suggested Solutions

The error is in this function:

mermaid/packages/mermaid/src/diagrams/common/common.ts

Lines 180 to 197 in d9db2ed

	export const parseGenericTypes = function (text: string): string {
	let cleanedText = text;
	if (text.split('~').length - 1 >= 2) {
	let newCleanedText = cleanedText;
	// use a do...while loop instead of replaceAll to detect recursion
	// e.g. Array~Array~T~~
	do {
	cleanedText = newCleanedText;
	newCleanedText = cleanedText.replace(/~([^\s,:;]+)~/, '<$1>');
	} while (newCleanedText != cleanedText);
	return parseGenericTypes(newCleanedText);
	} else {
	return cleanedText;
	}
	};

There are multiple issues with this function.

1. The regex does not account for commas or spaces in between the tildes, so it enters the if-statement on line 183 but fails to replace the tildes with angle brackets.
2. Since the regex replace fails in step 1, the method exits the do-while loop and immediately calls parseGenericTypes again with the same string (hence the infinite recursion).

The solution for the infinite recursion would be to remove the recursive call on line 193, since that shouldn't be needed at all. However, that still would not address the issue of supporting comma-separated generic types as the output would still include tildes in the render.

The best solution by far would be to simply remove the tilde syntax altogether and add support for angle brackets instead:

export const parseGenericTypes = function (text: string): string {
  let cleanedText = text.replace("<", "&lt;");
  return cleanedText.replace(">", "&gt;");
};

Although this would be a breaking change, it would eliminate all possible ambiguities when pairing up the opening and closing braces.

Additional Context

No response

[jgreywolf]

I believe this should be handled with PR #4534

Also, closing as duplicate of #4431