From e9f8ba6915376b2bd30e0b63075fb243806c2d4c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 11:28:29 +0530
Subject: [PATCH] doc: Add mindmap integration docs

---
 docs/mindmap.md                                  | 14 ++++++++++++++
 docs/n00b-gettingStarted.md                      |  4 ++++
 packages/mermaid/src/docs/mindmap.md             | 14 ++++++++++++++
 packages/mermaid/src/docs/n00b-gettingStarted.md |  4 ++++
 4 files changed, 36 insertions(+)

diff --git a/docs/mindmap.md b/docs/mindmap.md
index 32f1e099dc..935572ddc4 100644
--- a/docs/mindmap.md
+++ b/docs/mindmap.md
@@ -235,3 +235,17 @@ Root
         B
       C
 ```
+
+## Integrating with your library/website.
+
+Mindmap uses the experimental lazy loading & async rendering features which could change in the future.
+
+```html
+<script type="module">
+  import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+  import mindmap from 'https://unpkg.com/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
+  await mermaid.registerExternalDiagrams([mindmap]);
+</script>
+```
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md
index feac489195..e4e98d0827 100644
--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@@ -119,6 +119,10 @@ 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](./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:**
diff --git a/packages/mermaid/src/docs/mindmap.md b/packages/mermaid/src/docs/mindmap.md
index 5aa6f4953d..2b47e3e198 100644
--- a/packages/mermaid/src/docs/mindmap.md
+++ b/packages/mermaid/src/docs/mindmap.md
@@ -153,3 +153,17 @@ Root
         B
       C
 ```
+
+## Integrating with your library/website.
+
+Mindmap uses the experimental lazy loading & async rendering features which could change in the future.
+
+```html
+<script type="module">
+  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+  import mindmap from '<CDN_URL>/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap.esm.min.mjs';
+  await mermaid.registerExternalDiagrams([mindmap]);
+</script>
+```
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/packages/mermaid/src/docs/n00b-gettingStarted.md b/packages/mermaid/src/docs/n00b-gettingStarted.md
index 095cece249..398541eb1d 100644
--- a/packages/mermaid/src/docs/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/n00b-gettingStarted.md
@@ -117,6 +117,10 @@ 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](./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:**