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