marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

🖼️ Add Radar Demo

Browse Source
This commit is contained in:
Thomas Di Cizerone
2025-03-16 18:18:18 +01:00
parent 5e97b2f764
commit a7f2c0bc34
2 changed files with 139 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demos/index.html
View File

@@ -91,6 +91,9 @@
<li>
<h2><a href="./architecture.html">Architecture</a></h2>
</li>
<li>
<h2><a href="./radar.html">Radar</a></h2>
</li>
</ul>
</body>
</html>

136
demos/radar.html Normal file
View File

@@ -0,0 +1,136 @@
<!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
>
</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>