sirena 0.1.0

data/examples/pie/README.adoc

@@ -0,0 +1,75 @@
+= Pie Chart Examples
+
+== Purpose
+
+Pie charts visualize proportional data, showing how individual parts contribute to a whole. Ideal for displaying percentages and relative distributions.
+
+== When to Use
+
+* Market share analysis
+* Budget allocation visualization
+* Survey result presentation
+* Resource distribution
+* Percentage breakdowns
+
+== Syntax Overview
+
+[source,mermaid]
+----
+pie title Sample Distribution
+    "Category A" : 45
+    "Category B" : 30
+    "Category C" : 25
+----
+
+== Examples
+
+=== 01: Simple Distribution
+
+Demonstrates basic pie chart with labeled sections.
+
+**File**: link:01-simple-distribution.mmd[01-simple-distribution.mmd]
+
+[source,mermaid]
+----
+include::01-simple-distribution.mmd[]
+----
+
+image::01-simple-distribution.svg[]
+
+=== 02: Labeled Slices
+
+Showcases detailed pie chart with multiple categories.
+
+**File**: link:02-labeled-slices.mmd[02-labeled-slices.mmd]
+
+[source,mermaid]
+----
+include::02-labeled-slices.mmd[]
+----
+
+image::02-labeled-slices.svg[]
+
+== Features Demonstrated
+
+[%header,cols="1,1"]
+|===
+| Feature | Example
+
+| Basic pie chart
+| 01, 02
+
+| Multiple categories
+| 02
+
+| Proportional visualization
+| 01, 02
+
+| Title display
+| 01, 02
+|===
+
+== Additional Resources
+
+* link:../../README.adoc[Main Documentation]
+* https://mermaid.js.org/syntax/pie.html[Mermaid Pie Chart Documentation]

data/examples/quadrant/01-basic-quadrant.mmd

@@ -0,0 +1,13 @@
+quadrantChart
+    title Product Feature Priority Matrix
+    x-axis Low Effort --> High Effort
+    y-axis Low Impact --> High Impact
+    quadrant-1 Quick Wins
+    quadrant-2 Major Projects
+    quadrant-3 Fill Ins
+    quadrant-4 Hard Slogs
+    "Mobile App": [0.3, 0.8]
+    "API v2": [0.7, 0.9]
+    "Bug Fixes": [0.2, 0.3]
+    "Documentation": [0.4, 0.5]
+    "Refactoring": [0.6, 0.4]

data/examples/quadrant/01-basic-quadrant.svg

@@ -0,0 +1,33 @@
+<svg
+ width="800.0"
+ height="600.0"
+ viewBox="0 0 800 600"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<text fill="#000000" x="400.0" y="30.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="16.0" font-weight="bold">Product Feature Priority Matrix</text>
+<rect fill="#e3f2fd" stroke="#cccccc" stroke-width="1" opacity="0.3" x="400.0" y="80.0" width="320.0" height="220.0"/>
+<rect fill="#fff3e0" stroke="#cccccc" stroke-width="1" opacity="0.3" x="80.0" y="80.0" width="320.0" height="220.0"/>
+<rect fill="#f3e5f5" stroke="#cccccc" stroke-width="1" opacity="0.3" x="80.0" y="300.0" width="320.0" height="220.0"/>
+<rect fill="#e8f5e9" stroke="#cccccc" stroke-width="1" opacity="0.3" x="400.0" y="300.0" width="320.0" height="220.0"/>
+<line stroke="#666666" stroke-width="2" x1="400.0" y1="80.0" x2="400.0" y2="520.0"/>
+<line stroke="#666666" stroke-width="2" x1="80.0" y1="300.0" x2="720.0" y2="300.0"/>
+<text fill="#000000" x="70.0" y="550.0" text-anchor="end" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Low Effort</text>
+<text fill="#000000" x="730.0" y="550.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">High Effort</text>
+<text fill="#000000" x="50.0" y="530.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Low Impact</text>
+<text fill="#000000" x="50.0" y="70.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">High Impact</text>
+<text fill="#000000" opacity="0.7" x="560.0" y="100.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold">Quick Wins</text>
+<text fill="#000000" opacity="0.7" x="240.0" y="100.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold">Major Projects</text>
+<text fill="#000000" opacity="0.7" x="240.0" y="320.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold">Fill Ins</text>
+<text fill="#000000" opacity="0.7" x="560.0" y="320.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold">Hard Slogs</text>
+<circle id="point_0" fill="#6c757d" stroke="#000000" stroke-width="2" cx="272.0" cy="168.0" r="6.0"/>
+<text fill="#000000" x="282.0" y="158.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">"Mobile App"</text>
+<circle id="point_1" fill="#007bff" stroke="#000000" stroke-width="2" cx="528.0" cy="124.0" r="6.0"/>
+<text fill="#000000" x="538.0" y="114.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">"API v2"</text>
+<circle id="point_2" fill="#28a745" stroke="#000000" stroke-width="2" cx="208.0" cy="388.0" r="6.0"/>
+<text fill="#000000" x="218.0" y="378.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">"Bug Fixes"</text>
+<circle id="point_3" fill="#6c757d" stroke="#000000" stroke-width="2" cx="336.0" cy="300.0" r="6.0"/>
+<text fill="#000000" x="346.0" y="290.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">"Documentation"</text>
+<circle id="point_4" fill="#28a745" stroke="#000000" stroke-width="2" cx="464.0" cy="344.0" r="6.0"/>
+<text fill="#000000" x="474.0" y="334.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">"Refactoring"</text>
+</svg>

data/examples/quadrant/02-positioned-items.mmd

@@ -0,0 +1,14 @@
+quadrantChart
+    title Technology Adoption Matrix
+    x-axis Low Complexity --> High Complexity
+    y-axis Low Impact --> High Impact
+    quadrant-1 Invest
+    quadrant-2 Monitor
+    quadrant-3 Evaluate
+    quadrant-4 Migrate
+    AI/ML: [0.8, 0.9]
+    Cloud Native: [0.7, 0.8]
+    Microservices: [0.6, 0.7]
+    Serverless: [0.5, 0.6]
+    Edge Computing: [0.4, 0.5]
+    Blockchain: [0.3, 0.4]

data/examples/quadrant/02-positioned-items.svg

@@ -0,0 +1,35 @@
+<svg
+ width="800.0"
+ height="600.0"
+ viewBox="0 0 800 600"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<text fill="#000000" x="400.0" y="30.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="16.0" font-weight="bold">Technology Adoption Matrix</text>
+<rect fill="#e3f2fd" stroke="#cccccc" stroke-width="1" opacity="0.3" x="400.0" y="80.0" width="320.0" height="220.0"/>
+<rect fill="#fff3e0" stroke="#cccccc" stroke-width="1" opacity="0.3" x="80.0" y="80.0" width="320.0" height="220.0"/>
+<rect fill="#f3e5f5" stroke="#cccccc" stroke-width="1" opacity="0.3" x="80.0" y="300.0" width="320.0" height="220.0"/>
+<rect fill="#e8f5e9" stroke="#cccccc" stroke-width="1" opacity="0.3" x="400.0" y="300.0" width="320.0" height="220.0"/>
+<line stroke="#666666" stroke-width="2" x1="400.0" y1="80.0" x2="400.0" y2="520.0"/>
+<line stroke="#666666" stroke-width="2" x1="80.0" y1="300.0" x2="720.0" y2="300.0"/>
+<text fill="#000000" x="70.0" y="550.0" text-anchor="end" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Low Complexity</text>
+<text fill="#000000" x="730.0" y="550.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">High Complexity</text>
+<text fill="#000000" x="50.0" y="530.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Low Impact</text>
+<text fill="#000000" x="50.0" y="70.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">High Impact</text>
+<text fill="#000000" opacity="0.7" x="560.0" y="100.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold">Invest</text>
+<text fill="#000000" opacity="0.7" x="240.0" y="100.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold">Monitor</text>
+<text fill="#000000" opacity="0.7" x="240.0" y="320.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold">Evaluate</text>
+<text fill="#000000" opacity="0.7" x="560.0" y="320.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold">Migrate</text>
+<circle id="point_0" fill="#007bff" stroke="#000000" stroke-width="2" cx="592.0" cy="124.0" r="6.0"/>
+<text fill="#000000" x="602.0" y="114.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">AI/ML</text>
+<circle id="point_1" fill="#007bff" stroke="#000000" stroke-width="2" cx="528.0" cy="168.0" r="6.0"/>
+<text fill="#000000" x="538.0" y="158.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Cloud Native</text>
+<circle id="point_2" fill="#007bff" stroke="#000000" stroke-width="2" cx="464.0" cy="212.00000000000003" r="6.0"/>
+<text fill="#000000" x="474.0" y="202.00000000000003" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Microservices</text>
+<circle id="point_3" fill="#007bff" stroke="#000000" stroke-width="2" cx="400.0" cy="256.0" r="6.0"/>
+<text fill="#000000" x="410.0" y="246.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Serverless</text>
+<circle id="point_4" fill="#6c757d" stroke="#000000" stroke-width="2" cx="336.0" cy="300.0" r="6.0"/>
+<text fill="#000000" x="346.0" y="290.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Edge Computing</text>
+<circle id="point_5" fill="#28a745" stroke="#000000" stroke-width="2" cx="272.0" cy="344.0" r="6.0"/>
+<text fill="#000000" x="282.0" y="334.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Blockchain</text>
+</svg>

data/examples/quadrant/README.adoc

@@ -0,0 +1,84 @@
+= Quadrant Chart Examples
+
+== Purpose
+
+Quadrant charts visualize data points in a 2D coordinate system divided into four quadrants, useful for categorizing items based on two dimensions.
+
+== When to Use
+
+* Technology adoption analysis (Gartner Magic Quadrant style)
+* Risk assessment matrices
+* Priority matrices (Eisenhower matrix)
+* Portfolio analysis
+* Feature prioritization
+
+== Syntax Overview
+
+[source,mermaid]
+----
+quadrantChart
+    title Adoption Matrix
+    x-axis Low --> High
+    y-axis Low --> High
+    quadrant-1 Invest
+    quadrant-2 Monitor
+    quadrant-3 Divest
+    quadrant-4 Review
+    Item A: [0.3, 0.6]
+    Item B: [0.7, 0.8]
+----
+
+== Examples
+
+=== 01: Basic Quadrant
+
+Demonstrates basic quadrant chart with labeled axes and items.
+
+**File**: link:01-basic-quadrant.mmd[01-basic-quadrant.mmd]
+
+[source,mermaid]
+----
+include::01-basic-quadrant.mmd[]
+----
+
+image::01-basic-quadrant.svg[]
+
+=== 02: Positioned Items
+
+Showcases complex quadrant with many positioned items.
+
+**File**: link:02-positioned-items.mmd[02-positioned-items.mmd]
+
+[source,mermaid]
+----
+include::02-positioned-items.mmd[]
+----
+
+image::02-positioned-items.svg[]
+
+== Features Demonstrated
+
+[%header,cols="1,1"]
+|===
+| Feature | Example
+
+| Basic quadrant layout
+| 01, 02
+
+| Item positioning
+| 01, 02
+
+| Axis labeling
+| 01, 02
+
+| Quadrant naming
+| 01, 02
+
+| Multiple data points
+| 02
+|===
+
+== Additional Resources
+
+* link:../../README.adoc[Main Documentation]
+* https://mermaid.js.org/syntax/quadrantChart.html[Mermaid Quadrant Chart Documentation]

data/examples/radar/01-simple-radar.*

@@ -0,0 +1,5 @@
+radar-beta
+    title Technology Stack Assessment
+    axis Frontend, Backend, Database, DevOps, Testing, Documentation
+    curve Current["Current State"] {85, 75, 90, 70, 80, 65}
+    curve Target["Target State"] {90, 85, 95, 90, 95, 85}

data/examples/radar/01-simple-radar.mmd

@@ -0,0 +1,3 @@
+radar-beta
+    axis A,B,C
+    curve mycurve{1,2,3}

data/examples/radar/01-simple-radar.svg

@@ -0,0 +1,25 @@
+<svg
+ width="560.0"
+ height="560.0"
+ viewBox="0 0 560.0 560.0"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<circle fill="none" stroke="#e5e7eb" stroke-width="1" cx="280.0" cy="280.0" r="40.0"/>
+<circle fill="none" stroke="#e5e7eb" stroke-width="1" cx="280.0" cy="280.0" r="80.0"/>
+<circle fill="none" stroke="#e5e7eb" stroke-width="1" cx="280.0" cy="280.0" r="120.0"/>
+<circle fill="none" stroke="#e5e7eb" stroke-width="1" cx="280.0" cy="280.0" r="160.0"/>
+<circle fill="none" stroke="#e5e7eb" stroke-width="1" cx="280.0" cy="280.0" r="200.0"/>
+<line stroke="#9ca3af" stroke-width="1" x1="280.0" y1="280.0" x2="280.0" y2="80.0"/>
+<line stroke="#9ca3af" stroke-width="1" x1="280.0" y1="280.0" x2="453.20508075688775" y2="380.0"/>
+<line stroke="#9ca3af" stroke-width="1" x1="280.0" y1="280.0" x2="106.79491924311225" y2="380.0"/>
+<polygon fill="#2563eb" fill-opacity="0.3" stroke="#2563eb" stroke-width="2" points="280.0,280.0 366.6025403784439,330.0 106.79491924311225,380.0"/>
+<circle fill="#2563eb" stroke="#ffffff" stroke-width="1" cx="280.0" cy="280.0" r="3.0"/>
+<circle fill="#2563eb" stroke="#ffffff" stroke-width="1" cx="366.6025403784439" cy="330.0" r="3.0"/>
+<circle fill="#2563eb" stroke="#ffffff" stroke-width="1" cx="106.79491924311225" cy="380.0" r="3.0"/>
+<text fill="#000000" x="280.0" y="50.0" text-anchor="end" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold" dominant-baseline="middle">A</text>
+<text fill="#000000" x="479.1858428704209" y="395.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold" dominant-baseline="auto">B</text>
+<text fill="#000000" x="80.81415712957909" y="395.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold" dominant-baseline="hanging">C</text>
+<circle fill="#2563eb" stroke="none" cx="20.0" cy="520.0" r="5.0"/>
+<text fill="#000000" x="35.0" y="524.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">mycurve</text>
+</svg>

data/examples/radar/02-multiple-curves.mmd

@@ -0,0 +1,4 @@
+radar-beta
+    axis A,B,C,D,E,F
+    curve TeamA{80,90,70,85,75,95}
+    curve TeamB{65,75,85,80,90,70}

data/examples/radar/02-multiple-curves.svg

@@ -0,0 +1,43 @@
+<svg
+ width="560.0"
+ height="560.0"
+ viewBox="0 0 560.0 560.0"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<circle fill="none" stroke="#e5e7eb" stroke-width="1" cx="280.0" cy="280.0" r="40.0"/>
+<circle fill="none" stroke="#e5e7eb" stroke-width="1" cx="280.0" cy="280.0" r="80.0"/>
+<circle fill="none" stroke="#e5e7eb" stroke-width="1" cx="280.0" cy="280.0" r="120.0"/>
+<circle fill="none" stroke="#e5e7eb" stroke-width="1" cx="280.0" cy="280.0" r="160.0"/>
+<circle fill="none" stroke="#e5e7eb" stroke-width="1" cx="280.0" cy="280.0" r="200.0"/>
+<line stroke="#9ca3af" stroke-width="1" x1="280.0" y1="280.0" x2="280.0" y2="80.0"/>
+<line stroke="#9ca3af" stroke-width="1" x1="280.0" y1="280.0" x2="453.20508075688775" y2="180.0"/>
+<line stroke="#9ca3af" stroke-width="1" x1="280.0" y1="280.0" x2="453.20508075688775" y2="380.0"/>
+<line stroke="#9ca3af" stroke-width="1" x1="280.0" y1="280.0" x2="280.0" y2="480.0"/>
+<line stroke="#9ca3af" stroke-width="1" x1="280.0" y1="280.0" x2="106.79491924311225" y2="380.0"/>
+<line stroke="#9ca3af" stroke-width="1" x1="280.0" y1="280.0" x2="106.79491924311228" y2="179.99999999999997"/>
+<polygon fill="#2563eb" fill-opacity="0.3" stroke="#2563eb" stroke-width="2" points="280.0,180.0 424.3375672974065,196.66666666666669 308.8675134594813,296.6666666666667 280.0,413.3333333333333 222.26497308103743,313.3333333333333 106.79491924311228,179.99999999999997"/>
+<circle fill="#2563eb" stroke="#ffffff" stroke-width="1" cx="280.0" cy="180.0" r="3.0"/>
+<circle fill="#2563eb" stroke="#ffffff" stroke-width="1" cx="424.3375672974065" cy="196.66666666666669" r="3.0"/>
+<circle fill="#2563eb" stroke="#ffffff" stroke-width="1" cx="308.8675134594813" cy="296.6666666666667" r="3.0"/>
+<circle fill="#2563eb" stroke="#ffffff" stroke-width="1" cx="280.0" cy="413.3333333333333" r="3.0"/>
+<circle fill="#2563eb" stroke="#ffffff" stroke-width="1" cx="222.26497308103743" cy="313.3333333333333" r="3.0"/>
+<circle fill="#2563eb" stroke="#ffffff" stroke-width="1" cx="106.79491924311228" cy="179.99999999999997" r="3.0"/>
+<polygon fill="#7c3aed" fill-opacity="0.3" stroke="#7c3aed" stroke-width="2" points="280.0,280.0 337.7350269189626,246.66666666666669 395.47005383792515,346.66666666666663 280.0,380.0 135.66243270259352,363.3333333333333 251.13248654051873,263.3333333333333"/>
+<circle fill="#7c3aed" stroke="#ffffff" stroke-width="1" cx="280.0" cy="280.0" r="3.0"/>
+<circle fill="#7c3aed" stroke="#ffffff" stroke-width="1" cx="337.7350269189626" cy="246.66666666666669" r="3.0"/>
+<circle fill="#7c3aed" stroke="#ffffff" stroke-width="1" cx="395.47005383792515" cy="346.66666666666663" r="3.0"/>
+<circle fill="#7c3aed" stroke="#ffffff" stroke-width="1" cx="280.0" cy="380.0" r="3.0"/>
+<circle fill="#7c3aed" stroke="#ffffff" stroke-width="1" cx="135.66243270259352" cy="363.3333333333333" r="3.0"/>
+<circle fill="#7c3aed" stroke="#ffffff" stroke-width="1" cx="251.13248654051873" cy="263.3333333333333" r="3.0"/>
+<text fill="#000000" x="280.0" y="50.0" text-anchor="end" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold" dominant-baseline="middle">A</text>
+<text fill="#000000" x="479.1858428704209" y="165.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold" dominant-baseline="auto">B</text>
+<text fill="#000000" x="479.1858428704209" y="395.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold" dominant-baseline="auto">C</text>
+<text fill="#000000" x="280.0" y="510.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold" dominant-baseline="middle">D</text>
+<text fill="#000000" x="80.81415712957909" y="395.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold" dominant-baseline="hanging">E</text>
+<text fill="#000000" x="80.81415712957912" y="164.99999999999997" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" font-weight="bold" dominant-baseline="hanging">F</text>
+<circle fill="#2563eb" stroke="none" cx="20.0" cy="520.0" r="5.0"/>
+<text fill="#000000" x="35.0" y="524.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">TeamA</text>
+<circle fill="#7c3aed" stroke="none" cx="20.0" cy="540.0" r="5.0"/>
+<text fill="#000000" x="35.0" y="544.0" text-anchor="start" font-family="Arial, Helvetica, sans-serif" font-size="12.0">TeamB</text>
+</svg>

data/examples/radar/README.adoc

@@ -0,0 +1,75 @@
+= Radar Chart Examples
+
+== Purpose
+
+Radar charts display multivariate data on axes starting from the same point, ideal for comparing multiple variables across different items.
+
+== When to Use
+
+* Skills assessment visualization
+* Performance comparison
+* Product feature analysis
+* Multi-dimensional data comparison
+* Capability matrixing
+
+== Syntax Overview
+
+[source,mermaid]
+----
+radar-beta
+    axis Skill1,Skill2,Skill3
+    curve TeamA{80,90,70}
+    curve TeamB{60,85,75}
+----
+
+== Examples
+
+=== 01: Simple Radar
+
+Demonstrates basic radar chart with one data series.
+
+**File**: link:01-simple-radar.mmd[01-simple-radar.mmd]
+
+[source,mermaid]
+----
+include::01-simple-radar.mmd[]
+----
+
+image::01-simple-radar.svg[]
+
+=== 02: Multiple Curves
+
+Showcases comparison of multiple datasets on radar chart.
+
+**File**: link:02-multiple-curves.mmd[02-multiple-curves.mmd]
+
+[source,mermaid]
+----
+include::02-multiple-curves.mmd[]
+----
+
+image::02-multiple-curves.svg[]
+
+== Features Demonstrated
+
+[%header,cols="1,1"]
+|===
+| Feature | Example
+
+| Axis definition
+| 01, 02
+
+| Single curve
+| 01
+
+| Multiple curves
+| 02
+
+| Data comparison
+| 02
+|===
+
+== Additional Resources
+
+* link:../../README.adoc[Main Documentation]
+* https://mermaid.js.org/syntax/radar.html[Mermaid Radar Documentation]

data/examples/requirement/01-basic-requirements.mmd

@@ -0,0 +1,23 @@
+requirementDiagram
+
+    requirement login {
+        id: 1
+        text: Users must be able to login
+        risk: high
+        verifymethod: test
+    }
+
+    requirement security {
+        id: 2
+        text: All data must be encrypted
+        risk: high
+        verifymethod: inspection
+    }
+
+    element webapp {
+        type: application
+        docref: /docs/webapp
+    }
+
+    login - satisfies -> webapp
+    security - verifies -> webapp

data/examples/requirement/01-basic-requirements.svg

@@ -0,0 +1,49 @@
+<svg
+ width="600.0"
+ height="440.0"
+ viewBox="0 0 600 440"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<g id="relationship-login-webapp">
+  <path fill="none" stroke="#666" stroke-width="2" d="M 110 340 C 110 446, 95 -86, 95 20" marker-end="url(#arrowhead)"/>
+  <rect fill="#fff" stroke="#666" stroke-width="1" x="71.0" y="170.0" width="63.0" height="18.0" rx="3.0"/>
+  <text fill="#000" x="102.0" y="180.0" text-anchor="middle" font-size="10" dominant-baseline="middle">satisfies</text>
+</g>
+<g id="relationship-security-webapp">
+  <path fill="none" stroke="#666" stroke-width="2" d="M 390 340 C 390 446, 95 -86, 95 20" marker-end="url(#arrowhead)"/>
+  <rect fill="#fff" stroke="#666" stroke-width="1" x="214.0" y="170.0" width="56.0" height="18.0" rx="3.0"/>
+  <text fill="#000" x="242.0" y="180.0" text-anchor="middle" font-size="10" dominant-baseline="middle">verifies</text>
+</g>
+<g id="requirement-login">
+  <rect fill="#ffffff" stroke="#ff6b6b" stroke-width="2" x="20.0" y="180.0" width="180.0" height="160.0" rx="5.0" ry="5.0"/>
+  <g>
+  <rect fill="#ff6b6b" opacity="0.3" x="20.0" y="180.0" width="180.0" height="30.0"/>
+  <text fill="#000" x="30.0" y="195.0" font-size="12" font-weight="bold" dominant-baseline="middle">Requirement</text>
+  <text fill="#000" x="190.0" y="195.0" text-anchor="end" font-size="11" dominant-baseline="middle">login</text>
+</g>
+  <text fill="#000" x="30.0" y="225.0" font-size="12">ID: 1</text>
+  <text fill="#000" x="30.0" y="241.0" font-size="12">Users must be able to</text>
+  <text fill="#000" x="30.0" y="257.0" font-size="12">login</text>
+  <text fill="#ff6b6b" x="30.0" y="278.0" font-size="12" font-weight="bold">Risk: High</text>
+  <text fill="#000" x="30.0" y="294.0" font-size="12">Verify: Test</text>
+</g>
+<g id="requirement-security">
+  <rect fill="#ffffff" stroke="#ff6b6b" stroke-width="2" x="300.0" y="180.0" width="180.0" height="160.0" rx="5.0" ry="5.0"/>
+  <g>
+  <rect fill="#ff6b6b" opacity="0.3" x="300.0" y="180.0" width="180.0" height="30.0"/>
+  <text fill="#000" x="310.0" y="195.0" font-size="12" font-weight="bold" dominant-baseline="middle">Requirement</text>
+  <text fill="#000" x="470.0" y="195.0" text-anchor="end" font-size="11" dominant-baseline="middle">security</text>
+</g>
+  <text fill="#000" x="310.0" y="225.0" font-size="12">ID: 2</text>
+  <text fill="#000" x="310.0" y="241.0" font-size="12">All data must be</text>
+  <text fill="#000" x="310.0" y="257.0" font-size="12">encrypted</text>
+  <text fill="#ff6b6b" x="310.0" y="278.0" font-size="12" font-weight="bold">Risk: High</text>
+  <text fill="#000" x="310.0" y="294.0" font-size="12">Verify: Inspection</text>
+</g>
+<g id="element-webapp">
+  <polygon fill="#ffffff" stroke="#00796b" stroke-width="2" points="20,60 58,20 132,20 170,60 132,100 58,100"/>
+  <text fill="#000" x="95.0" y="50.0" text-anchor="middle" font-size="14" font-weight="bold" dominant-baseline="middle">webapp</text>
+  <text fill="#666" x="95.0" y="70.0" text-anchor="middle" font-size="11" dominant-baseline="middle">Type: application</text>
+</g>
+</svg>

data/examples/requirement/02-risk-levels.mmd

@@ -0,0 +1,23 @@
+requirementDiagram
+
+    requirement login {
+        id: 1
+        text: Users must be able to login
+        risk: high
+        verifymethod: test
+    }
+
+    requirement security {
+        id: 2
+        text: All data must be encrypted
+        risk: high
+        verifymethod: inspection
+    }
+
+    element webapp {
+        type: application
+        docref: /docs/webapp
+    }
+
+    login - satisfies -> webapp
+    security - verifies -> webapp

data/examples/requirement/02-risk-levels.svg

@@ -0,0 +1,49 @@
+<svg
+ width="600.0"
+ height="440.0"
+ viewBox="0 0 600 440"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<g id="relationship-login-webapp">
+  <path fill="none" stroke="#666" stroke-width="2" d="M 110 340 C 110 446, 95 -86, 95 20" marker-end="url(#arrowhead)"/>
+  <rect fill="#fff" stroke="#666" stroke-width="1" x="71.0" y="170.0" width="63.0" height="18.0" rx="3.0"/>
+  <text fill="#000" x="102.0" y="180.0" text-anchor="middle" font-size="10" dominant-baseline="middle">satisfies</text>
+</g>
+<g id="relationship-security-webapp">
+  <path fill="none" stroke="#666" stroke-width="2" d="M 390 340 C 390 446, 95 -86, 95 20" marker-end="url(#arrowhead)"/>
+  <rect fill="#fff" stroke="#666" stroke-width="1" x="214.0" y="170.0" width="56.0" height="18.0" rx="3.0"/>
+  <text fill="#000" x="242.0" y="180.0" text-anchor="middle" font-size="10" dominant-baseline="middle">verifies</text>
+</g>
+<g id="requirement-login">
+  <rect fill="#ffffff" stroke="#ff6b6b" stroke-width="2" x="20.0" y="180.0" width="180.0" height="160.0" rx="5.0" ry="5.0"/>
+  <g>
+  <rect fill="#ff6b6b" opacity="0.3" x="20.0" y="180.0" width="180.0" height="30.0"/>
+  <text fill="#000" x="30.0" y="195.0" font-size="12" font-weight="bold" dominant-baseline="middle">Requirement</text>
+  <text fill="#000" x="190.0" y="195.0" text-anchor="end" font-size="11" dominant-baseline="middle">login</text>
+</g>
+  <text fill="#000" x="30.0" y="225.0" font-size="12">ID: 1</text>
+  <text fill="#000" x="30.0" y="241.0" font-size="12">Users must be able to</text>
+  <text fill="#000" x="30.0" y="257.0" font-size="12">login</text>
+  <text fill="#ff6b6b" x="30.0" y="278.0" font-size="12" font-weight="bold">Risk: High</text>
+  <text fill="#000" x="30.0" y="294.0" font-size="12">Verify: Test</text>
+</g>
+<g id="requirement-security">
+  <rect fill="#ffffff" stroke="#ff6b6b" stroke-width="2" x="300.0" y="180.0" width="180.0" height="160.0" rx="5.0" ry="5.0"/>
+  <g>
+  <rect fill="#ff6b6b" opacity="0.3" x="300.0" y="180.0" width="180.0" height="30.0"/>
+  <text fill="#000" x="310.0" y="195.0" font-size="12" font-weight="bold" dominant-baseline="middle">Requirement</text>
+  <text fill="#000" x="470.0" y="195.0" text-anchor="end" font-size="11" dominant-baseline="middle">security</text>
+</g>
+  <text fill="#000" x="310.0" y="225.0" font-size="12">ID: 2</text>
+  <text fill="#000" x="310.0" y="241.0" font-size="12">All data must be</text>
+  <text fill="#000" x="310.0" y="257.0" font-size="12">encrypted</text>
+  <text fill="#ff6b6b" x="310.0" y="278.0" font-size="12" font-weight="bold">Risk: High</text>
+  <text fill="#000" x="310.0" y="294.0" font-size="12">Verify: Inspection</text>
+</g>
+<g id="element-webapp">
+  <polygon fill="#ffffff" stroke="#00796b" stroke-width="2" points="20,60 58,20 132,20 170,60 132,100 58,100"/>
+  <text fill="#000" x="95.0" y="50.0" text-anchor="middle" font-size="14" font-weight="bold" dominant-baseline="middle">webapp</text>
+  <text fill="#666" x="95.0" y="70.0" text-anchor="middle" font-size="11" dominant-baseline="middle">Type: application</text>
+</g>
+</svg>