Replace Mermaid plugin to be backed by Playwright (#689)

* Replace Mermaid plugin to be backed by Playwright

* Prepare, so we don't force consumers to run this

* README

* Make more sense

Author: AaronMoat

.changeset/neat-wasps-admire.md

@@ -0,0 +1,13 @@
+---
+'scoobie': major
+---
+
+Replace Mermaid plugin to be backed by Playwright
+
+Previously, the Mermaid plugin was backed by Puppeteer. This change replaces this via `mermaid-isomorphic`, in turn backed by Playwright.
+
+There are some consequences for Mermaid users:
+
+- Output changes (you should review and tweak these)
+- You'll no longer need to install puppeteer and manage it in e.g. your Dockerfiles
+- Before running builds with this change, you'll need to install `mermaid-isomorphic` (which is now a `scoobie` peer dependency), and `playwright` in order to run `<packageManager> playwright install chromium`. This could form a postinstall script.

README.md

@@ -177,8 +177,8 @@ export const App = () => (
 
 Scoobie optionally supports simple, source-controlled diagrams via [mermaid].
 
-This requires the `mermaid` configuration option to be set on [ScoobieWebpackPlugin](#scoobiewebpackplugin),
-and `@mermaid-js/mermaid-cli` to be installed as a peer dependency.
+This requires the `mermaid` configuration option to be set on [ScoobieWebpackPlugin](#scoobiewebpackplugin), and the `mermaid-isomorphic` peer dependency installed.
+A playwright installattion of chromium is required, which can be done by installing `playwright` and executing `playwright install chromium`.
 From there, the easiest way to get started is to check out the [mermaid live editor].
 
 You can use a named code block in Markdown files:
@@ -194,16 +194,7 @@ sequenceDiagram
 ```
 ````
 
-Or import an `.mmd` file like so:
-
-```markdown
-![Diagram](./diagram.mmd 'Optional title')
-```
-
-If you use a separate `diagram.mmd` file, you can provide [additional mermaid configuration] with a `diagram.mmd.json` file in the same directory.
-
 [mermaid live editor]: https://mermaidjs.github.io/mermaid-live-editor
-[additional mermaid configuration]: https://mermaid-js.github.io/mermaid/#/mermaidAPI?id=configuration
 
 ### Headings
 

package.json

@@ -24,14 +24,14 @@
     "svgo": "^3.0.0",
     "svgo-loader": "^4.0.0",
     "unist-util-visit": "^2.0.3",
+    "unist-util-visit-parents": "^3.1.1",
     "webpack-merge": "^6.0.0",
     "which": "^4.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "2.27.7",
     "@changesets/get-github-info": "0.6.0",
     "@mdx-js/loader": "^1.6.22",
-    "@mermaid-js/mermaid-cli": "10.9.1",
     "@storybook/addon-essentials": "8.2.9",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
     "@storybook/react": "8.2.9",
@@ -40,6 +40,8 @@
     "@types/react-dom": "18.3.0",
     "braid-design-system": "32.23.1",
     "loki": "0.35.0",
+    "mermaid-isomorphic": "2.2.1",
+    "playwright": "1.46.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-helmet-async": "1.3.0",
@@ -58,17 +60,17 @@
   ],
   "peerDependencies": {
     "@mdx-js/loader": "^1.6.22",
-    "@mermaid-js/mermaid-cli": ">= 8.13.7 < 11",
     "braid-design-system": ">= 31.21.0",
+    "mermaid-isomorphic": "^2.2.1",
     "react": ">= 17 < 19",
     "react-router-dom": ">= 5.3.0",
     "sku": ">= 13.0.0 < 14"
   },
   "peerDependenciesMeta": {
-    "@mermaid-js/mermaid-cli": {
+    "@mdx-js/loader": {
       "optional": true
     },
-    "@mdx-js/loader": {
+    "mermaid-isomorphic": {
       "optional": true
     }
   },
@@ -87,7 +89,8 @@
     "storybook:build": "storybook build --output-dir dist-storybook",
     "storybook:start": "storybook dev",
     "test": "sku test",
-    "test:ci": "sku test --coverage"
+    "test:ci": "sku test --coverage",
+    "prepare": "playwright install chromium"
   },
   "loki": {
     "configurations": {