|
1 | 1 | {% if site.enable_mermaid %} |
2 | 2 | <!-- Mermaid.js for diagrams in markdown --> |
| 3 | + <style> |
| 4 | + .mermaid-wrapper { max-width: 100%; overflow-x: auto; overflow-y: visible; margin: 1rem 0; } |
| 5 | + .mermaid-wrapper .mermaid { display: flex; justify-content: center; } |
| 6 | + .mermaid-wrapper .mermaid svg { max-width: 100%; height: auto; } |
| 7 | + </style> |
3 | 8 | <script src="https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.min.js" crossorigin="anonymous"></script> |
4 | 9 | <script> |
5 | 10 | document.addEventListener('DOMContentLoaded', function () { |
6 | 11 | var blocks = document.querySelectorAll('pre code.language-mermaid'); |
7 | 12 | if (blocks.length === 0) return; |
8 | | - mermaid.initialize({ startOnLoad: false, theme: 'default' }); |
| 13 | + mermaid.initialize({ |
| 14 | + startOnLoad: false, |
| 15 | + theme: 'default', |
| 16 | + flowchart: { useMaxWidth: true }, |
| 17 | + useMaxWidth: true |
| 18 | + }); |
9 | 19 | blocks.forEach(function (block, i) { |
10 | 20 | var pre = block.parentElement; |
11 | | - var id = 'mermaid-' + i; |
| 21 | + var wrapper = document.createElement('div'); |
| 22 | + wrapper.className = 'mermaid-wrapper'; |
12 | 23 | var div = document.createElement('div'); |
13 | | - div.id = id; |
| 24 | + div.id = 'mermaid-' + i; |
14 | 25 | div.className = 'mermaid'; |
15 | 26 | div.textContent = block.textContent; |
16 | | - pre.parentElement.insertBefore(div, pre); |
| 27 | + wrapper.appendChild(div); |
| 28 | + pre.parentElement.insertBefore(wrapper, pre); |
17 | 29 | pre.style.display = 'none'; |
18 | 30 | }); |
19 | 31 | mermaid.run({ querySelector: '.mermaid', suppressErrors: true }); |
|
0 commit comments