inde

vinaysrini · Aug 6, 2024 · 43acd6e · 43acd6e
1 parent 3f5da1b
commit 43acd6e
Showing 1 changed file with 81 additions and 0 deletions.
diff --git a/tools/block/index.html b/tools/block/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mermaid Diagram Editor</title>
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+
+    document.addEventListener('DOMContentLoaded', () => {
+      mermaid.initialize({ startOnLoad: true });
+
+      const textarea = document.getElementById('mermaidInput');
+      const output = document.getElementById('mermaidOutput');
+
+      const updateDiagram = () => {
+        const code = textarea.value;
+        try {
+          mermaid.parse(code);
+          output.innerHTML = `<div class="mermaid">${code}</div>`;
+          mermaid.contentLoaded();
+        } catch (error) {
+          output.innerHTML = '<div style="color: red;">Invalid Mermaid syntax</div>';
+        }
+      };
+
+      textarea.addEventListener('input', updateDiagram);
+      updateDiagram(); // Initial render
+    });
+  </script>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+    }
+    textarea {
+      width: 100%;
+      height: 200px;
+      font-family: monospace;
+      font-size: 14px;
+    }
+    #mermaidOutput {
+      border: 1px solid #ddd;
+      padding: 20px;
+      margin-top: 20px;
+    }
+    footer {
+      margin-top: 20px;
+      font-size: 0.9em;
+      color: #555;
+    }
+  </style>
+</head>
+<body>
+  <h1>Mermaid Diagram Editor</h1>
+  <textarea id="mermaidInput">
+graph LR
+  subgraph V1
+    A[Start] --> B[Process 1]
+    B --> C{Decision}
+    C -->|Yes| D[Process 2]
+    C -->|No| E[End]
+    C --> A
+  end
+
+  subgraph V2
+    direction LR
+    D --> F[Further Process 1]
+    F --> G[Further Process 2]
+    G --> H[End]
+  end
+
+  style A fill:#f9f,stroke:#333,stroke-width:2px;
+ </textarea>
+  <div id="mermaidOutput"></div>
+  <footer>
+    <p>Powered by <a href="https://mermaid-js.github.io/mermaid/#/" target="_blank">Mermaid</a></p>
+    <p>Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.</p>
+  </footer>
+</body>
+</html>