mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Updating integration instructions for timeline and mindmap

This commit is contained in:
Knut Sveidqvist 2023-02-16 12:05:38 +01:00
parent 8c7043ffaf
commit 71e4f1152b
4 changed files with 62 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/syntax/mindmap.md
View File

@ -256,14 +256,30 @@ Root
## Integrating with your library/website.
Mindmap uses the experimental lazy loading & async rendering features which could change in the future.
Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web page:
```html
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
await mermaid.registerExternalDiagrams([mindmap]);
</script>
```
From version 9.4.0 you can simplify this code to:
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
</script>
or is you prefere not using an esm package:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
```
Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
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.

12
docs/syntax/timeline.md
View File

@ -459,4 +459,16 @@ Let's put them to use, and see how our sample diagram looks in different themes:
2010 : Pinterest
```
## Integrating with your library/website.
Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.
You can use this method to add mermaid including the timeline diagram to a web page:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
```
Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
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.

22
packages/mermaid/src/docs/syntax/mindmap.md
View File

@ -164,14 +164,32 @@ Root
## Integrating with your library/website.
Mindmap uses the experimental lazy loading & async rendering features which could change in the future.
Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web page:
```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';
import mindmap from '<CDN_URL>/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
await mermaid.registerExternalDiagrams([mindmap]);
</script>
```
From version 9.4.0 you can simplify this code to:
```
<script type="module">
import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
</script>
```
or is you prefere not using an esm package:
```html
<script src="<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
```
Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
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.

12
packages/mermaid/src/docs/syntax/timeline.md
View File

@ -291,4 +291,16 @@ Let's put them to use, and see how our sample diagram looks in different themes:
2010 : Pinterest
```
## Integrating with your library/website.
Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.
You can use this method to add mermaid including the timeline diagram to a web page:
```html
<script src="<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.min.js"></script>
```
Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
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.