3.9 KB158 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>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: 'Courier New', Courier, monospace !important;
11 }
12 </style>
13 </head>
14
15 <body>
16 <h1>Radar diagram demo</h1>
17
18 <div class="diagrams">
19 <pre class="mermaid">
20 radar-beta
21 title My favorite ninjas
22 axis Agility, Speed, Strength
23 axis Stam["Stamina"] , Intel["Intelligence"]
24
25 curve Ninja1["Naruto"]{
26 Agility 2, Speed 2,
27 Strength 3, Stam 5,
28 Intel 0
29 }
30 curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
31 curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
32
33 showLegend true
34 ticks 3
35 max 8
36 min 0
37 graticule circle
38 </pre
39 >
40
41 <pre class="mermaid">
42 ---
43 config:
44 radar:
45 axisScaleFactor: 0.25
46 axisLabelFactor: 0.95
47 ---
48 radar-beta
49 title DevOps Radar
50 axis f["Feature Velocity"], s["Stability"]
51 axis r["Resilience"], e["Efficiency"]
52 axis c["Cost"], d["DevSecOps"]
53
54 curve app1["App1"]{
55 f 5, s 4.5, r 3.8, d 4.2, e 4.5, c 3.5
56 }
57 curve app2["App2"]{4, 3, 4, 3, 3, 4}, app3["App3"]{3, 2, 4, 3, 2, 3}
58 curve app4["App4"]{2, 1, 3.2, 2.5, 1, 2}
59
60 showLegend true
61 ticks 3
62 max 5
63 graticule polygon
64 </pre
65 >
66
67 <pre class="mermaid">
68 %%{init: {'theme': 'forest'} }%%
69 radar-beta
70 title Forest theme
71 axis Agility, Speed, Strength
72 axis Stam["Stamina"] , Intel["Intelligence"]
73
74 curve Ninja1["Naruto"]{
75 Agility 2, Speed 2,
76 Strength 3, Stam 5,
77 Intel 0
78 }
79 curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
80 curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
81 </pre
82 >
83
84 <pre class="mermaid" style="background-color: black">
85 %%{init: {'theme': 'dark'} }%%
86 radar-beta
87 title Dark theme
88 axis Agility, Speed, Strength
89 axis Stam["Stamina"] , Intel["Intelligence"]
90
91 curve Ninja1["Naruto"]{
92 Agility 2, Speed 2,
93 Strength 3, Stam 5,
94 Intel 0
95 }
96 curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
97 curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
98 </pre
99 >
100 <pre class="mermaid">
101 %%{init: {'theme': 'base', 'themeVariables': {'cScale0': '#ff0000', 'cScale1': '#00ff00', 'cScale2': '#0000ff'}} }%%
102 radar-beta
103 title Custom colors
104 axis Agility, Speed, Strength
105 axis Stam["Stamina"] , Intel["Intelligence"]
106
107 curve Ninja1["Naruto"]{
108 Agility 2, Speed 2,
109 Strength 3, Stam 5,
110 Intel 0
111 }
112 curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
113 curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
114 </pre
115 >
116 <pre class="mermaid">
117 ---
118 config:
119 radar:
120 axisScaleFactor: 0.25
121 curveTension: 0.1
122 theme: base
123 themeVariables:
124 cScale0: "#FF0000"
125 cScale1: "#00FF00"
126 cScale2: "#0000FF"
127 radar:
128 curveOpacity: 0
129 ---
130 radar-beta
131 title Custom colors, axisScaleFactor, curveTension, opacity
132 axis A, B, C, D, E
133 curve c1{1,2,3,4,5}
134 curve c2{5,4,3,2,1}
135 curve c3{3,3,3,3,3}
136 </pre>
137 </div>
138 <script type="module">
139 import mermaid from '/mermaid.esm.mjs';
140 mermaid.initialize({
141 logLevel: 3,
142 securityLevel: 'loose',
143 });
144 </script>
145
146 <style>
147 .diagrams {
148 display: flex;
149 flex-wrap: wrap;
150 }
151 pre {
152 width: 45vw;
153 padding: 2em;
154 }
155 </style>
156 </body>
157</html>
158