add example of data flow diagram

See https://github.com/mermaid-js/mermaid/issues/1893
2025-09-27 03:09:43 +02:00 · 2021-10-09 16:22:17 +02:00
parent cd427ab8ba
commit e2cd2a72aa
1 changed files with 42 additions and 0 deletions
--- a/dist/dataflowchart.html
+++ b/dist/dataflowchart.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+  <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+  </style>
+</head>
+<body>
+  <h2>Sample</h2>
+  <div class="mermaid">
+    graph LR
+      DataStore[|Database|] -->|input| Process((System)) -->|output| Entity[Customer]
+  </div>
+
+  <script src="./mermaid.js"></script>
+  <script>
+    mermaid.initialize({
+      theme: 'forest',
+      logLevel: 3,
+      securityLevel: 'loose',
+      flowchart: { curve: 'basis' }
+    });
+  </script>
+  <script>
+    function testClick(nodeId) {
+      console.log("clicked", nodeId)
+      var originalBgColor = document.querySelector('body').style.backgroundColor
+      document.querySelector('body').style.backgroundColor = 'yellow'
+      setTimeout(function() {
+        document.querySelector('body').style.backgroundColor = originalBgColor
+      }, 100)
+    }
+  </script>
+</body>
+</html>