TOWARDS MATURITY
learning MermaidJS of today!

on

Iterative Spiral Development Process

Preliminary Data Preliminary Model Testing Evaluation Refinement / Improvement MATURE

Process: Preliminary Data → Preliminary Model → Testing → Evaluation → Refinement → Repeat Iteration (Spiral) → Mature System

++Learning How to Code Diagram of Today!!

<div style="text-align:center;margin:20px 0;">

<h3>Iterative Spiral Development Process</h3>

<svg width="600" height="420" viewBox="0 0 600 420">

<!-- Spiral Path -->
<path d="M300 210
         m0 -20
         a20 20 0 1 1 -1 0
         m0 -20
         a40 40 0 1 0 1 0
         m0 -20
         a60 60 0 1 1 -1 0
         m0 -20
         a80 80 0 1 0 1 0
         m0 -20
         a100 100 0 1 1 -1 0"
      fill="none"
      stroke="#555"
      stroke-width="2"/>

<!-- Boxes -->

<rect x="250" y="180" width="100" height="40" rx="6" fill="#e3f2fd"/>
<text x="300" y="205" font-size="12" text-anchor="middle">Preliminary Data</text>

<rect x="390" y="180" width="120" height="40" rx="6" fill="#e8f5e9"/>
<text x="450" y="205" font-size="12" text-anchor="middle">Preliminary Model</text>

<rect x="240" y="60" width="120" height="40" rx="6" fill="#fff3e0"/>
<text x="300" y="85" font-size="12" text-anchor="middle">Testing</text>

<rect x="70" y="180" width="130" height="40" rx="6" fill="#f3e5f5"/>
<text x="135" y="205" font-size="12" text-anchor="middle">Evaluation</text>

<rect x="220" y="320" width="160" height="40" rx="6" fill="#e1f5fe"/>
<text x="300" y="345" font-size="12" text-anchor="middle">Refinement / Improvement</text>

<rect x="460" y="305" width="120" height="60" rx="6" fill="#dcedc8"/>
<text x="520" y="345" font-size="24" text-anchor="middle">MATURE</text>

<!-- Arrows -->

<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="6" refY="3"
 orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#444"/>
</marker>
</defs>

<line x1="350" y1="200" x2="390" y2="200" stroke="#444" stroke-width="2" marker-end="url(#arrow)"/>
<line x1="450" y1="180" x2="320" y2="100" stroke="#444" stroke-width="2" marker-end="url(#arrow)"/>
<line x1="240" y1="80" x2="140" y2="180" stroke="#444" stroke-width="2" marker-end="url(#arrow)"/>
<line x1="135" y1="220" x2="250" y2="320" stroke="#444" stroke-width="2" marker-end="url(#arrow)"/>
<line x1="380" y1="340" x2="455" y2="340" stroke="#444" stroke-width="2" marker-end="url(#arrow)"/>

</svg>

<p style="font-size:13px;">
Process: Preliminary Data → Preliminary Model → Testing → Evaluation → Refinement → Repeat Iteration (Spiral) → Mature System
</p>

</div>
REPEATED PATTERN

Repeated SVG Pattern Map

Repeated Pattern Type SVG Code Pattern Occurs Multiple Times For
Stage Box Pattern 
<rect x="[X]" y="[Y]"

      width="[W]" height="[H]"

      rx="[corner]"

      fill="[color]" />

<text x="[CENTER-X]"

      y="[CENTER-Y]"

      font-size="[size]"

      text-anchor="middle">

      [Stage Name]

</text>
Used for every process stage such as:
  • Preliminary Data
  • Preliminary Model
  • Testing
  • Evaluation
  • Refinement
  • Mature System
Connection Arrow Pattern 
<line x1="[start-x]" y1="[start-y]"

      x2="[end-x]" y2="[end-y]"

      stroke="[color]"

      stroke-width="[size]"

      marker-end="url(#arrow)" />
Used for every directional flow between stages in the process diagram.
Stage Label Pattern 
<text x="[center-x]"

      y="[center-y]"

      text-anchor="middle">

      [Stage Name]

</text>
Repeated for labeling each stage box inside the diagram.

Variable Usage Table for SVG Diagram Elements

1. Stage Boxes

Stage X Y Width (W) Height (H) Corner Radius (R) Color
Preliminary Data 260 180 110 40 6 #e3f2fd
Preliminary Model 400 180 130 40 6 #e8f5e9
Testing 250 60 120 40 6 #fff3e0
Evaluation 70 180 130 40 6 #f3e5f5
Refinement / Improvement 230 320 150 40 6 #e1f5fe
Mature System 440 310 160 50 6 #dcedc8

2. Stage Labels

Stage TX TY Font Size Label
Preliminary Data 315 205 12 Preliminary Data
Preliminary Model 465 205 12 Preliminary Model
Testing 310 85 12 Testing
Evaluation 135 205 12 Evaluation
Refinement / Improvement 305 345 12 Refinement / Improvement
Mature System 520 340 13 Mature System

3. Connection Arrows

From To X1 Y1 X2 Y2 Stroke Width
Preliminary Data Preliminary Model 370 200 400 200 #444 2
Preliminary Model Testing 465 180 330 100 #444 2
Testing Evaluation 250 80 150 180 #444 2
Evaluation Refinement 135 220 250 320 #444 2
Refinement Mature System 380 340 440 335 #444 2

Comments

Post a Comment