From 71e4f1152b96fe716b156f1ab687fd01e724715b Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 16 Feb 2023 12:05:38 +0100 Subject: [PATCH] Updating integration instructions for timeline and mindmap --- docs/syntax/mindmap.md | 20 ++++++++++++++++-- docs/syntax/timeline.md | 12 +++++++++++ packages/mermaid/src/docs/syntax/mindmap.md | 22 ++++++++++++++++++-- packages/mermaid/src/docs/syntax/timeline.md | 12 +++++++++++ 4 files changed, 62 insertions(+), 4 deletions(-) diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md index d72de6f10..f97ecc99f 100644 --- a/docs/syntax/mindmap.md +++ b/docs/syntax/mindmap.md @@ -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 ``` +From version 9.4.0 you can simplify this code to: + + + +or is you prefere not using an esm package: + +```html + +``` + +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. diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md index 4e917bc10..dbbb3521e 100644 --- a/docs/syntax/timeline.md +++ b/docs/syntax/timeline.md @@ -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 + +``` + +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. diff --git a/packages/mermaid/src/docs/syntax/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md index 833f26941..9bb8e9d78 100644 --- a/packages/mermaid/src/docs/syntax/mindmap.md +++ b/packages/mermaid/src/docs/syntax/mindmap.md @@ -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 ``` +From version 9.4.0 you can simplify this code to: + +``` + +``` + +or is you prefere not using an esm package: + +```html + +``` + +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. diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md index 76fdb5e60..784156036 100644 --- a/packages/mermaid/src/docs/syntax/timeline.md +++ b/packages/mermaid/src/docs/syntax/timeline.md @@ -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 + +``` + +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.