Mermaidのクラス図において、Annotationを用いるとSyntaxErrorとなる

[wintermaples]

Environment

Host

item	version
OS	Ubuntu Server 24.04
GROWI	7.2.9
node.js	20.19.3
npm	10.8.2
pnpm	-
Using Docker	yes
Using growi-docker-compose	yes

(Accessing https://{GROWI_HOST}/admin helps you to fill in above versions)

Client

item	version
OS	Windows 11 24H2
browser	FireFox 142.0.1 / Google Chrome 140.0.7339.128

How to reproduce? (再現手順)

下記のようなmermaid記法をページに記述する。

classDiagram
  class Shape <<interface>>

What happens? (症状)

SyntaxErrorが表示され、図が表示されない。

ブラウザのコンソールエラーには、以下が表示される。

{
  "str": "Parse error on line 2:\n...Diagramclass Shape <<interface>>\n----------------------^\nExpecting 'NEWLINE', 'EOF', 'SQS', 'STR', 'GENERICTYPE', 'LABEL', 'STRUCT_START', 'STRUCT_STOP', 'STYLE_SEPARATOR', 'ANNOTATION_END', 'AGGREGATION', 'EXTENSION', 'COMPOSITION', 'DEPENDENCY', 'LOLLIPOP', 'LINE', 'DOTTED_LINE', 'CALLBACK_NAME', 'HREF', 'ALPHA', 'NUM', 'MINUS', 'UNICODE_TEXT', 'BQUOTE_STR', got 'ANNOTATION_START'",
  "message": "Parse error on line 2:\n...Diagramclass Shape <<interface>>\n----------------------^\nExpecting 'NEWLINE', 'EOF', 'SQS', 'STR', 'GENERICTYPE', 'LABEL', 'STRUCT_START', 'STRUCT_STOP', 'STYLE_SEPARATOR', 'ANNOTATION_END', 'AGGREGATION', 'EXTENSION', 'COMPOSITION', 'DEPENDENCY', 'LOLLIPOP', 'LINE', 'DOTTED_LINE', 'CALLBACK_NAME', 'HREF', 'ALPHA', 'NUM', 'MINUS', 'UNICODE_TEXT', 'BQUOTE_STR', got 'ANNOTATION_START'",
  "hash": "Error",
  "error": {
    "hash": {
      "text": "<<",
      "token": "ANNOTATION_START",
      "line": 1,
      "loc": {
        "first_line": 2,
        "last_line": 2,
        "first_column": 6,
        "last_column": 11
      },
      "expected": [
        "'NEWLINE'",
        "'EOF'",
        "'SQS'",
        "'STR'",
        "'GENERICTYPE'",
        "'LABEL'",
        "'STRUCT_START'",
        "'STRUCT_STOP'",
        "'STYLE_SEPARATOR'",
        "'ANNOTATION_END'",
        "'AGGREGATION'",
        "'EXTENSION'",
        "'COMPOSITION'",
        "'DEPENDENCY'",
        "'LOLLIPOP'",
        "'LINE'",
        "'DOTTED_LINE'",
        "'CALLBACK_NAME'",
        "'HREF'",
        "'ALPHA'",
        "'NUM'",
        "'MINUS'",
        "'UNICODE_TEXT'",
        "'BQUOTE_STR'"
      ]
    }
  }
}

What is the expected result? (期待される動作)

SyntaxErrorが表示されず、以下のような図が描画される。

[yuki-takei]

@wintermaples
公式には2種類の書き方が載っています。

このうち、「Inline with the class definition (Recommended for consistency):」が今回ご報告いただいた書き方で、なぜこちらでエラーになるのかは調査できていませんが、もう一方の「Separate line after the class definition:」の書き方であれば描画できるようです

classDiagram
  class Shape
  <<interface>> Shape

[wintermaples]

@yuki-takei
ありがとうございます。提示していただいた書き方であれば正しく描画できました！

気になって公式例のClass Diagramに載っているサンプルを試していたのですが、下記のものもエラーが出るようです。

素人考察にはなりますが、エスケープ周りの問題のような感じに見えます。

action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"

classDiagram
    note "This is a general note"
    note for MyClass "This is a note for a class"
    class MyClass{
    }

(2つ目のものは、コードブロックとして認識させるためのバッククオートを1つにするとなぜか描画されます・・・)