1.8 KB58 lines
Blame
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <title>Data Flow Mermaid Quick Test Page</title>
7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
8 <style>
9 div.mermaid {
10 /* font-family: 'trebuchet ms', verdana, arial; */
11 font-family: 'Courier New', Courier, monospace !important;
12 }
13 </style>
14 </head>
15 <body>
16 <h1>Data Flow Diagram demos</h1>
17 <pre class="mermaid">
18 flowchart LR
19 accTitle: A simple linear flowchart.
20 accDescr: A Database has input to a circle System has output to a square Customer.
21 DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
22 </pre>
23
24 <hr />
25
26 <h2>Borders Example</h2>
27 <pre class="mermaid">
28 flowchart TD
29 allSides[ stroke all sides ];
30 allSides2[|borders:ltrb| stroke all sides ];
31 rbSides[|borders:rb| stroke right and bottom sides ];
32 ltSides[|borders:lt| stroke left and top sides ];
33 lrSides[|borders:lr| stroke left and right sides ];
34 noSide[|borders:no| stroke no side ];
35 </pre>
36
37 <script type="module">
38 import mermaid from './mermaid.esm.mjs';
39 mermaid.initialize({
40 theme: 'forest',
41 logLevel: 3,
42 securityLevel: 'loose',
43 flowchart: { curve: 'basis' },
44 });
45 </script>
46 <script>
47 function testClick(nodeId) {
48 console.log('clicked', nodeId);
49 let originalBgColor = document.querySelector('body').style.backgroundColor;
50 document.querySelector('body').style.backgroundColor = 'yellow';
51 setTimeout(function () {
52 document.querySelector('body').style.backgroundColor = originalBgColor;
53 }, 100);
54 }
55 </script>
56 </body>
57</html>
58