GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

doc: Add mindmap integration docs

Browse Source
This commit is contained in:
Sidharth Vinod 2022-11-18 11:28:29 +05:30
parent 432d4f41f6
commit e9f8ba6915
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
4 changed files with 36 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/mindmap.md
View File

@ -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.

4
docs/n00b-gettingStarted.md
View File

@ -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:**

14
packages/mermaid/src/docs/mindmap.md
View File

@ -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.

4
packages/mermaid/src/docs/n00b-gettingStarted.md
View File

@ -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:**