fix(mermaid): Add await to render in init.

This commit is contained in:
Sidharth Vinod
2022-10-05 14:52:04 +08:00
parent a017ffc3c9
commit 74bd576ebc
2 changed files with 14 additions and 14 deletions

View File

@@ -13,39 +13,39 @@
</head> </head>
<body> <body>
<div style="display: flex"> <div style="display: flex">
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
graph TB graph TB
FunctionTest1-->URLTest1 FunctionTest1-->URLTest1
click FunctionTest1 clickByFlow "Add a div" click FunctionTest1 clickByFlow "Add a div"
click URLTest1 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URLTest1 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
graph TB graph TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
FunctionTest2-->URLTest2 FunctionTest2-->URLTest2
click FunctionTest2 clickByFlow "Add a div" click FunctionTest2 clickByFlow "Add a div"
click URLTest2 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click URLTest2 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
10Function--->20URL 10Function--->20URL
click 10Function clickByFlow "Add a div" click 10Function clickByFlow "Add a div"
click 20URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click 20URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
@@ -95,20 +95,20 @@
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</pre> </pre>
<div style="display: flex"> <div style="display: flex">
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
graph TB graph TB
FunctionArgTest2-->URL FunctionArgTest2-->URL
click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
2FunctionArg-->URL 2FunctionArg-->URL
click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
@@ -116,7 +116,7 @@
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
</pre> </pre>
<pre id="FirstLine" class="mermaid"> <pre class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"

View File

@@ -45,7 +45,7 @@ import { isDetailedError } from './utils';
* @param nodes * @param nodes
* @param callback * @param callback
*/ */
const init = function ( const init = async function (
config?: MermaidConfig, config?: MermaidConfig,
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
nodes?: string | HTMLElement | NodeListOf<HTMLElement>, nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
@@ -69,7 +69,7 @@ const init = function (
} }
}; };
const initThrowsErrors = function ( const initThrowsErrors = async function (
config?: MermaidConfig, config?: MermaidConfig,
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
nodes?: string | HTMLElement | NodeListOf<HTMLElement>, nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
@@ -108,7 +108,7 @@ const initThrowsErrors = function (
// generate the id of the diagram // generate the id of the diagram
const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed); const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
let txt; let txt: string;
const errors = []; const errors = [];
// element is the current div with mermaid class // element is the current div with mermaid class
@@ -136,7 +136,7 @@ const initThrowsErrors = function (
log.debug('Detected early reinit: ', init); log.debug('Detected early reinit: ', init);
} }
try { try {
mermaidAPI.render( await mermaidAPI.render(
id, id,
txt, txt,
(svgCode: string, bindFunctions?: (el: Element) => void) => { (svgCode: string, bindFunctions?: (el: Element) => void) => {