Add background

content/acknowledgement.typ

@@ -1,7 +1 @@
-First, I'd like to thank coffee for fueling my brain cells and making this thesis possible.
-
-A big shoutout to my advisor for your patience and for not laughing (too hard) at my wild ideas.
-
-To my family, your snack supplies and constant reminders to "just finish it already" were invaluable.
-
-Finally, to my pet, your keyboard sit-ins ensured I took breaks, whether I wanted to or not.
+I would like to thank my family and girlfriend for their constant support and encouragement throughout this journey.

content/background.typ

@@ -1,26 +1,17 @@
 #import "/utils/todo.typ": TODO
 
 = Background
-#TODO[
-  Describe each proven technology / concept shortly that is important to understand your thesis. Point out why it is interesting for your thesis. Make sure to incorporate references to important literature here.
-]
 
-== Unified Modeling Language (UML)
-#TODO[
-  This section would summarize the concept UML using definitions, historical overviews and pointing out the most important aspects of UML.
-]
+== GitHub Issues and Pull Requests
+GitHub users can create issues in their repositories to plan, dicuss and track work. Issues can track bug reports, new features and ideas, and anything else a user needs to write down or discuss with their team #footnote[https://docs.github.com/en/issues/tracking-your-work-with-issues/about-issues].
 
-== Apollon
-#TODO[
-  This section would summarize Apollon using definitions, historical overviews and pointing out the most important aspects of Apollon.
-]
+A pull request is a proposal to merge a set of changes from one branch into another. In a pull request, collaborators can review and discuss the proposed set of changes before they integrate the changes into the main codebase. Pull requests display the differences, or diffs, between the content in the source branch and the content in the target branch #footnote[https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests].
 
-== GitHub Issues and Pull Requests
-#TODO[
-  This section would summarize Apollon using definitions, historical overviews and pointing out the most important aspects of Apollon.
-]
+Issues and pull requests are concepts that are present in other prominent Git hosting services too, under the same or similar names. For example, GitLab provides issues and merge requests #footnote[https://docs.gitlab.com/ee/user/project/issues/] #footnote[https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html].
+
+The embedding feature, which this thesis proposes, aims to enhance the user's capability of embedding their diagrams in GitHub issues and pull requests by simply pasting text.
 
 == VSCode Extensions
-#TODO[
-  This section would summarize Apollon using definitions, historical overviews and pointing out the most important aspects of Apollon.
-]
+VSCode is a popular and versatile IDE that offers support for a variety of programming languages. A key feature of VSCode are extensions, which change the look of the IDE, add custom components and views, create webviews to display a custom webpage and support a new programming language #footnote[https://code.visualstudio.com/api]. These extensions can be made by anyone, and made public through the VSCode Extension Marketplace.
+
+In order to provide an IDE integration of Apollon, we are going to create an Apollon VSCode extension.

content/evaluation.typ

@@ -1,36 +1,36 @@
-#import "/utils/todo.typ": TODO
+// #import "/utils/todo.typ": TODO
 
-= Case Study / Evaluation
-#TODO[
-  If you did an evaluation / case study, describe it here.
-]
+// = Case Study / Evaluation
+// #TODO[
+//   If you did an evaluation / case study, describe it here.
+// ]
 
-== Design 
-#TODO[
-  Describe the design / methodology of the evaluation and why you did it like that. e.g. what kind of evaluation have you done (e.g. questionnaire, personal interviews, simulation, quantitative analysis of metrics), what kind of participants, what kind of questions, what was the procedure?
-]
+// == Design 
+// #TODO[
+//   Describe the design / methodology of the evaluation and why you did it like that. e.g. what kind of evaluation have you done (e.g. questionnaire, personal interviews, simulation, quantitative analysis of metrics), what kind of participants, what kind of questions, what was the procedure?
+// ]
 
-== Objectives
-#TODO[
-  Derive concrete objectives / hypotheses for this evaluation from the general ones in the introduction.
-]
+// == Objectives
+// #TODO[
+//   Derive concrete objectives / hypotheses for this evaluation from the general ones in the introduction.
+// ]
 
-== Results
-#TODO[
-  Summarize the most interesting results of your evaluation (without interpretation). Additional results can be put into the appendix.
-]
+// == Results
+// #TODO[
+//   Summarize the most interesting results of your evaluation (without interpretation). Additional results can be put into the appendix.
+// ]
 
-== Findings
-#TODO[
-  Interpret the results and conclude interesting findings
-]
+// == Findings
+// #TODO[
+//   Interpret the results and conclude interesting findings
+// ]
 
-== Discussion
-#TODO[
-  Discuss the findings in more detail and also review possible disadvantages that you found
-]
+// == Discussion
+// #TODO[
+//   Discuss the findings in more detail and also review possible disadvantages that you found
+// ]
 
-== Limitations
-#TODO[
-  Describe limitations and threats to validity of your evaluation, e.g. reliability, generalizability, selection bias, researcher bias
-]
+// == Limitations
+// #TODO[
+//   Describe limitations and threats to validity of your evaluation, e.g. reliability, generalizability, selection bias, researcher bias
+// ]

content/related_work.typ

@@ -3,21 +3,29 @@
 = Related Work
 A variety of tools is available in the domain of UML modeling. Some are modeling editors such as Apollon, but there are also markup languages for drafting diagrams such as PlantUML #footnote[https://plantuml.com/]. This chapter compares such tools with Apollon and elaborates why it is nevertheless worth improving Apollon. Before diving into specific differences, it is worth noting that none of these tools support a Git integration of embedding diagrams with live updates that this thesis aims to implement.
 
+\
+
 #par(first-line-indent: 0em)[*Mermaid*]
 #par(first-line-indent: 0em)[
   Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams #footnote[https://mermaid.js.org/]. GitHub supports the integration of Mermaid in markdown files, so that Mermaid diagrams can be embedded in GitHub issues and pull requests #footnote[https://github.blog/developer-skills/github/include-diagrams-markdown-files-mermaid/]. However, Mermaid does not provide a visual modeling editor like Apollon, which limits the user.
 ]
 
+\
+
 #par(first-line-indent: 0em)[*PlantUML*]
 #par(first-line-indent: 0em)[
   GitLab supports the integration of PlantUML #footnote[https://docs.gitlab.com/ee/administration/integration/plantuml.html]. Just like Mermaid, PlantUML does not provide a visual modeling editor. Furthermore, the GitLab integration requires the user to configure their own PlantUML server, which introduces additional friction.
 ]
 
+\
+
 #par(first-line-indent: 0em)[*draw.io*]
 #par(first-line-indent: 0em)[
   draw.io is a JavaScript, client-side editor for general diagramming #footnote[https://github.com/jgraph/drawio]. It is free and can be used in the browser just like Apollon. On the contrary, it does not support certain UML diagram types that are supported by Apollon, such as the Deployment, Component and Use Case diagrams. draw.io also does not offer a collaboration feature such as Apollon.
 ]
 
+\
+
 #par(first-line-indent: 0em)[*StarUML*]
 #par(first-line-indent: 0em)[
   StarUML is another diagram modeling editor #footnote[https://docs.staruml.io/]. Like Apollon, it is specfiically tailored for UML diagrams, but supports a greater variety of diagrams and provides more features. The disadvantages of StarUML are that it is not free to use and can not be used in the browser.

presentation/docs-integration/docs-integration.drawio

@@ -0,0 +1,82 @@
+<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36" version="25.0.3">
+  <diagram name="Page-1" id="e7e014a7-5840-1c2e-5031-d8a46d1fe8dd">
+    <mxGraphModel dx="1490" dy="908" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="100" pageHeight="200" background="none" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-94" value="" style="group" parent="1" vertex="1" connectable="0">
+          <mxGeometry x="120" y="70" width="1170" height="190" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-46" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="eOAKwcTZS99YKjh42Vy_-94" source="eOAKwcTZS99YKjh42Vy_-41" target="eOAKwcTZS99YKjh42Vy_-43" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-41" value="" style="ellipse;shape=startState;fillColor=#FFFFFF;strokeColor=default;" parent="eOAKwcTZS99YKjh42Vy_-94" vertex="1">
+          <mxGeometry x="141.2" y="48.097457627118644" width="41.927710843373504" height="44.389830508474574" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-83" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="eOAKwcTZS99YKjh42Vy_-94" source="eOAKwcTZS99YKjh42Vy_-42" target="eOAKwcTZS99YKjh42Vy_-45" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-42" value="Diagram preview&#xa;opened in IDE" style="fontSize=15;" parent="eOAKwcTZS99YKjh42Vy_-94" vertex="1">
+          <mxGeometry x="503.12481927710854" y="37" width="195.66265060240968" height="66.58474576271186" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-48" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="eOAKwcTZS99YKjh42Vy_-94" source="eOAKwcTZS99YKjh42Vy_-43" target="eOAKwcTZS99YKjh42Vy_-42" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-43" value="&lt;span style=&quot;font-size: 15px;&quot;&gt;Open diagram&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;font-size: 15px;&quot;&gt;in IDE&lt;/span&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="eOAKwcTZS99YKjh42Vy_-94" vertex="1">
+          <mxGeometry x="243.12084337349398" y="40.699152542372886" width="167.71084337349401" height="59.186440677966104" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-45" value="User wants to &#xa;modify diagram?" style="rhombus;fillColor=#FFFFFF;strokeColor=#000000;fontSize=15;" parent="eOAKwcTZS99YKjh42Vy_-94" vertex="1">
+          <mxGeometry x="791.2006024096388" y="37" width="237.5903614457832" height="66.58474576271186" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-44" value="" style="ellipse;shape=endState;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" vertex="1">
+          <mxGeometry x="1016.2022891566266" y="438.0936319612591" width="41.927710843373504" height="44.389830508474574" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-88" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="eOAKwcTZS99YKjh42Vy_-55" target="eOAKwcTZS99YKjh42Vy_-78" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-55" value="New diagram" style="fontSize=15;" parent="1" vertex="1">
+          <mxGeometry x="621.8048192771084" y="283.29808716707026" width="195.66265060240968" height="66.58474576271186" as="geometry" />
+        </mxCell>
+        <mxCell id="BfHZy3_pJj_lQgQOA6na-7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="eOAKwcTZS99YKjh42Vy_-78" target="eOAKwcTZS99YKjh42Vy_-89">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-78" value="&lt;span style=&quot;font-size: 15px;&quot;&gt;User generates SVG&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;font-size: 15px;&quot;&gt;with extension&lt;/span&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="303.7303614457831" y="287.0072397094431" width="167.71084337349401" height="59.186440677966104" as="geometry" />
+        </mxCell>
+        <mxCell id="BfHZy3_pJj_lQgQOA6na-8" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="eOAKwcTZS99YKjh42Vy_-89" target="eOAKwcTZS99YKjh42Vy_-91">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-89" value="SVG of diagram for&#xa;embedding" style="fontSize=15;" parent="1" vertex="1">
+          <mxGeometry x="289.7548192771085" y="426.99808716707025" width="195.66265060240968" height="66.58474576271186" as="geometry" />
+        </mxCell>
+        <mxCell id="BfHZy3_pJj_lQgQOA6na-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="eOAKwcTZS99YKjh42Vy_-91">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="1011.2" y="460.66666666666674" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-91" value="&lt;span style=&quot;font-size: 15px;&quot;&gt;User embeds diagram&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;font-size: 15px;&quot;&gt;in documentation&lt;/span&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="635.7803614457832" y="430.6972397094431" width="167.71084337349401" height="59.186440677966104" as="geometry" />
+        </mxCell>
+        <mxCell id="BfHZy3_pJj_lQgQOA6na-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="eOAKwcTZS99YKjh42Vy_-53" target="eOAKwcTZS99YKjh42Vy_-55">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="871.2" y="377" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-53" value="&lt;span style=&quot;font-size: 15px;&quot;&gt;User makes changes&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;font-size: 15px;&quot;&gt;to the diagram&lt;/span&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="941.2" y="287" width="172.65" height="59.19" as="geometry" />
+        </mxCell>
+        <mxCell id="eOAKwcTZS99YKjh42Vy_-84" value="yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=15;" parent="1" source="eOAKwcTZS99YKjh42Vy_-45" target="eOAKwcTZS99YKjh42Vy_-53" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="BfHZy3_pJj_lQgQOA6na-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="eOAKwcTZS99YKjh42Vy_-45" target="eOAKwcTZS99YKjh42Vy_-78">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="BfHZy3_pJj_lQgQOA6na-5" value="&lt;font style=&quot;font-size: 15px;&quot;&gt;no&lt;/font&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="BfHZy3_pJj_lQgQOA6na-4">
+          <mxGeometry x="-0.3348" y="1" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>