diff --git a/mermaid/index.html b/mermaid/index.html
new file mode 100644
index 0000000..d59e216
--- /dev/null
+++ b/mermaid/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    Mermaid diagram
+
+    <p>1st Diagram</p>
+    <pre class="mermaid">
+        graph TD
+        A[Client] --> B[Load Balancer]
+        B --> C[Server01]
+        B --> D[Server02]
+    </pre>
+
+    <p>2nd Diagram</p>
+    <pre class="mermaid">
+        graph TD
+        A[Client] --> |tcp_123| B
+        B(Load Balancer)
+        B --> |tcp_456| C[Server1]
+        B --> |tcp_456| C[Server2]
+    </pre>
+
+
+
+
+    <script type="module">
+        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({ startOnLoad: true });
+    </script>
+</body>
+</html>
\ No newline at end of file
