1.7 KB68 lines
Blame
1<!--Do not edit this file-->
2<!--Duplicate this file to any name you like, run `pnpm dev`, open http://localhost:9000/dev/name.html to view-->
3<html>
4 <head>
5 <title>Mermaid development page</title>
6 <style>
7 .container {
8 display: flex;
9 flex-direction: row;
10 }
11
12 #code {
13 max-width: 30vw;
14 width: 30vw;
15 }
16
17 #dynamicDiagram {
18 padding-left: 2em;
19 flex: 1;
20 }
21 </style>
22 </head>
23 <body>
24 <pre id="diagram" class="mermaid">
25graph TB
26 a --> b
27 a --> c
28 b --> d
29 c --> d
30 </pre>
31
32 <hr />
33 Type code to view diagram:
34 <div class="container">
35 <textarea name="code" id="code" cols="30" rows="10"></textarea>
36 <div id="dynamicDiagram"></div>
37 </div>
38 <pre class="mermaid">info</pre>
39
40 <script type="module">
41 import mermaid from '/mermaid.esm.mjs';
42 import layouts from '/mermaid-layout-elk.esm.mjs';
43 mermaid.registerLayoutLoaders(layouts);
44 async function render(str) {
45 const { svg } = await mermaid.render('dynamic', str);
46 document.getElementById('dynamicDiagram').innerHTML = svg;
47 }
48 const storeKey = window.location.pathname;
49 const code = localStorage.getItem(storeKey);
50 if (code) {
51 document.getElementById('code').value = code;
52 await render(code);
53 }
54 mermaid.initialize({
55 startOnLoad: true,
56 logLevel: 0,
57 });
58 document.getElementById('code').addEventListener('input', async (e) => {
59 const value = e.target.value;
60 localStorage.setItem(storeKey, value);
61 await render(value);
62 });
63 </script>
64
65 <script src="/dev/reload.js"></script>
66 </body>
67</html>
68