diff --git a/docs/images/docs/architecture.drawio b/docs/images/docs/architecture.drawio
new file mode 100644
index 0000000..2f8f71e
--- /dev/null
+++ b/docs/images/docs/architecture.drawio
@@ -0,0 +1,138 @@
+<mxfile host="65bd71144e">
+    <diagram id="meJA_rg5n3EOEVvTAqwo" name="Page-1">
+        <mxGraphModel dx="1679" dy="836" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" background="#4D4D4D" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="41" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fillColor=#f9f7ed;strokeColor=#FFFFFF;fontColor=#FFFFFF;" edge="1" parent="1" source="5" target="38">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="42" value="1. force push" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];labelBackgroundColor=none;fontColor=#FFFFFF;" vertex="1" connectable="0" parent="41">
+                    <mxGeometry x="-0.3753" y="2" relative="1" as="geometry">
+                        <mxPoint x="10" y="12" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="44" value="2. gh-pages deploy from branch" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;jumpStyle=none;fillColor=#f9f7ed;strokeColor=#FFFFFF;fontColor=#FFFFFF;labelBackgroundColor=none;" edge="1" parent="1" source="5" target="43">
+                    <mxGeometry x="0.3208" y="-15" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="5" value="vuepress-build&lt;br&gt;Workflow" style="rhombus;whiteSpace=wrap;html=1;fillColor=#a0522d;fontColor=#ffffff;strokeColor=#6D1F00;" vertex="1" parent="1">
+                    <mxGeometry x="760" y="41" width="160" height="119" as="geometry"/>
+                </mxCell>
+                <mxCell id="21" value="open PR" style="edgeStyle=none;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;movable=1;resizable=1;rotatable=1;deletable=1;editable=1;connectable=1;fillColor=#f9f7ed;strokeColor=#FFFFFF;fontColor=#FFFFFF;labelBackgroundColor=none;" edge="1" parent="1" target="17">
+                    <mxGeometry x="0.0127" y="-13" relative="1" as="geometry">
+                        <mxPoint x="200" y="100" as="sourcePoint"/>
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="12" value="PR branch" style="swimlane;whiteSpace=wrap;html=1;fillColor=#1ba1e2;fontColor=#ffffff;strokeColor=#006EAF;" vertex="1" parent="1">
+                    <mxGeometry x="40" y="40" width="160" height="113" as="geometry"/>
+                </mxCell>
+                <mxCell id="14" value="Commit #1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#647687;fontColor=#ffffff;strokeColor=#314354;" vertex="1" parent="12">
+                    <mxGeometry y="83" width="160" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="15" value="Commit #2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#647687;fontColor=#ffffff;strokeColor=#314354;" vertex="1" parent="12">
+                    <mxGeometry y="53" width="160" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="16" value="Commit #3&lt;br&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#647687;fontColor=#ffffff;strokeColor=#314354;" vertex="1" parent="12">
+                    <mxGeometry y="23" width="160" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="34" value="merge" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.404;entryDx=0;entryDy=0;entryPerimeter=0;fillColor=#f9f7ed;strokeColor=#FFFFFF;fontColor=#FFFFFF;labelBackgroundColor=none;" edge="1" parent="1" source="17" target="32">
+                    <mxGeometry x="0.0005" y="-13" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="17" value="Pullrequest-Review&lt;br&gt;Workflow" style="rhombus;whiteSpace=wrap;html=1;fillColor=#a0522d;fontColor=#ffffff;strokeColor=#6D1F00;" vertex="1" parent="1">
+                    <mxGeometry x="279" y="40" width="160" height="120" as="geometry"/>
+                </mxCell>
+                <mxCell id="26" value="review" style="edgeStyle=none;html=1;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fillColor=#f9f7ed;strokeColor=#FFFFFF;fontColor=#FFFFFF;labelBackgroundColor=none;" edge="1" parent="1" target="17">
+                    <mxGeometry x="0.0137" relative="1" as="geometry">
+                        <mxPoint x="359.412429378531" y="230" as="sourcePoint"/>
+                        <mxPoint x="360" y="170" as="targetPoint"/>
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="23" value="Reviewer" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;outlineConnect=0;fillColor=#eeeeee;strokeColor=#FFFFFF;fontColor=#FFFFFF;" vertex="1" parent="1">
+                    <mxGeometry x="352" y="230" width="15" height="31" as="geometry"/>
+                </mxCell>
+                <mxCell id="37" style="edgeStyle=none;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fillColor=#f9f7ed;strokeColor=#FFFFFF;fontColor=#FFFFFF;" edge="1" parent="1" target="5">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="680" y="101" as="sourcePoint"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="40" value="on merge" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];labelBackgroundColor=none;fontColor=#FFFFFF;" vertex="1" connectable="0" parent="37">
+                    <mxGeometry x="-0.6632" relative="1" as="geometry">
+                        <mxPoint x="24" y="12" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="27" value="master branch" style="swimlane;whiteSpace=wrap;html=1;fillColor=#1ba1e2;fontColor=#ffffff;strokeColor=#006EAF;" vertex="1" parent="1">
+                    <mxGeometry x="520" y="41" width="160" height="289" as="geometry"/>
+                </mxCell>
+                <mxCell id="28" value="PR Merge #1" style="rounded=0;whiteSpace=wrap;html=1;fontColor=#ffffff;fillColor=#647687;strokeColor=#314354;" vertex="1" parent="27">
+                    <mxGeometry y="201" width="160" height="89" as="geometry"/>
+                </mxCell>
+                <mxCell id="31" value="PR Merge #2" style="rounded=0;whiteSpace=wrap;html=1;fontColor=#ffffff;fillColor=#647687;strokeColor=#314354;" vertex="1" parent="27">
+                    <mxGeometry y="112" width="160" height="89" as="geometry"/>
+                </mxCell>
+                <mxCell id="32" value="PR Merge #3" style="rounded=0;whiteSpace=wrap;html=1;fontColor=#ffffff;fillColor=#647687;strokeColor=#314354;" vertex="1" parent="27">
+                    <mxGeometry y="23" width="160" height="89" as="geometry"/>
+                </mxCell>
+                <mxCell id="35" value="" style="endArrow=classic;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;fillColor=#f9f7ed;strokeColor=#FFFFFF;fontColor=#FFFFFF;" edge="1" parent="1" target="31">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="480" y="198" as="sourcePoint"/>
+                        <mxPoint x="691" y="221" as="targetPoint"/>
+                        <Array as="points">
+                            <mxPoint x="480" y="198"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="36" value="" style="endArrow=classic;html=1;dashed=1;fillColor=#f9f7ed;strokeColor=#FFFFFF;fontColor=#FFFFFF;" edge="1" parent="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="480" y="287" as="sourcePoint"/>
+                        <mxPoint x="521" y="287" as="targetPoint"/>
+                        <Array as="points">
+                            <mxPoint x="481" y="287"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="45" style="edgeStyle=orthogonalEdgeStyle;jumpStyle=none;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;labelBackgroundColor=none;fontColor=#FFFFFF;strokeColor=#FFFFFF;" edge="1" parent="1" source="38" target="43">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="38" value="gh-pages branch" style="swimlane;whiteSpace=wrap;html=1;fillColor=#1ba1e2;fontColor=#ffffff;strokeColor=#006EAF;" vertex="1" parent="1">
+                    <mxGeometry x="1000" y="41" width="200" height="120" as="geometry"/>
+                </mxCell>
+                <mxCell id="39" value="latest built files&lt;br&gt;Commit #1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#647687;strokeColor=#314354;fontColor=#ffffff;" vertex="1" parent="38">
+                    <mxGeometry y="23" width="200" height="97" as="geometry"/>
+                </mxCell>
+                <mxCell id="43" value="github-pages infrastructrue&lt;br&gt;https://www.it4c.dev" style="shape=internalStorage;whiteSpace=wrap;html=1;backgroundOutline=1;fillColor=#e3c800;fontColor=#000000;strokeColor=#B09500;" vertex="1" parent="1">
+                    <mxGeometry x="1000" y="200" width="200" height="130" as="geometry"/>
+                </mxCell>
+                <mxCell id="46" value="" style="endArrow=classic;html=1;dashed=1;fillColor=#f9f7ed;strokeColor=#FFFFFF;fontColor=#FFFFFF;" edge="1" parent="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="680" y="198" as="sourcePoint"/>
+                        <mxPoint x="720" y="198" as="targetPoint"/>
+                        <Array as="points">
+                            <mxPoint x="720" y="198"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="47" value="" style="endArrow=classic;html=1;dashed=1;fillColor=#f9f7ed;strokeColor=#FFFFFF;fontColor=#FFFFFF;" edge="1" parent="1">
+                    <mxGeometry width="50" height="50" relative="1" as="geometry">
+                        <mxPoint x="680" y="284" as="sourcePoint"/>
+                        <mxPoint x="720" y="284" as="targetPoint"/>
+                        <Array as="points">
+                            <mxPoint x="720" y="284"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="49" value="" style="rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;strokeColor=none;fontColor=#FFFFFF;fillColor=none;gradientColor=none;" vertex="1" parent="1">
+                    <mxGeometry width="20" height="20" as="geometry"/>
+                </mxCell>
+                <mxCell id="50" value="" style="rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;strokeColor=none;fontColor=#FFFFFF;fillColor=none;gradientColor=none;" vertex="1" parent="1">
+                    <mxGeometry x="1220" y="340" width="20" height="20" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>
\ No newline at end of file
diff --git a/docs/images/docs/architecture.png b/docs/images/docs/architecture.png
new file mode 100644
index 0000000..39a962e
Binary files /dev/null and b/docs/images/docs/architecture.png differ