add latest

src/boot/mermaid.ts

@@ -0,0 +1,16 @@
+import { onMounted } from 'vue';
+import mermaid from 'mermaid';
+
+function initialiseMermaid() {
+  onMounted(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      logLevel: 'fatal',
+      securityLevel: 'loose',
+      theme: 'neutral',
+      flowchart: { htmlLabels: true }
+    });
+  });
+}
+
+export { mermaid, initialiseMermaid };

src/components/ProductionChain.vue

@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
-import mermaid from 'mermaid';
+import { mermaid } from 'boot/mermaid';
 
 // DOM Refs
 const diagram = ref<HTMLInputElement | null>(null);

src/pages/AnnoBase.vue

@@ -35,7 +35,7 @@
 import { productionChainsBase } from './data/production-chains-base';
 
 // Mermaid
-import { initialiseMermaid } from 'composables/mermaid';
+import { initialiseMermaid } from 'boot/mermaid';
 
 // Components
 import ChainTiers from 'components/ChainTiers.vue';

src/pages/AnnoExpansions.vue

@@ -31,7 +31,7 @@
 import { productionChainsExpansions } from './data/production-chains-expansions';
 
 // Mermaid
-import { initialiseMermaid } from 'composables/mermaid';
+import { initialiseMermaid } from 'boot/mermaid';
 
 // Components
 import ChainTiers from 'components/ChainTiers.vue';

src/pages/data/production-chains-base.ts

@@ -1,4 +1,5 @@
 import { TieredProductionChain } from './models';
+import endent from 'endent';
 
 // Icons
 // Regions
@@ -167,19 +168,39 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'coalRatio',
-        mermaidDefinition: `flowchart LR; Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`
+        mermaidDefinition: endent`
+        flowchart LR
+        Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Coal --> Charcoal
+        `
       },
       {
         productionChain: 'goldRatio',
-        mermaidDefinition: `flowchart LR; ArcticFur(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> OldWorldFur(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${newWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)`
+        mermaidDefinition: endent`
+        flowchart LR
+        ArcticGold(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        NewWorldGold(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${newWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)
+        ArcticGold --> NewWorldGold
+        `
       },
       {
         productionChain: 'furRatio',
-        mermaidDefinition: `flowchart LR; ArcticFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> OldWorldFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)`
+        mermaidDefinition: `
+        flowchart LR
+        ArcticFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        OldWorldFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)
+        ArcticFur --> OldWorldFur
+        `
       },
       {
         productionChain: 'clayRatio',
-        mermaidDefinition: `flowchart LR; EnbesaClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${enbesaIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> OldWorldClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>2</span></span></span>)`
+        mermaidDefinition: `
+        flowchart LR
+        EnbesaClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${enbesaIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        OldWorldClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>2</span></span></span>)
+        EnbesaClay --> OldWorldClay
+        `
       }
     ]
   },
@@ -189,15 +210,30 @@ export const productionChainsBase: TieredProductionChain[] = [
     productionChains: [
       {
         productionChain: 'oilPowerPlant',
-        mermaidDefinition: `flowchart LR; OilWell(<img src='${oilWellIcon}' class='icon-size' /><span class='ratio-count'>3</span>) --> OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `
+        flowchart LR
+        OilWell(<img src='${oilWellIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
+        OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        OilWell --> OilPowerPlant
+        `
       },
       {
         productionChain: 'oilTanker',
-        mermaidDefinition: `flowchart LR; OilTanker(<img src='${oilTankerIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>2-3</span>)`
+        mermaidDefinition: `
+        flowchart LR
+        OilTanker(<img src='${oilTankerIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>2-3</span>)
+        OilTanker --> OilPowerPlant
+        `
       },
       {
         productionChain: 'gasPowerPlant',
-        mermaidDefinition: `flowchart LR; Gas(<img src='${gasIcon}' class='icon-size' /><span class='ratio-count'>6</span>) --> GasPlant(<img src='${gasPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+        mermaidDefinition: `
+        flowchart LR
+        Gas(<img src='${gasIcon}' class='icon-size' /><span class='ratio-count'>6</span>)
+        GasPlant(<img src='${gasPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Gas --> GasPlant
+        `
       }
     ]
   },