diff --git a/app/components/schema/mermaid.md b/app/components/schema/mermaid.md
index 3da01f7..7ee1c13 100644
--- a/app/components/schema/mermaid.md
+++ b/app/components/schema/mermaid.md
@@ -9,5 +9,13 @@ stateDiagram-v2
     state2 --> state3
     state3 --> state4
 ```
+
+### Scenario eligibilitz for Bildungsurlaub, flowchart version
+```mermaid
+flowchart TD
+    A("Employed") --> B("In the company for more than 6 months")
+    B --> C("Eligible for Bildungsurlaub")
+    C --> D("Can use up to 10 days every two years")
+```
 <!-- mmdc -i app/components/schema/mermaid.md -o mermaid.md -->
 <!-- https://github.com/mermaid-js/mermaid-cli -->
diff --git a/app/routes/home/template.hbs b/app/routes/home/template.hbs
index a044353..36f9c7b 100644
--- a/app/routes/home/template.hbs
+++ b/app/routes/home/template.hbs
@@ -1,7 +1,9 @@
 <div class="flex justify-center">
   <div>
-    <img src="mermaid.png" alt="schema to employed until eligibility for bildungsurlaub">
+    <img src="https://mermaid.ink/img/pako:eNpNkDtvwzAMhP8KwTkG6jTooKFDH0OHTtkKL4xFOwIk0dAjgRDkv1d1UFiaqA-n4-luOIpmVBgTJf4wNAdy3WU_eKhnhb2CT7dYKawbulfw5SGdGUZxC_kCkwRwErhC8vBSZ5_OsXnyXI2smc3J8ip-M1ZnP8ccLOVTIzwoeK8WOTLkBZJA_wSaSgS-cCiQrgKFKbTePXTd63-0NubKH-vbKBs-4A4dB0dG1xpuf6IB678cD6jqqHmibNOAg79XKeUkx-JHVClk3mFe9FYcqolsrLQW8iOy3VmbJOH7UfXa-P0XYap84w?type=png" alt="schema to employed until eligibility for bildungsurlaub">
   </div>
+  {{!-- TODO: Ideally find a way to display a SVG instead, which is more accessible --}}
+  {{!-- Mermaid live editor: https://mermaid.live/edit#pako:eNpNkDtvwzAMhP8KwTkG6jTooKFDH0OHTtkKL4xFOwIk0dAjgRDkv1d1UFiaqA-n4-luOIpmVBgTJf4wNAdy3WU_eKhnhb2CT7dYKawbulfw5SGdGUZxC_kCkwRwErhC8vBSZ5_OsXnyXI2smc3J8ip-M1ZnP8ccLOVTIzwoeK8WOTLkBZJA_wSaSgS-cCiQrgKFKbTePXTd63-0NubKH-vbKBs-4A4dB0dG1xpuf6IB678cD6jqqHmibNOAg79XKeUkx-JHVClk3mFe9FYcqolsrLQW8iOy3VmbJOH7UfXa-P0XYap84w --}}
 </div>
 
 TABLE OF content
diff --git a/mermaid-1.svg b/mermaid-1.svg
deleted file mode 100644
index 6ddedb6..0000000
--- a/mermaid-1.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg aria-roledescription="stateDiagram" role="graphics-document document" viewBox="0 0 315.8203125 300" style="max-width: 315.82px; background-color: white;" class="statediagram" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="my-svg"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:2px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#my-svg g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#my-svg g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#my-svg g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#my-svg g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#my-svg g.stateGroup line{stroke:#333333;stroke-width:1;}#my-svg .transition{stroke:#333333;stroke-width:1;fill:none;}#my-svg .stateGroup .composit{fill:white;border-bottom:1px;}#my-svg .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#my-svg .state-note{stroke:#aaaa33;fill:#fff5ad;}#my-svg .state-note text{fill:black;stroke:none;font-size:10px;}#my-svg .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#my-svg .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#my-svg .edgeLabel .label text{fill:#333;}#my-svg .label div .edgeLabel{color:#333;}#my-svg .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#my-svg .node circle.state-start{fill:#333333;stroke:#333333;}#my-svg .node .fork-join{fill:#333333;stroke:#333333;}#my-svg .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#my-svg .end-state-inner{fill:white;stroke-width:1.5;}#my-svg .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg #statediagram-barbEnd{fill:#333333;}#my-svg .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg .cluster-label,#my-svg .nodeLabel{color:#131300;}#my-svg .statediagram-cluster rect.outer{rx:5px;ry:5px;}#my-svg .statediagram-state .divider{stroke:#9370DB;}#my-svg .statediagram-state .title-state{rx:5px;ry:5px;}#my-svg .statediagram-cluster.statediagram-cluster .inner{fill:white;}#my-svg .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#my-svg .statediagram-cluster .inner{rx:0;ry:0;}#my-svg .statediagram-state rect.basic{rx:5px;ry:5px;}#my-svg .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#my-svg .note-edge{stroke-dasharray:5;}#my-svg .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#my-svg .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#my-svg .statediagram-note text{fill:black;}#my-svg .statediagram-note .nodeLabel{color:black;}#my-svg .statediagram .edgeLabel{color:red;}#my-svg #dependencyStart,#my-svg #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#my-svg .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><defs><marker orient="auto" markerUnits="strokeWidth" markerHeight="14" markerWidth="20" refY="7" refX="19" id="my-svg_statediagram-barbEnd"><path d="M 19,7 L9,13 L14,7 L9,1 Z"/></marker></defs><g class="root"><g class="clusters"/><g class="edgePaths"><path marker-end="url(#my-svg_statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge0" d="M157.91015625,41.5L157.91015625,45.666666666666664C157.91015625,49.833333333333336,157.91015625,58.166666666666664,157.91015625,66.5C157.91015625,74.83333333333333,157.91015625,83.16666666666667,157.91015625,87.33333333333333L157.91015625,91.5"/><path marker-end="url(#my-svg_statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge1" d="M157.91015625,125L157.91015625,129.16666666666666C157.91015625,133.33333333333334,157.91015625,141.66666666666666,157.91015625,150C157.91015625,158.33333333333334,157.91015625,166.66666666666666,157.91015625,170.83333333333334L157.91015625,175"/><path marker-end="url(#my-svg_statediagram-barbEnd)" style="fill:none" class="edge-thickness-normal transition" id="edge2" d="M157.91015625,208.5L157.91015625,212.66666666666666C157.91015625,216.83333333333334,157.91015625,225.16666666666666,157.91015625,233.5C157.91015625,241.83333333333334,157.91015625,250.16666666666666,157.91015625,254.33333333333334L157.91015625,258.5"/></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><rect height="0" width="0" ry="0" rx="0"/><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><rect height="0" width="0" ry="0" rx="0"/><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><rect height="0" width="0" ry="0" rx="0"/><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(157.91015625, 24.75)" id="state-state1-0" class="node  statediagram-state undefined"><rect height="33.5" width="84.6015625" y="-16.75" x="-42.30078125" style="" class="basic label-container"/><g transform="translate(-34.80078125, -9.25)" style="" class="label"><rect/><foreignObject height="18.5" width="69.6015625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Employed</span></div></foreignObject></g></g><g transform="translate(157.91015625, 108.25)" id="state-state2-1" class="node  statediagram-state undefined"><rect height="33.5" width="299.8203125" y="-16.75" x="-149.91015625" style="" class="basic label-container"/><g transform="translate(-142.41015625, -9.25)" style="" class="label"><rect/><foreignObject height="18.5" width="284.8203125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">In the company for more than 6 months</span></div></foreignObject></g></g><g transform="translate(157.91015625, 191.75)" id="state-state3-2" class="node  statediagram-state undefined"><rect height="33.5" width="203.1484375" y="-16.75" x="-101.57421875" style="" class="basic label-container"/><g transform="translate(-94.07421875, -9.25)" style="" class="label"><rect/><foreignObject height="18.5" width="188.1484375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Eligible for Bildungsurlaub</span></div></foreignObject></g></g><g transform="translate(157.91015625, 275.25)" id="state-state4-2" class="node  statediagram-state undefined"><rect height="33.5" width="289.234375" y="-16.75" x="-144.6171875" style="" class="basic label-container"/><g transform="translate(-137.1171875, -9.25)" style="" class="label"><rect/><foreignObject height="18.5" width="274.234375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Can use up to 10 days every two years</span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/mermaid.md b/mermaid.md
deleted file mode 100644
index c5b7f1e..0000000
--- a/mermaid.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### Scenario eligibility for Bildungsurlaub
-![diagram](./mermaid-1.svg)