Dan/proxmox-helper-script
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mermaidjs.html

Browse Source
This commit is contained in:
Dan 2026-04-17 21:34:05 +08:00
parent 0116bae5ac
commit 9b4f6824f2
1 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
mermaidjs.html Normal file
View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Self-hosted Mermaid Editor</title>
<script src="/mermaid.min.js"></script>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
display: grid;
grid-template-columns: 1fr 1fr;
height: 100vh;
background: #f0f0f0;
}
textarea {
width: 100%;
height: 100%;
padding: 1rem;
font-family: 'JetBrains Mono', Consolas, monospace;
font-size: 14px;
border: none;
resize: none;
background: #2d2d2d;
color: #f8f8f2;
}
#preview {
padding: 1rem;
overflow: auto;
border-left: 1px solid #ccc;
background: #fff;
}
.mermaid { max-width: 90%; margin: 0 auto; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
mermaid.initialize({startOnLoad: false, securityLevel: 'loose'});
const editor = document.querySelector('textarea');
const preview = document.getElementById('preview');
if (!editor || !preview) {
console.error('DOM elements not found');
return;
}
editor.addEventListener('input', () => {
const code = editor.value.trim();
if (code) {
try {
mermaid.render('diagram', code).then(result => {
preview.innerHTML = result.svg;
}).catch(err => {
preview.innerHTML = `<p style="color:red;">Error: ${err.message}</p>`;
});
} catch (e) {
preview.innerHTML = `<p style="color:red;">Parse error: ${e.message}</p>`;
}
} else {
preview.innerHTML = '<p style="color:#999;">Type Mermaid code here...</p>';
}
});
// Initial render
editor.value = `graph TD
A[Start] --> B{Decision?}
B -->|Yes| C[Do A]
B -->|No| D[Do B]
C --> E[End]
D --> E`;
editor.dispatchEvent(new Event('input'));
});
</script>
</head>
<body>
<textarea spellcheck="false"></textarea>
<div id="preview"></div>
</body>
</html>