diff --git a/docs/boilerplate_production_chains.md b/docs/boilerplate_production_chains.md
new file mode 100644
index 0000000..29d1d2a
--- /dev/null
+++ b/docs/boilerplate_production_chains.md
@@ -0,0 +1,25 @@
+# boilerplate production chains
+
+## diagram definition
+
+```
+`flowchart LR; `
+```
+
+## plain chain
+
+```
+NAME(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+```
+
+## chain with lower efficiency
+
+```
+NAME(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>)
+```
+
+## chain with electricity
+
+```
+NAME(<span class='icon-flex-row'><img src='${highWheelerIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${lightningIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+```
diff --git a/docs/todo.todo b/docs/todo.todo
new file mode 100644
index 0000000..128689b
--- /dev/null
+++ b/docs/todo.todo
@@ -0,0 +1,37 @@
+mermaid graphs using endent?
+
+push to gh pages
+
+document div with background instead of img
+
+document vite importing assets
+importing an image
+
+dynamic imports?
+loop over to import the images from json file?
+
+fix link to homepage (loading into new tab)
+doc this
+
+div with background css
+
+watchEffect(() => {
+    if (mermaidGraph.value != null) {
+      mermaid.render(
+        'test',
+        "flowchart LR; Wood((<div class='wood-icon'><span>1</span></div>))-->Icon((<div class='timber-icon'>1</div>)); classDef mermaid-height height:50px; class Wood mermaid-height",
+        (svgCode: string) => {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          mermaidGraph.value!.innerHTML = svgCode;
+        }
+      );
+    } else {
+      console.log('null value');
+    }
+  });
+
+  .timber-icon {
+    background: no-repeat center/100% url('../assets/annoIcons/Timber.webp');
+    width: 40px;
+    height: 40px;
+  }
diff --git a/public/annoIcons/buildingMaterials/ArtificialIntelligence.png b/public/annoIcons/buildingMaterials/ArtificialIntelligence.png
deleted file mode 100644
index 591b74d..0000000
Binary files a/public/annoIcons/buildingMaterials/ArtificialIntelligence.png and /dev/null differ
diff --git a/src/assets/annoIcons/Caoutchouc.webp b/src/assets/annoIcons/Caoutchouc.webp
new file mode 100644
index 0000000..e54b904
Binary files /dev/null and b/src/assets/annoIcons/Caoutchouc.webp differ
diff --git a/src/assets/annoIcons/Charcoal_kiln.webp b/src/assets/annoIcons/Charcoal_kiln.webp
new file mode 100644
index 0000000..22536f0
Binary files /dev/null and b/src/assets/annoIcons/Charcoal_kiln.webp differ
diff --git a/src/assets/annoIcons/Coal.webp b/src/assets/annoIcons/Coal.webp
new file mode 100644
index 0000000..b012451
Binary files /dev/null and b/src/assets/annoIcons/Coal.webp differ
diff --git a/src/assets/annoIcons/High_wheeler.webp b/src/assets/annoIcons/High_wheeler.webp
new file mode 100644
index 0000000..2946bb0
Binary files /dev/null and b/src/assets/annoIcons/High_wheeler.webp differ
diff --git a/src/assets/annoIcons/Iron.webp b/src/assets/annoIcons/Iron.webp
new file mode 100644
index 0000000..fe0f7f9
Binary files /dev/null and b/src/assets/annoIcons/Iron.webp differ
diff --git a/src/assets/annoIcons/Lightning.png b/src/assets/annoIcons/Lightning.png
new file mode 100644
index 0000000..db55d11
Binary files /dev/null and b/src/assets/annoIcons/Lightning.png differ
diff --git a/src/assets/annoIcons/Steel.webp b/src/assets/annoIcons/Steel.webp
new file mode 100644
index 0000000..4659394
Binary files /dev/null and b/src/assets/annoIcons/Steel.webp differ
diff --git a/src/assets/annoIcons/Steel_beams.webp b/src/assets/annoIcons/Steel_beams.webp
new file mode 100644
index 0000000..0742e3e
Binary files /dev/null and b/src/assets/annoIcons/Steel_beams.webp differ
diff --git a/public/annoIcons/buildingMaterials/Timber.webp b/src/assets/annoIcons/Timber.webp
similarity index 100%
rename from public/annoIcons/buildingMaterials/Timber.webp
rename to src/assets/annoIcons/Timber.webp
diff --git a/public/annoIcons/buildingMaterials/Wood.webp b/src/assets/annoIcons/Wood.webp
similarity index 100%
rename from public/annoIcons/buildingMaterials/Wood.webp
rename to src/assets/annoIcons/Wood.webp
diff --git a/src/assets/annoIcons/buildingMaterials/ArtificialIntelligence.png b/src/assets/annoIcons/buildingMaterials/ArtificialIntelligence.png
deleted file mode 100644
index 591b74d..0000000
Binary files a/src/assets/annoIcons/buildingMaterials/ArtificialIntelligence.png and /dev/null differ
diff --git a/src/assets/annoIcons/buildingMaterials/Timber.webp b/src/assets/annoIcons/buildingMaterials/Timber.webp
deleted file mode 100644
index 759493a..0000000
Binary files a/src/assets/annoIcons/buildingMaterials/Timber.webp and /dev/null differ
diff --git a/src/assets/annoIcons/buildingMaterials/Wood.webp b/src/assets/annoIcons/buildingMaterials/Wood.webp
deleted file mode 100644
index 0202124..0000000
Binary files a/src/assets/annoIcons/buildingMaterials/Wood.webp and /dev/null differ
diff --git a/src/components/DiagramRenderer.vue b/src/components/DiagramRenderer.vue
index 9e2cc4b..238d5d5 100644
--- a/src/components/DiagramRenderer.vue
+++ b/src/components/DiagramRenderer.vue
@@ -1,16 +1,31 @@
 <template>
-  <div ref="mermaidGraph"></div>
-  <br />
-  <div ref="imageGraph"></div>
+  <div>
+    <div ref="timber"></div>
+    <div ref="steelBeams"></div>
+    <div ref="highWheeler"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import mermaid from 'mermaid';
 import { onMounted, ref, watchEffect } from 'vue';
 
+// Icons
+import woodIcon from '../assets/annoIcons/Wood.webp';
+import timberIcon from '../assets/annoIcons/Timber.webp';
+import charcoalKilnIcon from '../assets/annoIcons/Charcoal_kiln.webp';
+import coalIcon from '../assets/annoIcons/Coal.webp';
+import caoutchoucIcon from '../assets/annoIcons/Caoutchouc.webp';
+import highWheelerIcon from '../assets/annoIcons/High_wheeler.webp';
+import ironIcon from '../assets/annoIcons/Iron.webp';
+import steelIcon from '../assets/annoIcons/Steel.webp';
+import steelBeamsIcon from '../assets/annoIcons/Steel_beams.webp';
+import lightningIcon from '../assets/annoIcons/Lightning.png';
+
 // variables
-const mermaidGraph = ref<HTMLInputElement | null>(null);
-const imageGraph = ref<HTMLInputElement | null>(null);
+const timber = ref<HTMLInputElement | null>(null);
+const steelBeams = ref<HTMLInputElement | null>(null);
+const highWheeler = ref<HTMLInputElement | null>(null);
 
 // load mermaid graph
 onMounted(() => {
@@ -18,37 +33,47 @@ onMounted(() => {
     startOnLoad: false,
     logLevel: 'fatal',
     securityLevel: 'loose',
-    theme: 'neutral'
+    theme: 'neutral',
+    flowchart: { htmlLabels: true }
   });
 });
 
 watchEffect(() => {
-  if (mermaidGraph.value != null) {
+  if (timber.value != null) {
     mermaid.render(
-      'test',
-      "graph LR; Wood(<div class='wood-icon'><span>1</span></div>)-->Icon(<div class='timber-icon'>1</div>)",
+      'timber',
+      `flowchart LR; Wood(<img src='${woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)-->Timber(<img src='${timberIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
       (svgCode: string) => {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        mermaidGraph.value!.innerHTML = svgCode;
+        timber.value!.innerHTML = svgCode;
       }
     );
-  } else {
-    console.log('null value');
   }
 });
 
 watchEffect(() => {
-  if (imageGraph.value != null) {
+  if (steelBeams.value != null) {
     mermaid.render(
-      'woodTimber',
-      "graph LR; Wood(<img src='/annoIcons/buildingMaterials/Wood.webp' class='icon-size' />)-->Icon(<img src='/annoIcons/buildingMaterials/Timber.webp' class='icon-size' />)",
+      'steelBeams',
+      `flowchart LR; CharcoalKiln(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> SteelBeams(<img src='${steelBeamsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
       (svgCode: string) => {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        imageGraph.value!.innerHTML = svgCode;
+        steelBeams.value!.innerHTML = svgCode;
+      }
+    );
+  }
+});
+
+watchEffect(() => {
+  if (highWheeler.value != null) {
+    mermaid.render(
+      'highWheeler',
+      `flowchart LR; Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<img src='${steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> HighWheeler(<span class='icon-flex-row'><img src='${highWheelerIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${lightningIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>); Caoutchouc(<img src='${caoutchoucIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> HighWheeler`,
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        highWheeler.value!.innerHTML = svgCode;
       }
     );
-  } else {
-    console.log('null value');
   }
 });
 </script>
@@ -59,19 +84,32 @@ watchEffect(() => {
   height: 40px;
 }
 
-.wood-icon {
-  background: no-repeat center/100%
-    url('../assets/annoIcons/buildingMaterials/Wood.webp');
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
+.ratio-count {
+  font-weight: bold;
+  text-align: center;
 }
-.timber-icon {
-  background: no-repeat center/100%
-    url('../assets/annoIcons/buildingMaterials/Timber.webp');
-  width: 40px;
-  height: 40px;
+
+.efficiency-perc {
+  font-weight: bold;
+  color: $green-9 !important;
+}
+
+.electricity-container {
+  margin-bottom: -5px;
+}
+
+.electricity-icon {
+  width: 22px;
+  margin-bottom: -5px;
+}
+
+.icon-flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.icon-flex-col {
+  display: flex;
+  flex-direction: column;
 }
 </style>