2022-11-13 12:23:30 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<head>
|
2023-01-02 13:14:32 -06:00
|
|
|
<title>Mermaid test</title>
|
2022-11-13 12:23:30 -06:00
|
|
|
<link type="text/css" rel="stylesheet" href="./index.css" />
|
2022-11-14 10:17:43 -06:00
|
|
|
|
|
|
|
|
<script type="module" defer>
|
|
|
|
|
// import mermaid from './mermaid.mjs';
|
2023-01-02 13:14:32 -06:00
|
|
|
import mermaid from "https://unpkg.com/mermaid@9.2.2/dist/mermaid.esm.mjs";
|
2022-11-14 10:17:43 -06:00
|
|
|
mermaid.mermaidAPI.initialize({ startOnLoad: false });
|
|
|
|
|
// Example of using the API var
|
2023-01-02 13:14:32 -06:00
|
|
|
const element = document.querySelector("#graphDiv");
|
2022-11-14 10:17:43 -06:00
|
|
|
const insertSvg = function (svgCode, bindFunctions) {
|
|
|
|
|
element.innerHTML = svgCode;
|
|
|
|
|
};
|
2023-01-02 13:14:32 -06:00
|
|
|
const graphDefinition = "graph TB\na-->b";
|
|
|
|
|
const graph = await mermaid.mermaidAPI.render(
|
|
|
|
|
"graphDiv",
|
|
|
|
|
graphDefinition,
|
|
|
|
|
insertSvg
|
|
|
|
|
);
|
|
|
|
|
const div = document.createElement("div");
|
2022-11-14 10:17:43 -06:00
|
|
|
div.innerHTML = graph;
|
|
|
|
|
document.body.append(div);
|
|
|
|
|
</script>
|
2022-11-13 12:23:30 -06:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2022-11-14 10:17:43 -06:00
|
|
|
<div id="graphDiv"></div>
|
2022-11-13 12:23:30 -06:00
|
|
|
</body>
|
