<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metaphor Diagram Loader</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
background-color: #f9f9fb;
color: #1a1a1a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.container {
background: #ffffff;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
max-width: 800px;
width: 100%;
}
h2 {
margin-top: 0;
color: #333;
}
#diagram-container {
margin-top: 1.5rem;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Metaphor Architecture Loader</h2>
<p>The diagram below is dynamically injected and rendered via an external JavaScript loader wrapper.</p>
<div id="diagram-container"></div>
</div>
<script>
(function() {
// 1. Define the Mermaid graph definition string
const mermaidGraphCode = `
graph TD
classDef redStyle fill:#ffcccc,stroke:#cc0000,stroke-width:2px,color:#000;
classDef purpleStyle fill:#e6ccff,stroke:#6600cc,stroke-width:2px,color:#000;
classDef neutralStyle fill:#f2f2f2,stroke:#666,stroke-width:2px,color:#000;
subgraph Binary_Trap ["The Old Paradigm"]
B1["Black (Absolute)"]:::neutralStyle --- B2["White (Absolute)"]:::neutralStyle
style Binary_Trap fill:#fafafa,stroke:#ccc,stroke-dasharray: 5 5
end
subgraph Advanced_Precision ["Metaphoring More Precise in Precision"]
R["RED METAPHOR
(Raw Energy, Impulse, Labor)"]:::redStyle
P["PURPLE METAPHORE
(Synthetic Vision, Majesty, Abstraction)"]:::purpleStyle
R ==>|"Serves, Feeds, & Propels"| P
Spectrum["Multi-Spectral Continuum (Beyond Binary)"]:::neutralStyle
P -.-> Spectrum
end
Binary_Trap -.->|"Replaced By"| Advanced_Precision
`;
// 2. Function to load external scripts dynamically (Mermaid.js CDN)
function loadScript(url, callback) {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
// 3. Main Loader Execution Logic
function initMetaphorLoader() {
// Select target container
const targetContainer = document.getElementById('diagram-container');
if (!targetContainer) return;
// Create wrapper element for Mermaid
const mermaidDiv = document.createElement('div');
mermaidDiv.className = 'mermaid';
mermaidDiv.textContent = mermaidGraphCode;
targetContainer.appendChild(mermaidDiv);
// Initialize Mermaid once loaded
if (window.mermaid) {
window.mermaid.initialize({ startOnLoad: false, theme: 'default' });
window.mermaid.run({
nodes: [mermaidDiv]
});
}
}
// Trigger script injection of Mermaid CDN and run loader
loadScript('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js', initMetaphorLoader);
})();
</script>
</body>
</html>
Comments
Post a Comment