diff --git a/src/components/DiagramRenderer.vue b/src/components/DiagramRenderer.vue
index d17379e..7e04a87 100644
--- a/src/components/DiagramRenderer.vue
+++ b/src/components/DiagramRenderer.vue
@@ -83,11 +83,25 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue';
+import mermaid from 'mermaid';
+
+// Production Chain Data
 import { productionChains } from './production-chains';
 
 // Components
 import ChainTiers from 'components/ChainTiers.vue';
 import ProductionChain from 'components/ProductionChain.vue';
+
+onMounted(() => {
+  mermaid.initialize({
+    startOnLoad: false,
+    logLevel: 'fatal',
+    securityLevel: 'loose',
+    theme: 'neutral',
+    flowchart: { htmlLabels: true }
+  });
+});
 </script>
 
 <style lang="scss"></style>
diff --git a/src/components/ProductionChain.vue b/src/components/ProductionChain.vue
index ce5bc29..5e20c63 100644
--- a/src/components/ProductionChain.vue
+++ b/src/components/ProductionChain.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script setup lang="ts">
+import { ref, watchEffect } from 'vue';
 import mermaid from 'mermaid';
-import { onMounted, ref, watchEffect } from 'vue';
 
 // HTML Refs
 const diagram = ref<HTMLInputElement | null>(null);
@@ -15,17 +15,6 @@ const props = defineProps<{
   mermaidDefinition: string;
 }>();
 
-// Mermaid
-onMounted(() => {
-  mermaid.initialize({
-    startOnLoad: false,
-    logLevel: 'fatal',
-    securityLevel: 'loose',
-    theme: 'neutral',
-    flowchart: { htmlLabels: true }
-  });
-});
-
 watchEffect(() => {
   if (diagram.value != null) {
     mermaid.render(