<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mermaid Diagram</title>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
// Initialize Mermaid with the correct configuration
mermaid.initialize({
startOnLoad: true,
theme: "forest", // Set the theme to "forest"
flowchart: {
curve: 'basis', // For smoother edges
},
themeVariables: {
handDrawn: true, // Enable hand-drawn look
fontFamily: 'Comic Sans MS', // Optional: to make the font match a more "hand-drawn" style
},
width: '100%', // Ensure the diagram uses max available width
height: '600px' // Limit the height to emphasize horizontal space
});
</script>
</head>
<body>
<!-- Mermaid Diagram -->
<div class="mermaid">
flowchart LR
A["The Customer"] -- CHF/EUR/... --> B("CLOUD MARKET PLACE<br>Discount based on position<br>in TF Liquidity Pool.")
B -- TFT or INCA --> C{"Proof Of Utilization"}
G["FARMING GRANTS<br>40m Tokens / Month"] --> I{"Proof Of Capacity<br>uptime, location, ..."}
I --> D["ThreeFold Farmers<br>Can be Tier-S Datacenters"]
C -- 80% --> D
C -- 10% --> E["ThreeFold Cooperative"] & F["Validators<br>Commercial Partners"]
D -- license fees --> H["TF9<br>ThreeFold Belgium"]
X["Autonomous AI & Cloud Solutions"] --> B
A --> X
X -- Margin --> Y["ThreeFold Dubai"]
style H fill:#BBDEFB
style Y fill:#BBDEFB
style D fill:#BBDEFB
style F fill:#BBDEFB
</div>
</body>
</html>