Add mermaidjs.html

2026-04-17 21:34:05 +08:00 · 2026-04-17 21:34:05 +08:00 · 9b4f6824f2
commit 9b4f6824f2
parent 0116bae5ac
1 changed files with 79 additions and 0 deletions
--- a/mermaidjs.html
+++ b/mermaidjs.html
@ -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>