Annonations on classes from the mermaid example give syntax error in text

[Jarivanbakel]

Description

The following code gives a syntax errors in text.
Removing the line <<interface>> Shape makes it work.

Note: We've tested multiple versions of mermaid and they don't seem to work.

---
title: Class diagram
---

<pre class="mermaid">
classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()
</pre>
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs';
</script>

Steps to reproduce

1. Copy the code and paste it to an .md file
2. Try to show the diagram on the web.

Screenshots

Code Sample

No response

Setup

• Mermaid version:10.6.1 & 11.0.0-alpha.6
• Browser and Version: Chrome Version 119.0.6045.161 (Official Build) (64-bit)

Suggested Solutions

No response

Additional Context

No response

[Jarivanbakel]

classDiagram
class Shape<Type>
Shape : noOfVertices
Shape : draw()

Using "<" or "> in the name definition also does not work.

Found workaround for using "<" and ">" in the name definition:

class Duck ["Duck < Type > "] {
+String beakColor
+swim()
+quack()
}

Should this be a separate issue?

[jgreywolf]

< and > are explicitly not supported. Per the documentation use ~ syntax to denote types

[jgreywolf]

Interesting. I am seeing syntax error if I put this code into a webpage as you have shown here.
But it does NOT fail on mermaid.live.

[Jarivanbakel]

Closed the issue, guess the script was not up to date.