enhance: update mermaid to v12 (#39331)

Update to [mermaid v12](https://github.com/mermaid-js/mermaid/releases#release-mermaid@12.0.0), ELK is now the default layout so the plugin and all supporting code is gone. Layout switching to previous `dagre` layout via frontmatter works as expected. Diagrams use the new `neo` default look which renders them slightly different (smaller boxes) then the `classic` look that was default in v11. The `neo` look got some tweaks to remove shadows and gradient to look better. Also did some related refactors and mermaid dragging now works on touch devices too.
2026-09-20 11:43:40 +09:00 · 2026-09-17 23:28:51 +00:00
parent c0c573f7af
commit 2b10f77e42
7 changed files with 107 additions and 278 deletions
@@ -229,9 +229,6 @@ importers:
      '@mcaptcha/vanilla-glue':
        specifier: 0.1.0-rc2
        version: 0.1.0-rc2(supports-color@10.2.2)
-      '@mermaid-js/layout-elk':
-        specifier: 0.2.3
-        version: 0.2.3(mermaid@11.17.2)
      '@primer/octicons':
        specifier: 19.36.0
        version: 19.36.0
@@ -302,8 +299,8 @@ importers:
        specifier: 0.18.7
        version: 0.18.7
      mermaid:
-        specifier: 11.17.2
-        version: 11.17.2
+        specifier: 12.0.0
+        version: 12.0.0
      online-3d-viewer:
        specifier: 0.18.0
        version: 0.18.0
@@ -520,9 +517,21 @@ packages:
  '@cacheable/utils@2.5.0':
    resolution: {integrity: sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==}

+  '@chevrotain/cst-dts-gen@11.1.2':
+    resolution: {integrity: sha512-XTsjvDVB5nDZBQB8o0o/0ozNelQtn2KrUVteIHSlPd2VAV2utEb6JzyCJaJ8tGxACR4RiBNWy5uYUHX2eji88Q==}
+
+  '@chevrotain/gast@11.1.2':
+    resolution: {integrity: sha512-Z9zfXR5jNZb1Hlsd/p+4XWeUFugrHirq36bKzPWDSIacV+GPSVXdk+ahVWZTwjhNwofAWg/sZg58fyucKSQx5g==}
+
+  '@chevrotain/regexp-to-ast@11.1.2':
+    resolution: {integrity: sha512-nMU3Uj8naWer7xpZTYJdxbAs6RIv/dxYzkYU8GSwgUtcAAlzjcPfX1w+RKRcYG8POlzMeayOQ/znfwxEGo5ulw==}
+
  '@chevrotain/types@11.1.2':
    resolution: {integrity: sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==}

+  '@chevrotain/utils@11.1.2':
+    resolution: {integrity: sha512-4mudFAQ6H+MqBTfqLmU7G1ZwRzCLfJEooL/fsF6rCX5eePMbGhoy5n4g+G4vlh2muDcsCTJtL+uKbOzWxs5LHA==}
+
  '@citation-js/core@0.7.21':
    resolution: {integrity: sha512-Vobv2/Yfnn6C6BVO/pvj7madQ7Mfzl83/jAWwixbemGF6ZThhGMz8++FD9hWHyHXDMYuLGa6fK68c2VsolZmTA==}
    engines: {node: '>=16.0.0'}
@@ -1060,13 +1069,9 @@ packages:
  '@mcaptcha/vanilla-glue@0.1.0-rc2':
    resolution: {integrity: sha512-LDjn9lrKioJ3zwaQOfql7PXsnxCAHg7b1rPw7G0OxpvVE7xLB/a40SHfIIiocce2VS9TPI4MbcKm5pcuy8fU5g==}

-  '@mermaid-js/layout-elk@0.2.3':
-    resolution: {integrity: sha512-m46RVGfvKK1PSMdAFGDz2nksI4jusEkFxvf0lb48bYWmqLQxZpjtpruiw29MbOy9rlWJtuMf9EzG9fAF8CVZbg==}
-    peerDependencies:
-      mermaid: ^11.0.2
-
-  '@mermaid-js/parser@1.2.1':
-    resolution: {integrity: sha512-n12NohV3mrUyUL2o93IgG/ifeW9FTyeJn3zDxkhwa8MJ9Fxg3HQMlA3RiGmD/3UnJvheztkjjQAjA2T4LmUcpw==}
+  '@mermaid-js/parser@2.0.0':
+    resolution: {integrity: sha512-K8BeapFUfrfxbRAUQAG5oBOCwo1+bNWzaVnPxTCutkfrTBn6T/j91FIhqxWJ32SUeQ9T3iy1zcmPZ5ROZEvDrg==}
+    engines: {node: '>=22.12.0'}

  '@napi-rs/wasm-runtime@1.1.6':
    resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
@@ -2047,6 +2052,9 @@ packages:
    peerDependencies:
      chart.js: '>=3.2.0'

+  chevrotain@11.1.2:
+    resolution: {integrity: sha512-opLQzEVriiH1uUQ4Kctsd49bRoFDXGGSC4GUqj7pGyxM3RehRhvTlZJc1FL/Flew2p5uwxa1tUDWKzI4wNM8pg==}
+
  chokidar@3.6.0:
    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
    engines: {node: '>= 8.10.0'}
@@ -2464,8 +2472,8 @@ packages:
    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
    engines: {node: '>= 4'}

-  dompurify@3.4.7:
-    resolution: {integrity: sha512-2jBxDJY4RR06tQNy4w5FlFH7kfxsQZlufd0sbv+chfHCxeJwrFw2baUDsSwvBISD4K4RDbd0PTfy3uNXsR6siA==}
+  dompurify@3.4.15:
+    resolution: {integrity: sha512-EUBjM+B+lkDE41iE82DDSCfkoPGfXx8IxFxPMjNzm/Uk4xDet77rTN9wqlxlVg71kK7XGuUMv6wUxJUwwv+Xyw==}

  domutils@3.2.2:
    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
@@ -2766,9 +2774,6 @@ packages:
  fast-uri@3.1.2:
    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}

-  fastdom@1.0.12:
-    resolution: {integrity: sha512-LB+xjSTEbjHE1cWsxu+tN2Xqr1kpi+V9aADI7sVM5ZMaXyYGPHULQMzpJMYqOTULK/73pUkWVzzObFRBkPr+hg==}
-
  fastest-levenshtein@1.0.16:
    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
    engines: {node: '>= 4.9.1'}
@@ -3399,6 +3404,9 @@ packages:
    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
    engines: {node: '>=10'}

+  lodash-es@4.17.23:
+    resolution: {integrity: sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==}
+
  lodash-es@4.18.1:
    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}

@@ -3469,8 +3477,9 @@ packages:
    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
    engines: {node: '>= 8'}

-  mermaid@11.17.2:
-    resolution: {integrity: sha512-V6K3C8EBdEsPFZXSKMJe6ppQOENxuHARr9GvHX4hh47lAbhMRD9qf4oEK7LoaRQxULMa80/qt5gHO73aCleBBg==}
+  mermaid@12.0.0:
+    resolution: {integrity: sha512-/wQXC9iBxoGV8p3erbvaXs9h77VyLDBH6GdayVjj3hEcSQhFU4N1WUhUppotCEqlIxI2pRMwjwBSwTB1MfZBgQ==}
+    engines: {node: '>=22.12.0'}

  micromark-core-commonmark@2.0.3:
    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
@@ -4131,9 +4140,6 @@ packages:
    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
    engines: {node: '>= 0.4'}

-  strictdom@1.0.1:
-    resolution: {integrity: sha512-cEmp9QeXXRmjj/rVp9oyiqcvyocWab/HaoN4+bwFeZ7QzykJD6L3yD4v12K1x0tHpqRqVpJevN3gW7kyM39Bqg==}
-
  string-width@4.2.3:
    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
    engines: {node: '>=8'}
@@ -4692,8 +4698,23 @@ snapshots:
      hashery: 1.5.1
      keyv: 5.6.0

+  '@chevrotain/cst-dts-gen@11.1.2':
+    dependencies:
+      '@chevrotain/gast': 11.1.2
+      '@chevrotain/types': 11.1.2
+      lodash-es: 4.17.23
+
+  '@chevrotain/gast@11.1.2':
+    dependencies:
+      '@chevrotain/types': 11.1.2
+      lodash-es: 4.17.23
+
+  '@chevrotain/regexp-to-ast@11.1.2': {}
+
  '@chevrotain/types@11.1.2': {}

+  '@chevrotain/utils@11.1.2': {}
+
  '@citation-js/core@0.7.21':
    dependencies:
      '@citation-js/date': 0.5.1
@@ -5374,13 +5395,7 @@ snapshots:
      - supports-color
      - utf-8-validate

-  '@mermaid-js/layout-elk@0.2.3(mermaid@11.17.2)':
-    dependencies:
-      d3: 7.9.0
-      elkjs: 0.9.3
-      mermaid: 11.17.2
-
-  '@mermaid-js/parser@1.2.1':
+  '@mermaid-js/parser@2.0.0':
    dependencies:
      '@chevrotain/types': 11.1.2

@@ -6428,6 +6443,15 @@ snapshots:
      chart.js: 4.5.1
      hammerjs: 2.0.8

+  chevrotain@11.1.2:
+    dependencies:
+      '@chevrotain/cst-dts-gen': 11.1.2
+      '@chevrotain/gast': 11.1.2
+      '@chevrotain/regexp-to-ast': 11.1.2
+      '@chevrotain/types': 11.1.2
+      '@chevrotain/utils': 11.1.2
+      lodash-es: 4.17.23
+
  chokidar@3.6.0:
    dependencies:
      anymatch: 3.1.3
@@ -6853,7 +6877,7 @@ snapshots:
    dependencies:
      domelementtype: 2.3.0

-  dompurify@3.4.7:
+  dompurify@3.4.15:
    optionalDependencies:
      '@types/trusted-types': 2.0.7

@@ -7289,10 +7313,6 @@ snapshots:

  fast-uri@3.1.2: {}

-  fastdom@1.0.12:
-    dependencies:
-      strictdom: 1.0.1
-
  fastest-levenshtein@1.0.16: {}

  fastq@1.20.1:
@@ -7927,6 +7947,8 @@ snapshots:
    dependencies:
      p-locate: 5.0.0

+  lodash-es@4.17.23: {}
+
  lodash-es@4.18.1: {}

  lodash.truncate@4.4.2: {}
@@ -8009,13 +8031,14 @@ snapshots:

  merge2@1.4.1: {}

-  mermaid@11.17.2:
+  mermaid@12.0.0:
    dependencies:
      '@braintree/sanitize-url': 7.1.2
      '@iconify/utils': 3.1.3
-      '@mermaid-js/parser': 1.2.1
+      '@mermaid-js/parser': 2.0.0
      '@types/d3': 7.4.3
      '@upsetjs/venn.js': 2.0.0
+      chevrotain: 11.1.2
      cytoscape: 3.34.1
      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.34.1)
      cytoscape-fcose: 2.2.0(cytoscape@3.34.1)
@@ -8023,9 +8046,9 @@ snapshots:
      d3-sankey: 0.12.3
      dagre-d3-es: 7.0.14
      dayjs: 1.11.23
-      dompurify: 3.4.7
+      dompurify: 3.4.15
+      elkjs: 0.9.3
      es-toolkit: 1.47.0
-      fastdom: 1.0.12
      katex: 0.16.47
      khroma: 2.1.0
      marked: 16.4.2
@@ -8799,8 +8822,6 @@ snapshots:
      es-errors: 1.3.0
      internal-slot: 1.1.0

-  strictdom@1.0.1: {}
-
  string-width@4.2.3:
    dependencies:
      emoji-regex: 8.0.0