|
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--> |
| 1 | +<!doctype html> |
3 | 2 | <html> |
4 | 3 | <head> |
5 | 4 | <title>Mermaid development page</title> |
|
21 | 20 | </style> |
22 | 21 | </head> |
23 | 22 | <body> |
24 | | - <pre id="diagram" class="mermaid"> |
| 23 | + <div class="container"> |
| 24 | + <pre id="diagram" class="mermaid"> |
25 | 25 | graph TB |
26 | 26 | a --> b |
27 | 27 | a --> c |
28 | 28 | b --> d |
29 | 29 | c --> d |
30 | | - </pre> |
| 30 | + </pre> |
| 31 | + <pre class="mermaid">info</pre> |
| 32 | + </div> |
31 | 33 |
|
32 | 34 | <hr /> |
33 | 35 | Type code to view diagram: |
34 | 36 | <div class="container"> |
35 | 37 | <textarea name="code" id="code" cols="30" rows="10"></textarea> |
36 | 38 | <div id="dynamicDiagram"></div> |
37 | 39 | </div> |
38 | | - <pre class="mermaid">info</pre> |
| 40 | + |
| 41 | + <table> |
| 42 | + <tbody> |
| 43 | + <tr> |
| 44 | + <th scope="row">Error</th> |
| 45 | + <td> |
| 46 | + <pre><code id="errors"></code></pre> |
| 47 | + </td> |
| 48 | + </tr> |
| 49 | + <tr> |
| 50 | + <th scope="row">Render time</th> |
| 51 | + <td> |
| 52 | + <time id="renderTime">N/A</time> |
| 53 | + </td> |
| 54 | + </tr> |
| 55 | + </tbody> |
| 56 | + </table> |
39 | 57 |
|
40 | 58 | <script type="module"> |
41 | 59 | import mermaid from '/mermaid.esm.mjs'; |
42 | 60 | import layouts from '/mermaid-layout-elk.esm.mjs'; |
43 | 61 | mermaid.registerLayoutLoaders(layouts); |
| 62 | + |
| 63 | + function setRenderTime(start, end) { |
| 64 | + const durationMs = end - start; |
| 65 | + document |
| 66 | + .getElementById('renderTime') |
| 67 | + .setAttribute('datetime', `PT${(durationMs / 1000).toFixed(3)}s`); |
| 68 | + document.getElementById('renderTime').innerText = new Intl.NumberFormat('en', { |
| 69 | + style: 'unit', |
| 70 | + unit: 'millisecond', |
| 71 | + }).format(durationMs); |
| 72 | + } |
| 73 | + |
44 | 74 | async function render(str) { |
45 | | - const { svg } = await mermaid.render('dynamic', str); |
46 | | - document.getElementById('dynamicDiagram').innerHTML = svg; |
| 75 | + const start = performance.now(); |
| 76 | + try { |
| 77 | + const { svg } = await mermaid.render('dynamic', str); |
| 78 | + const end = performance.now(); |
| 79 | + document.getElementById('dynamicDiagram').innerHTML = svg; |
| 80 | + document.getElementById('errors').innerText = 'No errors'; |
| 81 | + setRenderTime(start, end); |
| 82 | + } catch (err) { |
| 83 | + const end = performance.now(); |
| 84 | + document.getElementById('errors').innerText = err; |
| 85 | + setRenderTime(start, end); |
| 86 | + } |
47 | 87 | } |
48 | 88 | const storeKey = window.location.pathname; |
49 | 89 | const code = localStorage.getItem(storeKey); |
50 | | - if (code) { |
51 | | - document.getElementById('code').value = code; |
52 | | - await render(code); |
53 | | - } |
54 | 90 | mermaid.initialize({ |
55 | 91 | startOnLoad: true, |
56 | 92 | logLevel: 0, |
|
60 | 96 | localStorage.setItem(storeKey, value); |
61 | 97 | await render(value); |
62 | 98 | }); |
| 99 | + if (code) { |
| 100 | + document.getElementById('code').value = code; |
| 101 | + await render(code); |
| 102 | + } |
63 | 103 | </script> |
64 | 104 |
|
65 | 105 | <script src="/dev/reload.js"></script> |
|
0 commit comments