<!doctype html>
<html lang="en">
<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: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h1>Radar diagram demo</h1>
<div class="diagrams">
<pre class="mermaid">
radar-beta
title My favorite ninjas
axis Agility, Speed, Strength
axis Stam["Stamina"] , Intel["Intelligence"]
curve Ninja1["Naruto"]{
Agility 2, Speed 2,
Strength 3, Stam 5,
Intel 0
}
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
showLegend true
ticks 3
max 8
min 0
graticule circle
</pre
>
<pre class="mermaid">
---
config:
radar:
axisScaleFactor: 0.25
axisLabelFactor: 0.95
---
radar-beta
title DevOps Radar
axis f["Feature Velocity"], s["Stability"]
axis r["Resilience"], e["Efficiency"]
axis c["Cost"], d["DevSecOps"]
curve app1["App1"]{
f 5, s 4.5, r 3.8, d 4.2, e 4.5, c 3.5
}
curve app2["App2"]{4, 3, 4, 3, 3, 4}, app3["App3"]{3, 2, 4, 3, 2, 3}
curve app4["App4"]{2, 1, 3.2, 2.5, 1, 2}
showLegend true
ticks 3
max 5
graticule polygon
</pre
>
<pre class="mermaid">
%%{init: {'theme': 'forest'} }%%
radar-beta
title Forest theme
axis Agility, Speed, Strength
axis Stam["Stamina"] , Intel["Intelligence"]
curve Ninja1["Naruto"]{
Agility 2, Speed 2,
Strength 3, Stam 5,
Intel 0
}
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
</pre
>
<pre class="mermaid" style="background-color: black">
%%{init: {'theme': 'dark'} }%%
radar-beta
title Dark theme
axis Agility, Speed, Strength
axis Stam["Stamina"] , Intel["Intelligence"]
curve Ninja1["Naruto"]{
Agility 2, Speed 2,
Strength 3, Stam 5,
Intel 0
}
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
</pre
>
<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'cScale0': '#ff0000', 'cScale1': '#00ff00', 'cScale2': '#0000ff'}} }%%
radar-beta
title Custom colors
axis Agility, Speed, Strength
axis Stam["Stamina"] , Intel["Intelligence"]
curve Ninja1["Naruto"]{
Agility 2, Speed 2,
Strength 3, Stam 5,
Intel 0
}
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
</pre
>
<pre class="mermaid">
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
title Custom colors, axisScaleFactor, curveTension, opacity
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
</pre>
</div>
<script type="module">
import mermaid from '/mermaid.esm.mjs';
mermaid.initialize({
logLevel: 3,
securityLevel: 'loose',
});
</script>
<style>
.diagrams {
display: flex;
flex-wrap: wrap;
}
pre {
width: 45vw;
padding: 2em;
}
</style>
</body>
</html>