docs: Release process

Doc (typo): remove duplicate "be"

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,4 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
   - name: GitHub Discussions
     url: https://github.com/mermaid-js/mermaid/discussions

.github/PULL_REQUEST_TEMPLATE/normal.md

@@ -1,18 +1,18 @@
-## :bookmark_tabs: Summary
-
-Brief description about the content of your PR.
-
-Resolves #<your issue id here>
-
-## :straight_ruler: Design Decisions
-
-Describe the way your implementation works or what design decisions you made if applicable.
-
-### :clipboard: Tasks
-
-Make sure you
-
-- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
-- [ ] :computer: have added unit/e2e tests (if appropriate)
-- [ ] :notebook: have added documentation (if appropriate)
-- [ ] :bookmark: targeted `develop` branch
+## :bookmark_tabs: Summary
+
+Brief description about the content of your PR.
+
+Resolves #<your issue id here>
+
+## :straight_ruler: Design Decisions
+
+Describe the way your implementation works or what design decisions you made if applicable.
+
+### :clipboard: Tasks
+
+Make sure you
+
+- [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
+- [ ] :computer: have added unit/e2e tests (if appropriate)
+- [ ] :notebook: have added documentation (if appropriate)
+- [ ] :bookmark: targeted `develop` branch

.github/PULL_REQUEST_TEMPLATE/release.md

@@ -0,0 +1,19 @@
+# Release vX.X.X
+
+## Release checklist
+
+    - [ ] Forked from `develop` branch
+    - [ ] Draft PR created, targeting `master` branch
+    - [ ] Ready for review
+    - [ ] Ready for testing
+    - [ ] Tested by -
+    - [ ] Ready for merge
+
+## Release process
+
+- The PR is marked as `Ready for review` by the author
+- The PR is reviewed by at least one other person
+- The PR is marked as `Ready for testing` by the reviewer once the review and necessary changes are complete
+- The PR is tested by the someone other than the author
+- The PR is marked as `Tested by - @testerName` by the tester once the testing is complete
+- The PR is marked as `Ready for merge` by the author once the testing is complete and CI is green.

CHANGELOG.md

@@ -1,6 +1,105 @@
-# Change Log
+# Changelog
 
-// TODO: Populate changelog
+## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0)
+
+### Mermaid is ESM only!
+
+We've dropped CJS support. So, you will have to update your import scripts as follows.
+
+```html
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: true });
+</script>
+```
+
+You can keep using v9 by adding the `@9` in the CDN URL.
+
+```diff
+- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
++ <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.js"></script>
+```
+
+### mermaid.render is async and doesn't accept callbacks
+
+```js
+// < v10
+mermaid.render('id', 'graph TD;\nA-->B', (svg, bindFunctions) => {
+  element.innerHTML = svg;
+  if (bindFunctions) {
+    bindFunctions(element);
+  }
+});
+
+// Shorter syntax
+if (bindFunctions) {
+  bindFunctions(element);
+}
+// can be replaced with the `?.` shorthand
+bindFunctions?.(element);
+
+// >= v10 with async/await
+const { svg, bindFunctions } = await mermaid.render('id', 'graph TD;\nA-->B');
+element.innerHTML = svg;
+bindFunctions?.(element);
+
+// >= v10 with promise.then
+mermaid.render('id', 'graph TD;A-->B').then(({ svg, bindFunctions }) => {
+  element.innerHTML = svg;
+  bindFunctions?.(element);
+});
+```
+
+### mermaid.parse is async and ParseError is removed
+
+```js
+// < v10
+mermaid.parse(text, parseError);
+
+//>= v10
+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
+mermaid.init(config, selector, cb);
+
+//>= v10
+mermaid.initialize(config);
+mermaid.run({
+  querySelector: selector,
+  postRenderCallback: cb,
+  suppressErrors: true,
+});
+```
+
+```js
+// < v10
+mermaid.initThrowsErrors(config, selector, cb);
+
+//>= v10
+mermaid.initialize(config);
+mermaid.run({
+  querySelector: selector,
+  postRenderCallback: cb,
+  suppressErrors: false,
+});
+```
+
+// TODO: Populate changelog pre v10
 
 - Config has a lot of changes
 - globalReset resets to `defaultConfig` instead of current config. Use `reset` instead.

README.md

@@ -8,7 +8,7 @@ Mermaid
 Generate diagrams from markdown-like text.
 <p>
 <p align="center">
-  <a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+  <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
 <p>
 
 <p align="center">

README.zh-CN.md

@@ -8,7 +8,7 @@ Mermaid
 通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
 <p>
 <p align="center">
-  <a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+  <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
 <p>
 
 <p align="center">

V10-BreakingChanges.md

@@ -1,58 +0,0 @@
-# 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,
-});
-```

cSpell.json

@@ -27,6 +27,7 @@
     "cuzon",
     "cytoscape",
     "dagre",
+    "deepdwn",
     "descr",
     "docsify",
     "docsy",

cypress/platform/viewer.js

@@ -46,7 +46,7 @@ const contentLoaded = async function () {
 
     await mermaid2.registerExternalDiagrams([externalExample]);
     mermaid2.initialize(graphObj.mermaid);
-    await mermaid2.init();
+    await mermaid2.run();
     markRendered();
   }
 };

docs/config/usage.md

@@ -20,21 +20,24 @@ Please note that you can switch versions through the dropdown box at the top rig
 
 For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./setup/README.md).
 
-We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
+We have compiled some Video [Tutorials](./Tutorials.md) on how to use the Mermaid Live Editor.
 
 ### Installing and Hosting Mermaid on a Webpage
 
 **Using the npm package:**
 
-1.  You will need to install `node v16`, which would have npm.
+Requirements:
 
-2.  Download `yarn` using npm.
+- Node >= 16
 
-3.  Enter the following command: `yarn add mermaid`.
-
-4.  At this point, you can add mermaid as a dev dependency using this command: `yarn add --dev mermaid`.
-
-5.  Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions as is shown in the example below.
+```bash
+# NPM
+npm install mermaid
+# Yarn
+yarn add mermaid
+# PNPM
+pnpm add mermaid
+```
 
 **Hosting mermaid on a web page:**
 
@@ -42,7 +45,9 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
 
 The easiest way to integrate mermaid on a web page requires two elements:
 
-- A graph definition, inside `<pre>` tags labeled `class=mermaid`. Example:
+- A graph definition, inside `<pre>` tags labeled `class=mermaid`.
+
+Example:
 
 ```html
 <pre class="mermaid">
@@ -53,14 +58,13 @@ The easiest way to integrate mermaid on a web page requires two elements:
 </pre>
 ```
 
-- Inclusion of the mermaid address in the html page body using a `script` tag as an ESM import, and the `mermaidAPI` call.
+- The mermaid js script. Added using a `script` tag as an ESM import.
 
 Example:
 
 ```html
 <script type="module">
   import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-  mermaid.initialize({ startOnLoad: true });
 </script>
 ```
 
@@ -71,9 +75,6 @@ Example:
 ```html
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-  </head>
   <body>
     <pre class="mermaid">
   graph LR
@@ -83,7 +84,6 @@ Example:
     </pre>
     <script type="module">
       import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-      mermaid.initialize({ startOnLoad: true });
     </script>
   </body>
 </html>
@@ -95,11 +95,12 @@ An id attribute is also added to mermaid tags without one.
 
 Mermaid can load multiple diagrams, in the same page.
 
-> Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
+> Try it out, save this code as HTML and load it using any browser.
+> (Except Internet Explorer, please don't use Internet Explorer.)
 
 ## Enabling Click Event and Tags in Nodes
 
-A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
+A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
 
 **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
 
@@ -107,7 +108,7 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th
 
 | Parameter     | Description                       | Type   | Required | Values                                     |
 | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
+| securityLevel | Level of trust for parsed diagram | String | Optional | 'sandbox', 'strict', 'loose', 'antiscript' |
 
 Values:
 
@@ -122,26 +123,17 @@ Values:
 
 **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
 
-**To change `securityLevel`, you have to call `mermaidAPI.initialize`:**
+**To change `securityLevel`, you have to call `mermaid.initialize`:**
 
 ```javascript
-mermaidAPI.initialize({
+mermaid.initialize({
   securityLevel: 'loose',
 });
 ```
 
 ### Labels out of bounds
 
-If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
-whole page to load (dom + assets, particularly the fonts file).
-
-```javascript
-$(document).load(function () {
-  mermaid.initialize();
-});
-```
-
-or
+If you use dynamically loaded fonts that are loaded through CSS, such as fonts, mermaid should wait for the whole page to load (dom + assets, particularly the fonts file).
 
 ```javascript
 $(document).ready(function () {
@@ -154,12 +146,54 @@ Not doing so will most likely result in mermaid rendering graphs that have label
 If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
 
 ```css
-div.mermaid {
+pre.mermaid {
   font-family: 'trebuchet ms', verdana, arial;
 }
 ```
 
-### Calling `mermaid.init`
+### Using `mermaid.run`
+
+mermaid.run was added in v10 and is the preferred way of handling more complex integration.
+By default, `mermaid.run` will be called when the document is ready, rendering all elements with `class="mermaid"`.
+
+You can customize that behavior by calling `await mermaid.run(<config>)`.
+
+`mermaid.initialize({startOnLoad: false})` will prevent `mermaid.run` from being called automatically after load.
+
+Render all elements with querySelector ".someOtherClass"
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  querySelector: '.someOtherClass',
+});
+```
+
+Render all elements passed as an array
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  nodes: [document.getElementById('someId'), document.getElementById('anotherId')],
+});
+await mermaid.run({
+  nodes: document.querySelectorAll('.yetAnotherClass'),
+});
+```
+
+Render all `.mermaid` elements while suppressing any error
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  suppressErrors: true,
+});
+```
+
+### Calling `mermaid.init` - Deprecated
+
+> **Warning**
+> mermaid.init is deprecated in v10 and will be removed in v11. Please use mermaid.run instead.
 
 By default, `mermaid.init` will be called when the document is ready, finding all elements with
 `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
@@ -192,25 +226,24 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 ## API usage
 
-The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
-will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to
-fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
+The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
 The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 <script type="module">
-  import mermaid from './mermaid.mjs';
-  mermaid.mermaidAPI.initialize({ startOnLoad: false });
-  $(async function () {
-    // Example of using the API var
+  import mermaid from './mermaid.esm.mjs';
+  mermaid.initialize({ startOnLoad: false });
+
+  // Example of using the render function
+  const drawDiagram = async function () {
     element = document.querySelector('#graphDiv');
-    const insertSvg = function (svgCode, bindFunctions) {
-      element.innerHTML = svgCode;
-    };
     const graphDefinition = 'graph TB\na-->b';
-    const graph = await mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
-  });
+    const { svg } = await mermaid.render('graphDiv', graphDefinition);
+    element.innerHTML = svg;
+  };
+
+  await drawDiagram();
 </script>
 ```
 
@@ -223,17 +256,17 @@ The example code below is an extract of what mermaid does when using the API. Th
 bind events to an SVG when using the API for rendering.
 
 ```javascript
-const insertSvg = function (svgCode, bindFunctions) {
-  element.innerHTML = svgCode;
-  if (typeof callback !== 'undefined') {
-    callback(id);
+// Example of using the bindFunctions
+const drawDiagram = async function () {
+  element = document.querySelector('#graphDiv');
+  const graphDefinition = 'graph TB\na-->b';
+  const { svg, bindFunctions } = await mermaid.render('graphDiv', graphDefinition);
+  element.innerHTML = svg;
+  // This can also be written as `bindFunctions?.(element);` using the `?` shorthand.
+  if (bindFunctions) {
+    bindFunctions(element);
   }
-  bindFunctions(element);
 };
-
-const id = 'theGraph';
-
-mermaidAPI.render(id, txt, insertSvg, element);
 ```
 
 1.  The graph is generated using the render call.

docs/ecosystem/integrations.md

@@ -20,6 +20,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Gitea](https://gitea.io) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
+- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
 - [Swimm](https://swimm.io) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)
@@ -188,3 +189,6 @@ They also serve as proof of concept, for the variety of things that can be built
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
   - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
+- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
+  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
+  - [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/reference#markdown_element)

docs/intro/n00b-gettingStarted.md

@@ -103,7 +103,7 @@ When writing the .html file, we give two instructions inside the html code to th
 
 a. The mermaid code for the diagram we want to create.
 
-b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
+b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
 
 **a. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
 
@@ -135,7 +135,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 ```
 
 **Notes**:
-Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can place `mermaid.initialize()` inside `mermaid.esm.min.mjs` for brevity. However, doing the opposite lets you control when it starts looking for `<div>`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<div>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
+Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `<pre>` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<pre>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
 
 `startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
 
@@ -143,10 +143,6 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 | ----------- | --------------------------------- | ------- | ----------- |
 | startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
 
-### Adding external diagrams to mermaid
-
-Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
-
 ### Working Examples
 
 **Here is a full working example of the mermaidAPI being called through the CDN:**

docs/syntax/sequenceDiagram.md

@@ -595,7 +595,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia
 </script>
 ```
 
-It can also be be turned on via the diagram code as in the diagram:
+It can also be turned on via the diagram code as in the diagram:
 
 ```mermaid-example
 sequenceDiagram

packages/mermaid/package.json

@@ -7,8 +7,8 @@
   "types": "./dist/mermaid.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/mermaid.core.mjs",
-      "types": "./dist/mermaid.d.ts"
+      "types": "./dist/mermaid.d.ts",
+      "import": "./dist/mermaid.core.mjs"
     },
     "./*": "./*"
   },

packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue

@@ -17,7 +17,7 @@ const props = defineProps({
   },
 });
 
-const svg = ref(null);
+const svg = ref('');
 let mut = null;
 
 onMounted(async () => {

packages/mermaid/src/docs/.vitepress/theme/mermaid.ts

@@ -2,6 +2,6 @@ import mermaid, { type MermaidConfig } from 'mermaid';
 
 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
   mermaid.initialize(config);
-  const svg = await mermaid.render(id, code);
+  const { svg } = await mermaid.render(id, code);
   return svg;
 };

packages/mermaid/src/docs/config/usage.md

@@ -14,21 +14,24 @@ Please note that you can switch versions through the dropdown box at the top rig
 
 For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./setup/README.md).
 
-We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
+We have compiled some Video [Tutorials](./Tutorials.md) on how to use the Mermaid Live Editor.
 
 ### Installing and Hosting Mermaid on a Webpage
 
 **Using the npm package:**
 
-1. You will need to install `node v16`, which would have npm.
+Requirements:
 
-2. Download `yarn` using npm.
+- Node >= 16
 
-3. Enter the following command: `yarn add mermaid`.
-
-4. At this point, you can add mermaid as a dev dependency using this command: `yarn add --dev mermaid`.
-
-5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions as is shown in the example below.
+```bash
+# NPM
+npm install mermaid
+# Yarn
+yarn add mermaid
+# PNPM
+pnpm add mermaid
+```
 
 **Hosting mermaid on a web page:**
 
@@ -36,7 +39,9 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
 
 The easiest way to integrate mermaid on a web page requires two elements:
 
-- A graph definition, inside `<pre>` tags labeled `class=mermaid`. Example:
+- A graph definition, inside `<pre>` tags labeled `class=mermaid`.
+
+Example:
 
 ```html
 <pre class="mermaid">
@@ -47,14 +52,13 @@ The easiest way to integrate mermaid on a web page requires two elements:
 </pre>
 ```
 
-- Inclusion of the mermaid address in the html page body using a `script` tag as an ESM import, and the `mermaidAPI` call.
+- The mermaid js script. Added using a `script` tag as an ESM import.
 
 Example:
 
 ```html
 <script type="module">
   import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
-  mermaid.initialize({ startOnLoad: true });
 </script>
 ```
 
@@ -65,9 +69,6 @@ Example:
 ```html
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-  </head>
   <body>
     <pre class="mermaid">
   graph LR
@@ -77,7 +78,6 @@ Example:
     </pre>
     <script type="module">
       import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
-      mermaid.initialize({ startOnLoad: true });
     </script>
   </body>
 </html>
@@ -89,11 +89,12 @@ An id attribute is also added to mermaid tags without one.
 
 Mermaid can load multiple diagrams, in the same page.
 
-> Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
+> Try it out, save this code as HTML and load it using any browser.
+> (Except Internet Explorer, please don't use Internet Explorer.)
 
 ## Enabling Click Event and Tags in Nodes
 
-A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
+A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
 
 **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
 
@@ -101,7 +102,7 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th
 
 | Parameter     | Description                       | Type   | Required | Values                                     |
 | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
+| securityLevel | Level of trust for parsed diagram | String | Optional | 'sandbox', 'strict', 'loose', 'antiscript' |
 
 Values:
 
@@ -117,26 +118,17 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle
 
 **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
 
-**To change `securityLevel`, you have to call `mermaidAPI.initialize`:**
+**To change `securityLevel`, you have to call `mermaid.initialize`:**
 
 ```javascript
-mermaidAPI.initialize({
+mermaid.initialize({
   securityLevel: 'loose',
 });
 ```
 
 ### Labels out of bounds
 
-If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
-whole page to load (dom + assets, particularly the fonts file).
-
-```javascript
-$(document).load(function () {
-  mermaid.initialize();
-});
-```
-
-or
+If you use dynamically loaded fonts that are loaded through CSS, such as fonts, mermaid should wait for the whole page to load (dom + assets, particularly the fonts file).
 
 ```javascript
 $(document).ready(function () {
@@ -149,12 +141,55 @@ Not doing so will most likely result in mermaid rendering graphs that have label
 If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
 
 ```css
-div.mermaid {
+pre.mermaid {
   font-family: 'trebuchet ms', verdana, arial;
 }
 ```
 
-### Calling `mermaid.init`
+### Using `mermaid.run`
+
+mermaid.run was added in v10 and is the preferred way of handling more complex integration.
+By default, `mermaid.run` will be called when the document is ready, rendering all elements with `class="mermaid"`.
+
+You can customize that behavior by calling `await mermaid.run(<config>)`.
+
+`mermaid.initialize({startOnLoad: false})` will prevent `mermaid.run` from being called automatically after load.
+
+Render all elements with querySelector ".someOtherClass"
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  querySelector: '.someOtherClass',
+});
+```
+
+Render all elements passed as an array
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  nodes: [document.getElementById('someId'), document.getElementById('anotherId')],
+});
+await mermaid.run({
+  nodes: document.querySelectorAll('.yetAnotherClass'),
+});
+```
+
+Render all `.mermaid` elements while suppressing any error
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  suppressErrors: true,
+});
+```
+
+### Calling `mermaid.init` - Deprecated
+
+```warning
+mermaid.init is deprecated in v10 and will be removed in v11. Please use mermaid.run instead.
+```
 
 By default, `mermaid.init` will be called when the document is ready, finding all elements with
 `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
@@ -188,25 +223,24 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 ## API usage
 
-The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
-will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to
-fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
+The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
 The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 <script type="module">
-  import mermaid from './mermaid.mjs';
-  mermaid.mermaidAPI.initialize({ startOnLoad: false });
-  $(async function () {
-    // Example of using the API var
+  import mermaid from './mermaid.esm.mjs';
+  mermaid.initialize({ startOnLoad: false });
+
+  // Example of using the render function
+  const drawDiagram = async function () {
     element = document.querySelector('#graphDiv');
-    const insertSvg = function (svgCode, bindFunctions) {
-      element.innerHTML = svgCode;
-    };
     const graphDefinition = 'graph TB\na-->b';
-    const graph = await mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
-  });
+    const { svg } = await mermaid.render('graphDiv', graphDefinition);
+    element.innerHTML = svg;
+  };
+
+  await drawDiagram();
 </script>
 ```
 
@@ -219,17 +253,17 @@ The example code below is an extract of what mermaid does when using the API. Th
 bind events to an SVG when using the API for rendering.
 
 ```javascript
-const insertSvg = function (svgCode, bindFunctions) {
-  element.innerHTML = svgCode;
-  if (typeof callback !== 'undefined') {
-    callback(id);
+// Example of using the bindFunctions
+const drawDiagram = async function () {
+  element = document.querySelector('#graphDiv');
+  const graphDefinition = 'graph TB\na-->b';
+  const { svg, bindFunctions } = await mermaid.render('graphDiv', graphDefinition);
+  element.innerHTML = svg;
+  // This can also be written as `bindFunctions?.(element);` using the `?` shorthand.
+  if (bindFunctions) {
+    bindFunctions(element);
   }
-  bindFunctions(element);
 };
-
-const id = 'theGraph';
-
-mermaidAPI.render(id, txt, insertSvg, element);
 ```
 
 1. The graph is generated using the render call.

packages/mermaid/src/docs/ecosystem/integrations.md

@@ -14,6 +14,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Gitea](https://gitea.io) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
+- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
 - [Swimm](https://swimm.io) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)
@@ -182,3 +183,6 @@ They also serve as proof of concept, for the variety of things that can be built
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
   - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
+- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
+  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
+  - [ui.markdown(..., extras=['mermaid'])](https://nicegui.io/reference#markdown_element)

packages/mermaid/src/docs/intro/n00b-gettingStarted.md

@@ -86,7 +86,7 @@ When writing the .html file, we give two instructions inside the html code to th
 
 a. The mermaid code for the diagram we want to create.
 
-b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
+b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
 
 **a. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
 
@@ -118,7 +118,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 ```
 
 **Notes**:
-Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can place `mermaid.initialize()` inside `mermaid.esm.min.mjs` for brevity. However, doing the opposite lets you control when it starts looking for `<div>`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<div>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
+Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `<pre>` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<pre>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
 
 `startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
 
@@ -126,10 +126,6 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 | ----------- | --------------------------------- | ------- | ----------- |
 | startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
 
-### Adding external diagrams to mermaid
-
-Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
-
 ### Working Examples
 
 **Here is a full working example of the mermaidAPI being called through the CDN:**

packages/mermaid/src/docs/syntax/sequenceDiagram.md

@@ -418,7 +418,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia
 </script>
 ```
 
-It can also be be turned on via the diagram code as in the diagram:
+It can also be turned on via the diagram code as in the diagram:
 
 ```mermaid-example
 sequenceDiagram