[#53] Add section for reference frame

tutorials/images/plantuml/OriginalSequenceDiagram.puml

@@ -0,0 +1,24 @@
+@startuml
+
+hide footbox
+skinparam sequenceReferenceBackgroundColor #f7807c
+
+actor Player
+
+participant ":TextUi" as TextUi #EE82EE
+participant ":MSLogic" as MSLogic #90EE90
+
+Player -> TextUi : mark x y
+TextUi -> MSLogic : markCellAt(x, y)
+return
+
+'This sequence can be abstracted into a reference frame for simplicity
+TextUi -> MSLogic : getAppearanceOfCellAt(x, y)
+MSLogic -> TextUi : getConfig()
+TextUi --> MSLogic : config
+MSLogic --> TextUi : cellAppearance
+'---
+
+TextUi --> Player : Show updated minefield
+
+@enduml

tutorials/images/plantuml/ParentReferenceFrameDiagram.puml

@@ -0,0 +1,21 @@
+@startuml
+
+hide footbox
+skinparam sequenceReferenceBackgroundColor #f7807c
+
+actor Player
+
+participant ":TextUi" as TextUi #EE82EE
+participant ":MSLogic" as MSLogic #90EE90
+
+Player -> TextUi : mark x y
+TextUi -> MSLogic : markCellAt(x, y)
+return
+
+ref over TextUi, MSLogic
+    get minefield appearance
+end ref
+
+TextUi --> Player : Show updated minefield
+
+@enduml

tutorials/images/plantuml/ReferenceFrameDiagram.puml

@@ -0,0 +1,16 @@
+@startuml
+
+hide footbox
+
+participant ":TextUi" as TextUi #EE82EE
+participant ":MSLogic" as MSLogic #90EE90
+
+group sd get minefield appearance
+    'Contents of reference frame
+    TextUi -> MSLogic : getAppearanceOfCellAt(x, y)
+    MSLogic -> TextUi : getConfig()
+    TextUi --> MSLogic : config
+    MSLogic --> TextUi : cellAppearance
+end
+
+@enduml

tutorials/plantUml.md

@@ -278,3 +278,17 @@ package "Rule Of Thumb";{
 
 Explicitly define all symbols to avoid any potential layout mishaps.
 </box>
+
+### Using reference frames
+
+Reference frames in PlantUML sequence diagrams allow you to **group and reuse sequences** of interactions, which helps improve readability and reduce repetition in complex scenarios. By encapsulating sequences into reference frames, you can also **reduce complexity**, making it easier to manage and understand the overall flow of interactions within your diagrams.
+
+Refer to the following example:
+<puml src="images/plantuml/OriginalSequenceDiagram.puml" width=500 />
+
+The sequence diagram illustrates two main actions: marking a cell and retrieving its appearance. We can simplify the diagram by moving the latter into a new reference frame.
+
+| Source                                                                                                                                                                                                                                                                                                                                              | Result                                                                    |
+|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------|
+| **Replacing** <br><br> <pre>TextUi -> MSLogic : getAppearanceOfCellAt(x, y)<br>MSLogic -> TextUi : getConfig()<br>TextUi --> MSLogic : config<br>MSLogic --> TextUi : cellAppearance</pre> **with** <br><br> <pre>ref over MSLogic, TextUi : get minefield appearance</pre>                                                                         | <puml src="images/plantuml/ParentReferenceFrameDiagram.puml" width=300 /> |
+| <pre>group sd get minefield appearance<br>&emsp;&emsp;'Contents of reference frame <br>&emsp;&emsp;TextUi -> MSLogic : getAppearanceOfCellAt(x, y) <br>&emsp;&emsp;MSLogic -> TextUi : getConfig() <br>&emsp;&emsp;TextUi --> MSLogic : config <br>&emsp;&emsp;MSLogic --> TextUi : cellAppearance <br>&emsp;&emsp;deactivate MSLogic <br>end</pre> | <puml src="images/plantuml/ReferenceFrameDiagram.puml" width=300 />       |