Updating integration instructions for timeline and mindmap
This commit is contained in:
parent
8c7043ffaf
commit
71e4f1152b
|
@ -256,14 +256,30 @@ Root
|
||||||
|
|
||||||
## Integrating with your library/website.
|
## 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
|
```html
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
|
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]);
|
await mermaid.registerExternalDiagrams([mindmap]);
|
||||||
</script>
|
</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.
|
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.
|
||||||
|
|
|
@ -459,4 +459,16 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||||
2010 : Pinterest
|
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.
|
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.
|
||||||
|
|
|
@ -164,14 +164,32 @@ Root
|
||||||
|
|
||||||
## Integrating with your library/website.
|
## 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
|
```html
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
|
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]);
|
await mermaid.registerExternalDiagrams([mindmap]);
|
||||||
</script>
|
</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.
|
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.
|
||||||
|
|
|
@ -291,4 +291,16 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||||
2010 : Pinterest
|
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.
|
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.
|
||||||
|
|
Loading…
Reference in New Issue