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