Create big architecture diagram

2024-01-05 15:46:36 +01:00
parent 7f0082f8d2
commit 726ce10a7c
23 changed files with 912 additions and 82 deletions
--- a/src/diagrams/README.md
+++ b/src/diagrams/README.md
@@ -29,3 +29,4 @@ to a PDF which you can view with your favorite PDF viewer (which hopefully liste
 ./watch.sh
 ```

+(you should specify the `$pdf_previewer` configuration variable in an appropriate `.latexmkrc` file)
--- a/src/diagrams/arch1.tex
+++ b/src/diagrams/arch1.tex
@@ -0,0 +1,13 @@
+\input{lib/preamble.tex}
+
+\begin{document}
+\begin{tikzpicture}
+  \node (Device) at (4,1) [component,external] { Gerät };
+  \node (WSM) at (4,4) [component, inner sep=12px] { WSM };
+  \node (Backend) at (4,7) [component,external] { Backend };
+  \draw[very thick, rounded corners=6px] (0,2) rectangle (8,6) ++(0, 0.1) node [label, anchor=south east] { \large Heimdall };
+  \draw (Device) edge [<->] (WSM);
+  \draw (WSM) edge [->, bend left=10] (Backend) (Backend) edge [->, response, bend left=10] (WSM);
+  \node at (5.5,4.5) [stickynote, callout absolute pointer=(WSM.20), anchor=south west] { Web Socket\\Manager };
+\end{tikzpicture}
+\end{document}
--- a/src/diagrams/arch2.tex
+++ b/src/diagrams/arch2.tex
@@ -0,0 +1,19 @@
+\input{lib/preamble.tex}
+
+\begin{document}
+\begin{tikzpicture}
+  \node (dev1) at (3,1) [component,external] { Gerät 1 };
+  \node (dev2) at (6,1) [component,external] { Gerät 2 };
+  \fill[color=black!10] (2,4) rectangle (10,6);
+  \node (WSM1) at (3,5) [component, inner sep=12px] { WSM\\ \small Pod 1 };
+  \node (WSM2) at (6,5) [component, inner sep=12px] { WSM\\ \small Pod 2 };
+  \node (WSMX) at (9,5) [component, inner sep=12px] { WSM\\ \small Pod \dots };
+  \node (Backend) at (6,8) [component,external] { Backend };
+  \draw[very thick, rounded corners=6px] (1,2) rectangle (11,7) ++(0, 0.1) node [label, anchor=south east] { \large Heimdall };
+  \draw[rounded corners, pattern=crosshatch, pattern color=scandiored!20, draw=scandiored]
+    (2,2.5) rectangle (10,3.5)
+    node [label, anchor=south east, text=scandiored] { \scriptsize Load Balancer };
+  \draw (dev1) edge [<->] (WSM1) (dev2) edge [<->] (WSM2);
+  \draw (WSM1) edge [->, bend left=10] (Backend) (Backend) edge [->, response, bend left=10] (WSM1);
+\end{tikzpicture}
+\end{document}
--- a/src/diagrams/arch3.tex
+++ b/src/diagrams/arch3.tex
@@ -0,0 +1,33 @@
+\input{lib/preamble.tex}
+
+\begin{document}
+\begin{tikzpicture}
+  \node (dev1) at (3,1) [component,external] { Gerät 1 };
+  \node (dev2) at (6,1) [component,external] { Gerät 2 };
+  \fill[color=black!10] (2,3) rectangle (10,5);
+  \node (WSM1) at (3,4) [component, inner sep=12px] { WSM\\ \small Pod 1 };
+  \node (WSM2) at (6,4) [component, inner sep=12px] { WSM\\ \small Pod 2 };
+  \node (WSMX) at (9,4) [component, inner sep=12px] { WSM\\ \small Pod \dots };
+  \node (WSM1 port) at (WSM1.30) [port] {};
+  \node at (WSM1 port) [label, below right=3px] { \scriptsize addr1 };
+  \node (WSM2 port) at (WSM2.30) [port] {};
+  \node at (WSM2 port) [label, below right=3px] { \scriptsize addr2 };
+  \node (FORS) at (7,7) [component, inner sep=12px] { FORS }; 
+  \node at (8.5,7.5) [stickynote, callout absolute pointer=(FORS.20), anchor=south west] { Forwarding\\Service };
+  \node (AddrDB) at (9.5,6) [database] {};
+  \node at (AddrDB.north) [label, above=3px] { \small Address\\ \small DB };
+  \node (Backend) at (6,10.5) [component,external] { Backend };
+
+  \draw[very thick, rounded corners=6px] (1,2) rectangle (11,9) ++(0, 0.1) node [label, anchor=south east] { \large Heimdall };
+  \draw (dev1) edge [<->] (WSM1) (dev2) edge [<->] (WSM2);
+  \draw (WSM1.north) edge [->] (Backend);
+  \draw (Backend) edge [->,response] (FORS);
+  \draw (FORS.0) edge [->, bend left=10] node [auto, sloped] { \scriptsize 1 } (AddrDB)
+        (AddrDB) edge [->, response, bend left=10] node [auto, sloped, swap] { \scriptsize addr1 } (FORS.340);
+  \draw (FORS) edge [->, response] (WSM1 port);
+
+  \draw[->] (WSM1.340) .. controls +(2, 0) and +(-6, 0) .. (AddrDB.200) node [pos=0.85, above, sloped] { \scriptsize 1: addr1 };
+  \draw[->] (WSM2.70) -- (AddrDB.220) node [midway, above, sloped] { \scriptsize 2: addr2 };
+  \draw[->] (WSMX) -- (AddrDB);
+\end{tikzpicture}
+\end{document}
--- a/src/diagrams/arch4.tex
+++ b/src/diagrams/arch4.tex
@@ -0,0 +1,28 @@
+\input{lib/preamble.tex}
+
+\begin{document}
+\begin{tikzpicture}
+  \node (Device) at (5,1) [component,external] { Gerät };
+  \node (WSM) at (5,4) [component, inner sep=12px] { WSM };
+  \node (FORS) at (7,7) [component, inner sep=12px] { FORS }; 
+  \node (Message Mapping) at (2.5,6) [database] {};
+  \node at (Message Mapping.north) [label, above=3px] { \small Message\\ \small Mapping };
+  \node (AddrDB) at (9.5,6) [database] {};
+  \node at (AddrDB.north) [label, above=3px] { \small Address\\ \small DB };
+  \node (Backend1) at (3,10.5) [component,external] { Backend 1 };
+  \node (Backend2) at (6,10.5) [component,external] { Backend 2 };
+  \node (BackendX) at (9,10.5) [component,external] { Backend \dots };
+
+  \draw[very thick, rounded corners=6px] (1,2) rectangle (11,9) ++(0, 0.1) node [label, anchor=south east] { \large Heimdall };
+  \draw (Device) edge [<->] (WSM);
+
+  \draw (WSM) edge [->, bend left=10] node [auto, sloped, swap] { \scriptsize /foo/config;v1 } (Message Mapping.325)
+        (Message Mapping.0) edge [->, response, bend left=10] node [auto, sloped] { \scriptsize Backend 2 } (WSM);
+
+  \draw (WSM) edge [->] (Backend1);
+  \draw (Backend1) edge [->,response] (FORS);
+  \draw (FORS) edge (AddrDB);
+  \draw (FORS) edge [->, response] (WSM);
+  \draw[->] (WSM) -- (AddrDB);
+\end{tikzpicture}
+\end{document}
--- a/src/diagrams/arch5.tex
+++ b/src/diagrams/arch5.tex
@@ -0,0 +1,28 @@
+\input{lib/preamble.tex}
+
+\begin{document}
+\begin{tikzpicture}
+  \node (Device) at (5,0) [component,external] { Gerät };
+  \node (WSM) at (5,4) [component, inner sep=12px] { WSM };
+
+  \node (Blocked) at (3,6) [database] {};
+  \node at (Blocked.north) [label, above=3px] { \small Blocked\\ \small Certificates };
+  \node (Quarantine) at (7,6) [database] {};
+  \node at (Quarantine.north) [label, above=3px] { \small Quarantine\\ \small Database };
+
+  \draw[very thick, rounded corners=6px] (1,1) rectangle (9,8) ++(0, 0.1) node [label, anchor=south east] { \large Heimdall };
+
+  \draw (WSM) edge (Blocked.south) (WSM) edge (Quarantine.south);
+
+  \draw ($ (Device.north) + (-0.6,0) $) edge [<->, bend left=20]
+                                        node [auto, sloped, align=center] { \scriptsize TLS\\[-4px] \scriptsize handshake }
+                                        ($ (WSM.south) + (-0.6,0) $);
+  \draw (Device.north) edge [<->]
+                       node [auto, sloped] { \scriptsize WebSocket }
+                       node [auto, sloped, swap] { \scriptsize upgrade }
+                       (WSM.south);
+  \draw ($ (Device.north) + (0.6,0) $) edge [<->, bend right=20]
+                                       node [auto, sloped, swap, align=center] { \scriptsize Corporate\\[-4px] \scriptsize Handshake }
+                                       ($ (WSM.south) + (0.6,0) $);
+\end{tikzpicture}
+\end{document}
--- a/src/diagrams/arch6.tex
+++ b/src/diagrams/arch6.tex
@@ -0,0 +1,49 @@
+\input{lib/preamble.tex}
+
+\begin{document}
+\begin{tikzpicture}
+  \node (dev1) at (3,0.5) [component,external] { Gerät 1 };
+  \node (dev2) at (6,0.5) [component,external] { Gerät 2 };
+  \node (devX) at (9,0.5) [component,external] { Gerät \dots };
+  \draw[very thick, rounded corners=6px] (0,2) rectangle (11,8.5) ++(0, 0.1) node [label, anchor=south east] { \large Heimdall };
+  \fill[color=black!10] (2,3) rectangle (10,5);
+  \node (WSM1) at (3,4) [component] { WSM\\ \small Pod 1 };
+  \node (WSM2) at (6,4) [component] { WSM\\ \small Pod 2 };
+  \node (WSMX) at (9,4) [component] { WSM\\ \small Pod \dots };
+  \node (WSM1 port) at (WSM1.30) [port] {};
+  \node at (WSM1 port) [label, below right=3px] { \scriptsize addr1 };
+  \node (WSM2 port) at (WSM2.30) [port] {};
+  \node at (WSM2 port) [label, below right=3px] { \scriptsize addr2 };
+  \node (FORS) at (7,7) [component, inner sep=12px] { FORS }; 
+  \node (DB1) at (1,3.25) [database] {};
+  \node (DB2) at (1,4.75) [database] {};
+  \node (Message Mapping) at (1.5,6.75) [database] {};
+  \node at (Message Mapping.north) [label, above=3px] { \small Message\\ \small Mapping };
+  \node (AddrDB) at (9.5,6) [database] {};
+  \node at (AddrDB.north) [label, above=3px] { \small Address\\ \small DB };
+  \node (backend1) at (3, 10) [component,external] { Backend 1 };
+  \node (backend2) at (6, 10) [component,external] { Backend 2 };
+  \node (backendX) at (9, 10) [component,external] { Backend \dots };
+
+  \draw (dev1) edge [<->] (WSM1)
+        (dev2) edge [<->] (WSM2)
+        (devX) edge [<->] (WSMX);
+
+  \draw (WSM1) edge (DB1) (WSM1) edge (DB2);
+
+  \draw (WSM1) edge [->, bend left=10] node [auto, sloped, swap] { \scriptsize /foo/config;v1 } (Message Mapping)
+        (Message Mapping) edge [->, response, bend left=10] node [auto, sloped] { \scriptsize Backend 2 } (WSM1);
+
+  \draw (WSM1) edge [->, bend left=10] (backend2)
+        (backend2) edge [->, response, bend left=10] (WSM1);
+
+  \draw (backend2) edge [->, response] (FORS);
+  \draw (FORS.0) edge [->, bend left=10] node [auto, sloped] { \scriptsize 1 } (AddrDB)
+        (AddrDB) edge [->, response, bend left=10] node [auto, sloped, swap] { \scriptsize addr1 } (FORS.340);
+  \draw (FORS) edge [->, response] (WSM1 port);
+
+  \draw[->] (WSM1.340) .. controls +(3, 0) and +(-6, 0) .. (AddrDB.200) node [pos=0.85, above, sloped] { \scriptsize 1: addr1 };
+  \draw[->] (WSM2.70) -- (AddrDB.220) node [midway, above, sloped] { \scriptsize 2: addr2 };
+  \draw[->] (WSMX) -- (AddrDB);
+\end{tikzpicture}
+\end{document}
--- a/src/diagrams/build.sh
+++ b/src/diagrams/build.sh
@@ -6,11 +6,11 @@ latexmk -dvilua *.tex

 for dvi in *.dvi
 do
-  dvisvgm --font-format=woff business_context.dvi
+  dvisvgm --font-format=woff $dvi
 done

-latexmk -C
-
 mkdir -p ../../public/diagrams
 mv *.svg ../../public/diagrams/

+latexmk -C
+
--- a/src/diagrams/business_context.tex
+++ b/src/diagrams/business_context.tex
@@ -1,45 +1,27 @@
-\documentclass[tikz]{standalone}
-\usepackage{fontspec}
-\setmainfont{Roboto Light}
-
-\usetikzlibrary{arrows.meta,graphs,positioning,shapes.misc}
-
-\definecolor{scandioblue}{RGB}{66, 212, 251}
-\definecolor{scandiored}{RGB}{210, 21, 21}
+\input{lib/preamble.tex}

 \begin{document}
 \begin{tikzpicture}[
-  >={Stealth[round]},
-  every node/.style={
-    rectangle,
-    thick,
-    draw=black,
-    rounded corners=3px
-  },
-  external/.style={
-    fill=scandioblue,
-    inner sep=6px
-  },
  heimdall/.style={
    inner xsep=30px,
    inner ysep=18px,
    font=\Large
  }
 ]
-  \node (dev2) [external] {Device 2};
-  \node (dev1) [external, left=of dev2] {Device 1};
-  \node (devX) [external, right=of dev2] {Device \dots};
-  \node (heimdall) [heimdall, above=of dev2] {Heimdall};
-  \node (back2) [external, above=of heimdall] {Backend 2};
-  \node (back1) [external, left=of back2] {Backend 1};
-  \node (backX) [external, right=of back2] {Backend \dots};
+  \node (dev2) [component, external] {Gerät 2};
+  \node (dev1) [component, external, left=of dev2] {Gerät 1};
+  \node (devX) [component, external, right=of dev2] {Gerät \dots};
+  \node (heimdall) [component, heimdall, above=of dev2] {Heimdall};
+  \node (back2) [component, external, above=of heimdall] {Backend 2};
+  \node (back1) [component, external, left=of back2] {Backend 1};
+  \node (backX) [component, external, right=of back2] {Backend \dots};

  \path (dev1) edge[<->] (heimdall);
  \path (dev2) edge[<->] (heimdall);
  \path (devX) edge[<->] (heimdall);

-  \path (heimdall) edge[->, bend left=10] (back1) (back1) edge [->, bend left=10] (heimdall);
-  \path (heimdall) edge[->, bend left=10] (back2) (back2) edge [->, bend left=10] (heimdall);
-  \path (heimdall) edge[->, bend left=10] (backX) (backX) edge [->, bend left=10] (heimdall);
+  \path (heimdall.154) edge[->, bend left=10] (back1) (back1) edge [->, response, bend left=10] (heimdall.150);
+  \path (heimdall.96) edge[->, bend left=10] (back2) (back2) edge [->, response, bend left=10] (heimdall.84);
+  \path (heimdall.30) edge[->, bend left=10] (backX) (backX) edge [->, response, bend left=10] (heimdall.26);
 \end{tikzpicture}
 \end{document}
--- a/src/diagrams/lib/preamble.tex
+++ b/src/diagrams/lib/preamble.tex
@@ -0,0 +1,61 @@
+\documentclass[tikz]{standalone}
+\usepackage{fontspec}
+\setmainfont{Roboto Light}
+
+\usetikzlibrary{arrows.meta,calc,graphs,patterns,positioning,shapes.callouts,shapes.geometric,shapes.misc}
+
+\definecolor{scandioblue}{RGB}{66, 212, 251}
+\definecolor{scandiored}{RGB}{210, 21, 21}
+
+\makeatletter
+\tikzset{
+  >={Stealth[round]},
+  component/.style={
+    rectangle,
+    thick,
+    draw=black,
+    fill=white,
+    rounded corners=3px,
+    inner sep=6px,
+    align=center
+  },
+  external/.style={
+    fill=scandioblue
+  },
+  response/.style={
+    dashed
+  },
+  port/.style={
+    circle,
+    inner sep=2px,
+    fill=black
+  },
+  label/.style={
+    inner sep=1px,
+    fill=white,
+    align=center
+  },
+  database/.style={
+    path picture={
+      \draw (0, 1.5*\database@segmentheight) circle [x radius=\database@radius,y radius=\database@aspectratio*\database@radius];
+      \draw (-\database@radius, 0.5*\database@segmentheight) arc [start angle=180,end angle=360,x radius=\database@radius, y radius=\database@aspectratio*\database@radius];
+      \draw (-\database@radius,-0.5*\database@segmentheight) arc [start angle=180,end angle=360,x radius=\database@radius, y radius=\database@aspectratio*\database@radius];
+      \draw (-\database@radius,1.5*\database@segmentheight) -- ++(0,-3*\database@segmentheight) arc [start angle=180,end angle=360,x radius=\database@radius, y radius=\database@aspectratio*\database@radius] -- ++(0,3*\database@segmentheight);
+    },
+    minimum width=2*\database@radius + \pgflinewidth,
+    minimum height=3*\database@segmentheight + 2*\database@aspectratio*\database@radius + \pgflinewidth,
+  },
+  database segment height/.store in=\database@segmentheight,
+  database radius/.store in=\database@radius,
+  database aspect ratio/.store in=\database@aspectratio,
+  database segment height=0.2cm,
+  database radius=0.4cm,
+  database aspect ratio=0.35,
+  stickynote/.style={
+    shape=rectangle callout,
+    draw,
+    fill=scandiored!20,
+    align=center
+  }
+}
+\makeatother
--- a/src/diagrams/watch.sh
+++ b/src/diagrams/watch.sh
@@ -1,5 +1,6 @@
 #!/usr/bin/env bash

 filename="$1"
-latexmk -lualatex -pvc $filename -view=none
+
+latexmk -lualatex -pvc $filename -view=pdf
 latexmk -C
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,10 @@
 import Reveal from 'reveal.js';

 let deck = new Reveal({
-  transition: 'fade'
+  transition: 'fade',
+
+  width: 960,
+  height: 700
 });
 deck.initialize();

--- a/src/slides.html
+++ b/src/slides.html
@@ -1,3 +1,4 @@
+<!--
 <section class="sc-left-and-right" data-background-image="/backgrounds/title.svg">
  <div class="sc-right">
    <img src="/logo_scandio.svg" style="width: 50%;">
@@ -42,8 +43,10 @@
 <section data-background-image="/backgrounds/normal.svg" data-background-position="top right">
  <h2>Qualitätsanforderungen</h2>
  <ul>
-    <li class="fragment"></li>
-    <li class="fragment"></li>
+    <li class="fragment">Vermeidung von Verbindungsabbrüchen</li>
+    <li class="fragment">Wenige Neuverbindungen zur gleichen Zeit</li>
+    <li class="fragment">Keine Validierung oder Modifikation von Nachrichteninhalten</li>
+    <li class="fragment">Verbindungsdetails transparent gegenüber Backends</li>
  </ul>
 </section>

@@ -52,13 +55,46 @@
 </section>

 <section data-background-image="/backgrounds/normal.svg" data-background-position="top right">
+  <h2>Systemupdate</h2>
+  <ul>
+    <li class="fragment">Updates an der Logik und Konfiguration von Heimdall</li>
+    <li class="fragment">Vermeidung von Neuverbindungen in den meisten Fällen</li>
+    <li class="fragment">Kontrollierte Neuverbindungen, falls Verbindungsabbrüche notwendig</li>
+  </ul>
 </section>

 <section data-background-color="black">
  Lösungen
 </section>
+-->

 <section data-background-image="/backgrounds/normal.svg" data-background-position="top right">
+  <h3>Softwarearchitektur Heimdall</h3>
+  <center class="r-stack">
+    <img class="diagram fragment fade-out" data-fragment-index="1" src="/diagrams/arch1.svg">
+    <img class="diagram fragment fade-in-then-out" data-fragment-index="1" src="/diagrams/arch2.svg">
+    <img class="diagram fragment fade-in-then-out" src="/diagrams/arch3.svg">
+    <img class="diagram fragment fade-in-then-out" src="/diagrams/arch4.svg">
+    <img class="diagram fragment fade-in-then-out" src="/diagrams/arch5.svg">
+  </center>
+</section>
+
+<section data-background-image="/backgrounds/normal-fewer-hexagons.svg" data-background-position="top right">
+  <img class="r-stretch" src="/diagrams/arch6.svg">
+</section>
+
+<section data-background-image="/backgrounds/normal.svg" data-background-position="top right">
+  <h3>Deploymentstrategie</h3>
+  <center class="r-stack">
+    <img class="diagram fragment fade-out" data-fragment-index="1" src="/diagrams/deployment1.svg">
+    <img class="diagram fragment fade-in-then-out" data-fragment-index="1" src="/diagrams/deployment2.svg">
+    <img class="diagram fragment fade-in-then-out" src="/diagrams/deployment3.svg">
+    <img class="diagram fragment fade-in-then-out" src="/diagrams/deployment4.svg">
+  </center>
+</section>
+
+<section data-background-image="/backgrounds/normal.svg" data-background-position="top right">
+  <h3>Ideen zur Verbesserung</h3>
 </section>

 <section class="sc-left-and-right" data-background-color="black">