remcohaszing · remcohaszing · Jan 16, 2024 · Jan 9, 2024 · Jan 16, 2024
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@ A [rehype](https://rehype.js.org) plugin to render [mermaid](https://mermaid-js.
     - [`options`](#options)
       - [`browser`](#browser)
       - [`css`](#css)
+      - [`dark`](#dark)
       - [`errorFallback`](#errorfallback)
       - [`launchOptions`](#launchoptions)
       - [`mermaidConfig`](#mermaidconfig)
@@ -128,6 +129,8 @@ example, this yields:
 
 This strategy is asynchronous.
 
+This strategy supports the [`dark`](#dark) option.
+
 ### `'img-svg'`
 
 This strategy renders a diagram as an `<img>` element with an inline SVG image. Given the example,
@@ -147,6 +150,8 @@ this yields:
 
 This strategy is asynchronous.
 
+This strategy supports the [`dark`](#dark) option.
+
 ### `'inline-svg'`
 
 This strategy renders a diagram as an inline `<svg>` element. Given the example, this yields:
@@ -165,6 +170,8 @@ This strategy renders a diagram as an inline `<svg>` element. Given the example,
 
 This strategy is asynchronous.
 
+This strategy does not support the [`dark`](#dark) option.
+
 ### `'pre-mermaid'`
 
 This strategy replaces the element with a `<pre class="mermaid">` element with only the diagram as
@@ -204,6 +211,8 @@ mermaid.initialize({ startOnLoad: true })
 
 This strategy is synchronous.
 
+This strategy does not support the [`dark`](#dark) option.
+
 ## API
 
 This package has a default export `rehypeMermaid`.
@@ -221,6 +230,12 @@ The Playwright browser to use. (`object`, default: chromium)
 A URL that points to a custom CSS file to load. Use this to load custom fonts. This option is
 ignored in the browser. You need to include the CSS in your build manually. (`string` | `URL`)
 
+##### `dark`
+
+If specified, add responsive dark mode using a `<picture>` element.
+
+This option is only supported by the [`img-png`](#img-png) and [`img-svg`](#img-svg) strategies.
+
 ##### `errorFallback`
 
 Create a fallback node if processing of a mermaid diagram fails. If nothing is returned, the code

diff --git a/fixtures/code.lang-mermaid/img-png-dark-custom.html b/fixtures/code.lang-mermaid/img-png-dark-custom.html
@@ -0,0 +1,24 @@
+<html>
+  <head></head>
+  <body>
+    <p>
+      A `code` element with class "language-mermaid" should be replaced with the rendered diagram.
+    </p>
+    <picture
+      ><source
+        height="49"
+        id="mermaid-dark-0"
+        media="(prefers-color-scheme: dark)"
+        srcset="
+          data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAxCAYAAACs0jsDAAAAAXNSR0IArs4c6QAAAiZJREFUaIHtmF9IU2EYh5/NQRiu/130D8opYdBGLmhdKCNXlM2bsosQvCu6CIIg6CLoJoIuhYiu68KkjclQy0WlaLqy1SqJoE0jw0qwMc42NoedropE26DzLhZ+z+37nt/7wPk+vu8cUCgUirLEVKi4prXKbQb3vxCZm+dGKpCa+VPdUuhhM7gdNbbLdlt1SeR+EhgcymnprA/4O1EAe42N9sOHxOV+JzQ2ltPS2YI95pIaCKJEpVGi0ihRaZan6OP7UZxbz3Cu/bpkLEiL9vrD2HZuZnTwLV8/JySj5USTiTTDD8c5fd6LdVUlwa4RqWiQFA0Fn2MygauxDo/XSbBrBF3XpeLlRHt8YRqadlNlraT5+D6mp2Z5OvROKl5G9OPkDOMvJzna6gLAsdfGtu0b6e4clogHKdGeu6NYV6/E7qxGS2bQkhmamusZ6H9F4ltKYkTx+2gxdF3nXuAZWjKDx3FhUb3PH6btlMfoGOOikfB7pqdmuXj1JDtqNy2odVzx0935pDxEe31h1m2wcqytgYqKhSup5cR+rl26w+vIBHansc8ZQ2s0n5/nUd8LDhzZs0gS4GCLE4vFLLKpDIl+iH0hpWXxeOuXrK9db8XVuItQMMJcLm9klLFXX1u3hcinmwV7Om6dNTLiF8vz9lRKlKg0SlQaJSrNfyNa9GR6E4tzu/9BSSXSmeyKYj0FRb/DQDQWJxqLi4otRb7AT1yFQqEoY34Aiu6gIS6A+b0AAAAASUVORK5CYII=
+        "
+        width="41.671875" />
+      <img
+        alt=""
+        height="49"
+        id="mermaid-0"
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAxCAYAAACs0jsDAAAAAXNSR0IArs4c6QAAAhhJREFUaIHtmMFLk3EYxz/rFWNswexgINkyvKhhhwUKujHaVCw6hAcPeQ46SB27SAdv0UXCLv4LHYwcbfNlbDQWjSUkIUYQLQXZhHBzc2ytXm+h2DbofRYLf5/r93m/zwfe9+X98YJCoVC0JJZ64bOHn72A91+ItLVZnt9/2putmTe43tvptD7uvGSVNzvCp+ReuVwyXgB/LcoFp5WrnvPickf58iFfLpd+1p0501QDQZSoNEpUGiUqzekUTSSiTExcZ27ugWQtSIuurq7gdF4hlXrL7m5GslpONJ/PkUzGmZm5h91+jnD4lVQ1SIrGYmEsFgsu1zBut59Q6CWGYUjVy4nqeoChITc2mx2f7yaZzA5ra++k6mVEt7e/sbn5Eb//FgADA9fo6rpIMLgsUQ9Sorq+gs1mp69vkEJhn0Jhn9FRH4lElFxuT2JF4/NoIwzDIBJ5TbFYYHp67ESu6wGmpu6aXWNedH39PZnMDrOzj+juvnwsW1paIBhcbg1RXQ/gcHQwOXkHTdOOZePjt1lcfMLGxjr9/YOm9ph6RqvVKvF4hJGRGyckATyeMTRNE3mpTIlubX3l4KCIx+P/Y+5wdOByDROLhalUKmZWmbv1PT29hEKpujPz8wtmVvzmdJ6emokSlUaJSqNEpflvRBt+mTLpErz53lSJH+VfZxvNNBKNZtMlsumSnFUN2tstNX/iKhQKRQtzCGNtnFnfo13VAAAAAElFTkSuQmCC"
+        width="41.671875"
+    /></picture>
+  </body>
+</html>
diff --git a/fixtures/code.lang-mermaid/img-png-dark.html b/fixtures/code.lang-mermaid/img-png-dark.html
@@ -0,0 +1,24 @@
+<html>
+  <head></head>
+  <body>
+    <p>
+      A `code` element with class "language-mermaid" should be replaced with the rendered diagram.
+    </p>
+    <picture
+      ><source
+        height="49"
+        id="mermaid-dark-0"
+        media="(prefers-color-scheme: dark)"
+        srcset="
+          data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAxCAYAAACs0jsDAAAAAXNSR0IArs4c6QAAAglJREFUaIHtmLFvEmEYhx9AJOaDiQRCGSsYQ8LFGq8mVO6gmLiqXXHir6iDXeyf4MBQEzcbjIuNgx1gkEJTY2ADmS42NE6E5EJqEJw0Nm2h8T4Mpt+z/r77vU9yd7k3BwqFQjGXuCaFG2+/mC435r8QGf9wvdh4dP3befmVSRe73JjdTvPZUacxE7lf3Ew/PPYFAiXg70QBjjoNPr9/JV3uTxbv3D/2BQITz7hnaiARJSobJSobJSqbyymq6zpvSiWerq/LrAXZooZhYFkWmqYRDAZlVssT9fv93F5a4vX2NrZtk8lkZFWDTNGVVIox0Gg02KvVyGazsqpBpqhhmnw6OGAwGFCpVAiHQiSTSVn1ckQjkQjxWIxypQJAq9Wi2+2SW12VUQ+yRE3DwLZt2u02QgiEENTqdXRdJzBlfbsoU/fRi3AvnUYIwcutrVOZkU7zbmfH8QzHoolEgnAoRLFY5Ovh4YnsST5PLpebD1HDMOj1enzY3WU0Gp3IyuUyhUKBG/E4rXbb0RxHz6jH4+Hu8jL1/f1TkgAfq1WGwyFZCS+VI9FoNIoQgr1q9cy83+/TbDZZSaXwer1ORjm79ZZl8XhtbeKZ55ubTkb85nJuT7NEicpGicpGicrmvxGd+mUKLya59SA/U4mr1/y+aWcmio5HlBdiGgsxTarYmbO+n/8TV6FQKOaYn9QkiJHSc8gjAAAAAElFTkSuQmCC
+        "
+        width="41.671875" />
+      <img
+        alt=""
+        height="49"
+        id="mermaid-0"
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAxCAYAAACs0jsDAAAAAXNSR0IArs4c6QAAAhhJREFUaIHtmMFLk3EYxz/rFWNswexgINkyvKhhhwUKujHaVCw6hAcPeQ46SB27SAdv0UXCLv4LHYwcbfNlbDQWjSUkIUYQLQXZhHBzc2ytXm+h2DbofRYLf5/r93m/zwfe9+X98YJCoVC0JJZ64bOHn72A91+ItLVZnt9/2putmTe43tvptD7uvGSVNzvCp+ReuVwyXgB/LcoFp5WrnvPickf58iFfLpd+1p0501QDQZSoNEpUGiUqzekUTSSiTExcZ27ugWQtSIuurq7gdF4hlXrL7m5GslpONJ/PkUzGmZm5h91+jnD4lVQ1SIrGYmEsFgsu1zBut59Q6CWGYUjVy4nqeoChITc2mx2f7yaZzA5ra++k6mVEt7e/sbn5Eb//FgADA9fo6rpIMLgsUQ9Sorq+gs1mp69vkEJhn0Jhn9FRH4lElFxuT2JF4/NoIwzDIBJ5TbFYYHp67ESu6wGmpu6aXWNedH39PZnMDrOzj+juvnwsW1paIBhcbg1RXQ/gcHQwOXkHTdOOZePjt1lcfMLGxjr9/YOm9ph6RqvVKvF4hJGRGyckATyeMTRNE3mpTIlubX3l4KCIx+P/Y+5wdOByDROLhalUKmZWmbv1PT29hEKpujPz8wtmVvzmdJ6emokSlUaJSqNEpflvRBt+mTLpErz53lSJH+VfZxvNNBKNZtMlsumSnFUN2tstNX/iKhQKRQtzCGNtnFnfo13VAAAAAElFTkSuQmCC"
+        width="41.671875"
+    /></picture>
+  </body>
+</html>
diff --git a/fixtures/code.lang-mermaid/img-svg-dark-custom.html b/fixtures/code.lang-mermaid/img-svg-dark-custom.html
@@ -0,0 +1,24 @@
+<html>
+  <head></head>
+  <body>
+    <p>
+      A `code` element with class "language-mermaid" should be replaced with the rendered diagram.
+    </p>
+    <picture
+      ><source
+        height="49"
+        id="mermaid-dark-0"
+        media="(prefers-color-scheme: dark)"
+        srcset="
+          data:image/svg+xml,%3csvg%20aria-roledescription=&#x27;flowchart-v2&#x27;%20role=&#x27;graphics-document%20document&#x27;%20viewBox=&#x27;-8%20-8%2041.671875%2049&#x27;%20style=&#x27;max-width:%2041.671875px%3b&#x27;%20xmlns=&#x27;http://www.w3.org/2000/svg&#x27;%20width=&#x27;100%25&#x27;%20id=&#x27;mermaid-dark-0&#x27;%3e%3cstyle%3e%23mermaid-dark-0%7bfont-family:arial%2csans-serif%3bfont-size:16px%3bfill:black%3b%7d%23mermaid-dark-0%20.error-icon%7bfill:%23552222%3b%7d%23mermaid-dark-0%20.error-text%7bfill:%23552222%3bstroke:%23552222%3b%7d%23mermaid-dark-0%20.edge-thickness-normal%7bstroke-width:2px%3b%7d%23mermaid-dark-0%20.edge-thickness-thick%7bstroke-width:3.5px%3b%7d%23mermaid-dark-0%20.edge-pattern-solid%7bstroke-dasharray:0%3b%7d%23mermaid-dark-0%20.edge-pattern-dashed%7bstroke-dasharray:3%3b%7d%23mermaid-dark-0%20.edge-pattern-dotted%7bstroke-dasharray:2%3b%7d%23mermaid-dark-0%20.marker%7bfill:black%3bstroke:black%3b%7d%23mermaid-dark-0%20.marker.cross%7bstroke:black%3b%7d%23mermaid-dark-0%20svg%7bfont-family:arial%2csans-serif%3bfont-size:16px%3b%7d%23mermaid-dark-0%20.label%7bfont-family:arial%2csans-serif%3bcolor:black%3b%7d%23mermaid-dark-0%20.cluster-label%20text%7bfill:%23333%3b%7d%23mermaid-dark-0%20.cluster-label%20span%2c%23mermaid-dark-0%20p%7bcolor:%23333%3b%7d%23mermaid-dark-0%20.label%20text%2c%23mermaid-dark-0%20span%2c%23mermaid-dark-0%20p%7bfill:black%3bcolor:black%3b%7d%23mermaid-dark-0%20.node%20rect%2c%23mermaid-dark-0%20.node%20circle%2c%23mermaid-dark-0%20.node%20ellipse%2c%23mermaid-dark-0%20.node%20polygon%2c%23mermaid-dark-0%20.node%20path%7bfill:%23cde498%3bstroke:%2313540c%3bstroke-width:1px%3b%7d%23mermaid-dark-0%20.flowchart-label%20text%7btext-anchor:middle%3b%7d%23mermaid-dark-0%20.node%20.label%7btext-align:center%3b%7d%23mermaid-dark-0%20.node.clickable%7bcursor:pointer%3b%7d%23mermaid-dark-0%20.arrowheadPath%7bfill:green%3b%7d%23mermaid-dark-0%20.edgePath%20.path%7bstroke:black%3bstroke-width:2.0px%3b%7d%23mermaid-dark-0%20.flowchart-link%7bstroke:black%3bfill:none%3b%7d%23mermaid-dark-0%20.edgeLabel%7bbackground-color:%23e8e8e8%3btext-align:center%3b%7d%23mermaid-dark-0%20.edgeLabel%20rect%7bopacity:0.5%3bbackground-color:%23e8e8e8%3bfill:%23e8e8e8%3b%7d%23mermaid-dark-0%20.labelBkg%7bbackground-color:rgba(232%2c%20232%2c%20232%2c%200.5)%3b%7d%23mermaid-dark-0%20.cluster%20rect%7bfill:%23cdffb2%3bstroke:%236eaa49%3bstroke-width:1px%3b%7d%23mermaid-dark-0%20.cluster%20text%7bfill:%23333%3b%7d%23mermaid-dark-0%20.cluster%20span%2c%23mermaid-dark-0%20p%7bcolor:%23333%3b%7d%23mermaid-dark-0%20div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(78.1578947368%2c%2058.4615384615%25%2c%2084.5098039216%25)%3bborder:1px%20solid%20%236eaa49%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-dark-0%20.flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:black%3b%7d%23mermaid-dark-0%20:root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker%20orient=&#x27;auto&#x27;%20markerHeight=&#x27;12&#x27;%20markerWidth=&#x27;12&#x27;%20markerUnits=&#x27;userSpaceOnUse&#x27;%20refY=&#x27;5&#x27;%20refX=&#x27;6&#x27;%20viewBox=&#x27;0%200%2010%2010&#x27;%20class=&#x27;marker%20flowchart&#x27;%20id=&#x27;mermaid-dark-0_flowchart-pointEnd&#x27;%3e%3cpath%20style=&#x27;stroke-width:%201%3b%20stroke-dasharray:%201%2c%200%3b&#x27;%20class=&#x27;arrowMarkerPath&#x27;%20d=&#x27;M%200%200%20L%2010%205%20L%200%2010%20z&#x27;/%3e%3c/marker%3e%3cmarker%20orient=&#x27;auto&#x27;%20markerHeight=&#x27;12&#x27;%20markerWidth=&#x27;12&#x27;%20markerUnits=&#x27;userSpaceOnUse&#x27;%20refY=&#x27;5&#x27;%20refX=&#x27;4.5&#x27;%20viewBox=&#x27;0%200%2010%2010&#x27;%20class=&#x27;marker%20flowchart&#x27;%20id=&#x27;mermaid-dark-0_flowchart-pointStart&#x27;%3e%3cpath%20style=&#x27;stroke-width:%201%3b%20stroke-dasharray:%201%2c%200%3b&#x27;%20class=&#x27;arrowMarkerPath&#x27;%20d=&#x27;M%200%205%20L%2010%2010%20L%2010%200%20z&#x27;/%3e%3c/marker%3e%3cmarker%20orient=&#x27;auto&#x27;%20markerHeight=&#x27;11&#x27;%20markerWidth=&#x27;11&#x27;%20markerUnits=&#x27;userSpaceOnUse&#x27;%20refY=&#x27;5&#x27;%20refX=&#x27;11&#x27;%20viewBox=&#x27;0%200%2010%2010&#x27;%20class=&#x27;marker%20flowchart&#x27;%20id=&#x27;mermaid-dark-0_flowchart-circleEnd&#x27;%3e%3ccircle%20style=&#x27;stroke-width:%201%3b%20stroke-dasharray:%201%2c%200%3b&#x27;%20class=&#x27;arrowMarkerPath&#x27;%20r=&#x27;5&#x27;%20cy=&#x27;5&#x27;%20cx=&#x27;5&#x27;/%3e%3c/marker%3e%3cmarker%20orient=&#x27;auto&#x27;%20markerHeight=&#x27;11&#x27;%20markerWidth=&#x27;11&#x27;%20markerUnits=&#x27;userSpaceOnUse&#x27;%20refY=&#x27;5&#x27;%20refX=&#x27;-1&#x27;%20viewBox=&#x27;0%200%2010%2010&#x27;%20class=&#x27;marker%20flowchart&#x27;%20id=&#x27;mermaid-dark-0_flowchart-circleStart&#x27;%3e%3ccircle%20style=&#x27;stroke-width:%201%3b%20stroke-dasharray:%201%2c%200%3b&#x27;%20class=&#x27;arrowMarkerPath&#x27;%20r=&#x27;5&#x27;%20cy=&#x27;5&#x27;%20cx=&#x27;5&#x27;/%3e%3c/marker%3e%3cmarker%20orient=&#x27;auto&#x27;%20markerHeight=&#x27;11&#x27;%20markerWidth=&#x27;11&#x27;%20markerUnits=&#x27;userSpaceOnUse&#x27;%20refY=&#x27;5.2&#x27;%20refX=&#x27;12&#x27;%20viewBox=&#x27;0%200%2011%2011&#x27;%20class=&#x27;marker%20cross%20flowchart&#x27;%20id=&#x27;mermaid-dark-0_flowchart-crossEnd&#x27;%3e%3cpath%20style=&#x27;stroke-width:%202%3b%20stroke-dasharray:%201%2c%200%3b&#x27;%20class=&#x27;arrowMarkerPath&#x27;%20d=&#x27;M%201%2c1%20l%209%2c9%20M%2010%2c1%20l%20-9%2c9&#x27;/%3e%3c/marker%3e%3cmarker%20orient=&#x27;auto&#x27;%20markerHeight=&#x27;11&#x27;%20markerWidth=&#x27;11&#x27;%20markerUnits=&#x27;userSpaceOnUse&#x27;%20refY=&#x27;5.2&#x27;%20refX=&#x27;-1&#x27;%20viewBox=&#x27;0%200%2011%2011&#x27;%20class=&#x27;marker%20cross%20flowchart&#x27;%20id=&#x27;mermaid-dark-0_flowchart-crossStart&#x27;%3e%3cpath%20style=&#x27;stroke-width:%202%3b%20stroke-dasharray:%201%2c%200%3b&#x27;%20class=&#x27;arrowMarkerPath&#x27;%20d=&#x27;M%201%2c1%20l%209%2c9%20M%2010%2c1%20l%20-9%2c9&#x27;/%3e%3c/marker%3e%3cg%20class=&#x27;root&#x27;%3e%3cg%20class=&#x27;clusters&#x27;/%3e%3cg%20class=&#x27;edgePaths&#x27;/%3e%3cg%20class=&#x27;edgeLabels&#x27;/%3e%3cg%20class=&#x27;nodes&#x27;%3e%3cg%20transform=&#x27;translate(12.8359375%2c%2016.5)&#x27;%20id=&#x27;flowchart-A-0&#x27;%20class=&#x27;node%20default%20default%20flowchart-label&#x27;%3e%3crect%20height=&#x27;33&#x27;%20width=&#x27;25.671875&#x27;%20y=&#x27;-16.5&#x27;%20x=&#x27;-12.8359375&#x27;%20ry=&#x27;0&#x27;%20rx=&#x27;0&#x27;%20style=&#x27;&#x27;%20class=&#x27;basic%20label-container&#x27;/%3e%3cg%20transform=&#x27;translate(-5.3359375%2c%20-9)&#x27;%20style=&#x27;&#x27;%20class=&#x27;label&#x27;%3e%3crect/%3e%3cforeignObject%20height=&#x27;18&#x27;%20width=&#x27;10.671875&#x27;%3e%3cdiv%20style=&#x27;display:%20inline-block%3b%20white-space:%20nowrap%3b&#x27;%20xmlns=&#x27;http://www.w3.org/1999/xhtml&#x27;%3e%3cspan%20class=&#x27;nodeLabel&#x27;%3eA%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e
+        "
+        width="41.671875" />
+      <img
+        alt=""
+        height="49"
+        id="mermaid-0"
+        src="data:image/svg+xml,%3csvg aria-roledescription=&#x27;flowchart-v2&#x27; role=&#x27;graphics-document document&#x27; viewBox=&#x27;-8 -8 41.671875 49&#x27; style=&#x27;max-width: 41.671875px%3b&#x27; xmlns=&#x27;http://www.w3.org/2000/svg&#x27; width=&#x27;100%25&#x27; id=&#x27;mermaid-0&#x27;%3e%3cstyle%3e%23mermaid-0%7bfont-family:arial%2csans-serif%3bfont-size:16px%3bfill:%23333%3b%7d%23mermaid-0 .error-icon%7bfill:%23552222%3b%7d%23mermaid-0 .error-text%7bfill:%23552222%3bstroke:%23552222%3b%7d%23mermaid-0 .edge-thickness-normal%7bstroke-width:2px%3b%7d%23mermaid-0 .edge-thickness-thick%7bstroke-width:3.5px%3b%7d%23mermaid-0 .edge-pattern-solid%7bstroke-dasharray:0%3b%7d%23mermaid-0 .edge-pattern-dashed%7bstroke-dasharray:3%3b%7d%23mermaid-0 .edge-pattern-dotted%7bstroke-dasharray:2%3b%7d%23mermaid-0 .marker%7bfill:%23333333%3bstroke:%23333333%3b%7d%23mermaid-0 .marker.cross%7bstroke:%23333333%3b%7d%23mermaid-0 svg%7bfont-family:arial%2csans-serif%3bfont-size:16px%3b%7d%23mermaid-0 .label%7bfont-family:arial%2csans-serif%3bcolor:%23333%3b%7d%23mermaid-0 .cluster-label text%7bfill:%23333%3b%7d%23mermaid-0 .cluster-label span%2c%23mermaid-0 p%7bcolor:%23333%3b%7d%23mermaid-0 .label text%2c%23mermaid-0 span%2c%23mermaid-0 p%7bfill:%23333%3bcolor:%23333%3b%7d%23mermaid-0 .node rect%2c%23mermaid-0 .node circle%2c%23mermaid-0 .node ellipse%2c%23mermaid-0 .node polygon%2c%23mermaid-0 .node path%7bfill:%23ECECFF%3bstroke:%239370DB%3bstroke-width:1px%3b%7d%23mermaid-0 .flowchart-label text%7btext-anchor:middle%3b%7d%23mermaid-0 .node .label%7btext-align:center%3b%7d%23mermaid-0 .node.clickable%7bcursor:pointer%3b%7d%23mermaid-0 .arrowheadPath%7bfill:%23333333%3b%7d%23mermaid-0 .edgePath .path%7bstroke:%23333333%3bstroke-width:2.0px%3b%7d%23mermaid-0 .flowchart-link%7bstroke:%23333333%3bfill:none%3b%7d%23mermaid-0 .edgeLabel%7bbackground-color:%23e8e8e8%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:%23e8e8e8%3bfill:%23e8e8e8%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%2c%23mermaid-0 p%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient=&#x27;auto&#x27; markerHeight=&#x27;12&#x27; markerWidth=&#x27;12&#x27; markerUnits=&#x27;userSpaceOnUse&#x27; refY=&#x27;5&#x27; refX=&#x27;6&#x27; viewBox=&#x27;0 0 10 10&#x27; class=&#x27;marker flowchart&#x27; id=&#x27;mermaid-0_flowchart-pointEnd&#x27;%3e%3cpath style=&#x27;stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b&#x27; class=&#x27;arrowMarkerPath&#x27; d=&#x27;M 0 0 L 10 5 L 0 10 z&#x27;/%3e%3c/marker%3e%3cmarker orient=&#x27;auto&#x27; markerHeight=&#x27;12&#x27; markerWidth=&#x27;12&#x27; markerUnits=&#x27;userSpaceOnUse&#x27; refY=&#x27;5&#x27; refX=&#x27;4.5&#x27; viewBox=&#x27;0 0 10 10&#x27; class=&#x27;marker flowchart&#x27; id=&#x27;mermaid-0_flowchart-pointStart&#x27;%3e%3cpath style=&#x27;stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b&#x27; class=&#x27;arrowMarkerPath&#x27; d=&#x27;M 0 5 L 10 10 L 10 0 z&#x27;/%3e%3c/marker%3e%3cmarker orient=&#x27;auto&#x27; markerHeight=&#x27;11&#x27; markerWidth=&#x27;11&#x27; markerUnits=&#x27;userSpaceOnUse&#x27; refY=&#x27;5&#x27; refX=&#x27;11&#x27; viewBox=&#x27;0 0 10 10&#x27; class=&#x27;marker flowchart&#x27; id=&#x27;mermaid-0_flowchart-circleEnd&#x27;%3e%3ccircle style=&#x27;stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b&#x27; class=&#x27;arrowMarkerPath&#x27; r=&#x27;5&#x27; cy=&#x27;5&#x27; cx=&#x27;5&#x27;/%3e%3c/marker%3e%3cmarker orient=&#x27;auto&#x27; markerHeight=&#x27;11&#x27; markerWidth=&#x27;11&#x27; markerUnits=&#x27;userSpaceOnUse&#x27; refY=&#x27;5&#x27; refX=&#x27;-1&#x27; viewBox=&#x27;0 0 10 10&#x27; class=&#x27;marker flowchart&#x27; id=&#x27;mermaid-0_flowchart-circleStart&#x27;%3e%3ccircle style=&#x27;stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b&#x27; class=&#x27;arrowMarkerPath&#x27; r=&#x27;5&#x27; cy=&#x27;5&#x27; cx=&#x27;5&#x27;/%3e%3c/marker%3e%3cmarker orient=&#x27;auto&#x27; markerHeight=&#x27;11&#x27; markerWidth=&#x27;11&#x27; markerUnits=&#x27;userSpaceOnUse&#x27; refY=&#x27;5.2&#x27; refX=&#x27;12&#x27; viewBox=&#x27;0 0 11 11&#x27; class=&#x27;marker cross flowchart&#x27; id=&#x27;mermaid-0_flowchart-crossEnd&#x27;%3e%3cpath style=&#x27;stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b&#x27; class=&#x27;arrowMarkerPath&#x27; d=&#x27;M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9&#x27;/%3e%3c/marker%3e%3cmarker orient=&#x27;auto&#x27; markerHeight=&#x27;11&#x27; markerWidth=&#x27;11&#x27; markerUnits=&#x27;userSpaceOnUse&#x27; refY=&#x27;5.2&#x27; refX=&#x27;-1&#x27; viewBox=&#x27;0 0 11 11&#x27; class=&#x27;marker cross flowchart&#x27; id=&#x27;mermaid-0_flowchart-crossStart&#x27;%3e%3cpath style=&#x27;stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b&#x27; class=&#x27;arrowMarkerPath&#x27; d=&#x27;M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9&#x27;/%3e%3c/marker%3e%3cg class=&#x27;root&#x27;%3e%3cg class=&#x27;clusters&#x27;/%3e%3cg class=&#x27;edgePaths&#x27;/%3e%3cg class=&#x27;edgeLabels&#x27;/%3e%3cg class=&#x27;nodes&#x27;%3e%3cg transform=&#x27;translate(12.8359375%2c 16.5)&#x27; id=&#x27;flowchart-A-0&#x27; class=&#x27;node default default flowchart-label&#x27;%3e%3crect height=&#x27;33&#x27; width=&#x27;25.671875&#x27; y=&#x27;-16.5&#x27; x=&#x27;-12.8359375&#x27; ry=&#x27;0&#x27; rx=&#x27;0&#x27; style=&#x27;&#x27; class=&#x27;basic label-container&#x27;/%3e%3cg transform=&#x27;translate(-5.3359375%2c -9)&#x27; style=&#x27;&#x27; class=&#x27;label&#x27;%3e%3crect/%3e%3cforeignObject height=&#x27;18&#x27; width=&#x27;10.671875&#x27;%3e%3cdiv style=&#x27;display: inline-block%3b white-space: nowrap%3b&#x27; xmlns=&#x27;http://www.w3.org/1999/xhtml&#x27;%3e%3cspan class=&#x27;nodeLabel&#x27;%3eA%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
+        width="41.671875"
+    /></picture>
+  </body>
+</html>