3.1 KB135 lines
Blame
1<html>
2 <head>
3 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
4 <style>
5 body {
6 /* background: rgb(221, 208, 208); */
7 /* background:#333; */
8 font-family: 'Arial';
9 }
10 h1 {
11 color: #333;
12 font-size: 20px;
13 text-decoration: underline;
14 }
15 .mermaid2 {
16 display: none;
17 }
18 .dark {
19 background: #333;
20 }
21 .dark h1 {
22 color: #f4f4f4;
23 }
24 .size {
25 width: 33%;
26 height: 250px;
27 }
28 </style>
29 </head>
30 <body>
31 <div class="flex flex-wrap">
32 <div class="size">
33 <h1>Default</h1>
34 <pre class="mermaid">
35 %%{init: { 'logLevel': 0, 'theme': 'default'} }%%
36 graph TD
37 A(Start) --> B[/Another/]
38 A[/Another/] --> C[End]
39 subgraph section
40 B
41 C
42 end
43 </pre>
44 </div>
45 <div class="size">
46 <h1>Forest</h1>
47 <pre class="mermaid">
48 %%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
49 graph TD
50 A(Start) --> B[/Another/]
51 A[/Another/] --> C[End]
52 subgraph section
53 B
54 C
55 end
56 </pre>
57 </div>
58 <div class="size">
59 <h1>Neutral</h1>
60 <pre class="mermaid">
61 %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
62 graph TD
63 A(Start) --> B[/Another/]
64 A[/Another/] --> C[End]
65 subgraph section
66 B
67 C
68 end
69 </pre>
70 </div>
71 <div class="size dark">
72 <h1>Dark</h1>
73 <pre class="mermaid">
74 %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
75 graph TD
76 A(Start) --> B[/Another/]
77 A[/Another/] --> C[End]
78 subgraph section
79 B
80 C
81 end
82 </pre>
83 </div>
84 <div class="size">
85 <h1>Base with overriding themeVariable</h1>
86 <pre class="mermaid">
87 %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
88
89 graph TD
90 A(Start) --> B[/Another/]
91 A[/Another/] --> C[End]
92 subgraph section
93 B
94 C
95 end
96 </pre>
97 </div>
98 <div class="size">
99 <h1>Nothing set, should be Default</h1>
100 <pre class="mermaid">
101 %%{init: { 'logLevel': 1} }%%
102
103 graph TD
104 A(Start) --> B[/Another/]
105 A[/Another/] --> C[End]
106 subgraph section
107 B
108 C
109 end
110 </pre>
111 </div>
112 </div>
113
114 <script type="module">
115 import mermaid from './mermaid.esm.mjs';
116
117 mermaid.initialize({
118 logLevel: 0,
119 graph: { curve: 'cardinal', htmlLabels: false },
120 sequence: { actorMargin: 50, showSequenceNumbers: true },
121 fontFamily: '"arial", sans-serif',
122 curve: 'cardinal',
123 securityLevel: 'strict',
124 startOnLoad: false,
125 });
126
127 await mermaid.run();
128
129 if (window.Cypress) {
130 window.rendered = true;
131 }
132 </script>
133 </body>
134</html>
135