Release/10.0.0

.vite/build.ts

@@ -20,13 +20,14 @@ const visualizerOptions = (packageName: string, core = false): PluginOption[] =>
   if (packageName !== 'mermaid' || !visualize) {
     return [];
   }
-  return ['network', 'treemap', 'sunburst'].map((chartType) =>
-    visualizer({
-      filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
-      template: chartType as TemplateType,
-      gzipSize: true,
-      brotliSize: true,
-    })
+  return ['network', 'treemap', 'sunburst'].map(
+    (chartType) =>
+      visualizer({
+        filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
+        template: chartType as TemplateType,
+        gzipSize: true,
+        brotliSize: true,
+      }) as PluginOption
   );
 };
 
@@ -61,12 +62,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       sourcemap: true,
       entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
-    {
-      name,
-      format: 'umd',
-      sourcemap: true,
-      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
-    },
   ];
 
   if (core) {

.vite/server.ts

@@ -1,14 +1,7 @@
-import express, { NextFunction, Request, Response } from 'express';
+import express from 'express';
+import cors from 'cors';
 import { createServer as createViteServer } from 'vite';
 
-const cors = (req: Request, res: Response, next: NextFunction) => {
-  res.header('Access-Control-Allow-Origin', '*');
-  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
-  res.header('Access-Control-Allow-Headers', 'Content-Type');
-
-  next();
-};
-
 async function createServer() {
   const app = express();
 
@@ -19,9 +12,8 @@ async function createServer() {
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   });
 
-  app.use(cors);
+  app.use(cors());
   app.use(express.static('./packages/mermaid/dist'));
-  // app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(vite.middlewares);
   app.use(express.static('demos'));

CONTRIBUTING.md

@@ -63,6 +63,28 @@ flowchart LR
 
 ```
 
+You can use `note`, `tip`, `warning` and `danger` in triple backticks to add a note, tip, warning or danger box.
+Do not use vitepress specific markdown syntax `::: warning` as it will not be processed correctly.
+
+````
+```note
+Note content
+```
+
+```tip
+Tip content
+```
+
+```warning
+Warning content
+```
+
+```danger
+Danger content
+```
+
+````
+
 **_DO NOT CHANGE FILES IN `/docs`_**
 
 ### The official documentation site

V10-BreakingChanges.md

@@ -1,5 +1,58 @@
-# A collection of updates that change the behaviour
+# A collection of updates that change the behavior
+
+## Async
+
+`parse`, `render` are now async.
 
 ## Lazy loading and asynchronisity
 
 - Invalid dates are rendered as syntax error instead of returning best guess or the current date
+
+## ParseError is removed
+
+```js
+//< v10.0.0
+mermaid.parse(text, parseError);
+
+//>= v10.0.0
+await mermaid.parse(text).catch(parseError);
+// or
+try {
+  await mermaid.parse(text);
+} catch (err) {
+  parseError(err);
+}
+```
+
+## Init deprecated and InitThrowsErrors removed
+
+The config passed to `init` was not being used eariler.
+It will now be used.
+The `init` function is deprecated and will be removed in the next major release.
+init currently works as a wrapper to `initialize` and `run`.
+
+```js
+//< v10.0.0
+mermaid.init(config, selector, cb);
+
+//>= v10.0.0
+mermaid.initialize(config);
+mermaid.run({
+  querySelector: selector,
+  postRenderCallback: cb,
+  suppressErrors: true,
+});
+```
+
+```js
+//< v10.0.0
+mermaid.initThrowsErrors(config, selector, cb);
+
+//>= v10.0.0
+mermaid.initialize(config);
+mermaid.run({
+  querySelector: selector,
+  postRenderCallback: cb,
+  suppressErrors: false,
+});
+```

cypress/integration/rendering/flowchart-elk.spec.js

@@ -1,6 +1,6 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
-describe('Flowchart ELK', () => {
+describe.skip('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
     imgSnapshotTest(
       `flowchart-elk TD

cypress/platform/bundle-test.js

@@ -49,13 +49,9 @@ mermaid.initialize({
     ],
   },
 });
-mermaid.render(
-  'the-id-of-the-svg',
-  code,
-  (svg) => {
-    console.log(svg);
-    const elem = document.querySelector('#graph-to-be');
-    elem.innerHTML = svg;
-  }
-  // ,document.querySelector('#tmp')
-);
+void (async () => {
+  const { svg } = await mermaid.render('the-id-of-the-svg', code);
+  console.log(svg);
+  const elem = document.querySelector('#graph-to-be');
+  elem.innerHTML = svg;
+})();

cypress/platform/class.html

@@ -113,8 +113,8 @@ <h1>info below</h1>
         callback Shape "callbackFunction" "This is a tooltip for a callback"
 
     </pre>
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/click_security_loose.html

@@ -125,7 +125,6 @@
       </pre>
     </div>
 
-    <script src="./mermaid.js"></script>
     <script>
       function clickByFlow(elemName) {
         const div = document.createElement('div');
@@ -162,6 +161,9 @@
 
         document.getElementsByTagName('body')[0].appendChild(div);
       }
+    </script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
     </script>
   </body>

cypress/platform/click_security_other.html

@@ -59,8 +59,8 @@
     Add another diagram to demo page    : 48h
     </pre>
 
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       function clickByFlow(elemName) {
         const div = document.createElement('div');
         div.className = 'created-by-click';

cypress/platform/click_security_sandbox.html

@@ -125,8 +125,8 @@
       </pre>
     </div>
 
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       function clickByFlow(elemName) {
         const div = document.createElement('div');
         div.className = 'created-by-click';

cypress/platform/click_security_strict.html

@@ -61,8 +61,8 @@
     Add another diagram to demo page    : 48h
     </pre>
 
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       function clickByFlow(elemName) {
         const div = document.createElement('div');
         div.className = 'created-by-click';

cypress/platform/css1.html

@@ -28,8 +28,8 @@
     end
     A --> B
     </pre>
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       function showFullFirstSquad(elemName) {
         console.log('show ' + elemName);
       }

cypress/platform/current2.html

@@ -107,8 +107,8 @@ <h1>info below</h1>
 Note over Bob,Alice: Looks back
     </pre>
 
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/e2e.html

@@ -1,32 +1,12 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <!-- <meta charset="iso-8859-15"/> -->
     <script src="./viewer.js" type="module"></script>
-    <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
     <style>
-      body {
-        /* font-family: 'Mansalva', cursive;*/
-        /* font-family: 'Mansalva', cursive; */
-        /* font-family: 'arial'; */
-        /* font-family: "trebuchet ms", verdana, arial; */
-      }
-      /* div {
-        font-family: 'arial';
-      } */
-      /* .mermaid-main-font {
-        font-family: "trebuchet ms", verdana, arial;
-        font-family: var(--mermaid-font-family);
-      } */
-      /* :root {
-        --mermaid-font-family: '"trebuchet ms", verdana, arial';
-        --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
-        --mermaid-font-family: '"Lucida Console", Monaco, monospace';
-      } */
       svg {
         border: 2px solid darkred;
       }
@@ -36,21 +16,5 @@
       }
     </style>
   </head>
-  <body>
-    <!-- <script src="./mermaid.js"></script> -->
-    <script>
-      // Notice startOnLoad=false
-      // This prevents default handling in mermaid from render before the e2e logic is applied
-      // mermaid.initialize({
-      //   startOnLoad: false,
-      //   useMaxWidth: true,
-      //   // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
-      //   // fontFamily: '\"trebuchet ms\", verdana, arial;'
-      //   // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
-      //   // fontFamily: '"Mansalva", cursive',
-      //   // fontFamily: '"Noto Sans SC", sans-serif'
-      //   fontFamily: '"Noto Sans SC", sans-serif'
-      // });
-    </script>
-  </body>
+  <body></body>
 </html>

cypress/platform/external-diagrams-example-diagram.html

@@ -17,7 +17,7 @@ <h1>Should correctly load a third-party diagram using registerDiagram</h1>
 
       await mermaid.registerExternalDiagrams([exampleDiagram]);
       await mermaid.initialize({ logLevel: 0 });
-      await mermaid.initThrowsErrorsAsync();
+      await mermaid.run();
       if (window.Cypress) {
         window.rendered = true;
       }

cypress/platform/flow.html

@@ -29,8 +29,8 @@
         click a_a "http://www.aftonbladet.se" "apa"
     </pre>
 
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',

cypress/platform/ghsa1.html

@@ -8,18 +8,18 @@ <h1>Background should be yellow!!!</h1>
     </div>
     <svg id="diagram"></svg>
 
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({ startOnLoad: false, logLevel: 0 });
 
       const graph = `
-     %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
-            graph TD
-                A[Goose]
-            `;
+      %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
+             graph TD
+                 A[Goose]
+             `;
 
       const diagram = document.getElementById('diagram');
-      const svg = mermaid.render('diagram-svg', graph);
+      const { svg } = await mermaid.render('diagram-svg', graph);
       diagram.innerHTML = svg;
       if (window.Cypress) {
         window.rendered = true;