79 lines
2.0 KiB
HTML
79 lines
2.0 KiB
HTML
<!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> |