Merge pull request #3810 from mermaid-js/sidv/doc/mindmap

Mindmap integration docs
mermaid-js · Nov 18, 2022 · e2a0c43 · e2a0c43
2 parents 432d4f4 + e9f8ba6
commit e2a0c43
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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:**