Skip to content

Instantly share code, notes, and snippets.

@wd15
Last active February 22, 2026 01:21
Show Gist options
  • Select an option

  • Save wd15/272713e793e1310f9770370ea12aba50 to your computer and use it in GitHub Desktop.

Select an option

Save wd15/272713e793e1310f9770370ea12aba50 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AM Digital Twin Architecture - Two-Way DA Routing v7</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.diagram-container {
width: 100%;
max-width: 1600px;
aspect-ratio: 4 / 3;
background-color: transparent;
}
svg {
width: 100%;
height: 100%;
}
/* Scaled up fonts for 48-inch poster readability */
.title { font-size: 24px; fill: #666; font-weight: bold; letter-spacing: 2px; }
.node-main { font-size: 22px; font-weight: bold; fill: #111; }
.node-sub { font-size: 18px; font-style: italic; fill: #444; }
.edge-label {
font-size: 20px;
fill: #333;
font-weight: 700;
paint-order: stroke;
stroke: #ffffff;
stroke-width: 8px;
stroke-linecap: round;
stroke-linejoin: round;
}
.ai-edge-label {
font-size: 20px;
fill: #7b1fa2;
font-weight: bold;
paint-order: stroke;
stroke: #ffffff;
stroke-width: 8px;
}
</style>
</head>
<body>
<div class="diagram-container">
<svg viewBox="0 0 1600 1150" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow-solid" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#444" />
</marker>
<marker id="arrow-dashed" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#888" />
</marker>
<marker id="arrow-ai-end" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#7b1fa2" />
</marker>
</defs>
<rect x="680" y="20" width="400" height="180" fill="#faf8fc" stroke="#ce93d8" stroke-width="3" stroke-dasharray="8,6" rx="10" />
<text x="880" y="55" text-anchor="middle" class="title">AI ORCHESTRATION</text>
<rect x="180" y="270" width="1240" height="340" fill="#f0f8ff" stroke="#64b5f6" stroke-width="3" stroke-dasharray="8,6" rx="10" />
<text x="800" y="305" text-anchor="middle" class="title">DIGITAL TWIN</text>
<rect x="450" y="670" width="760" height="180" fill="#fffaf0" stroke="#ffab91" stroke-width="3" stroke-dasharray="8,6" rx="10" />
<text x="830" y="710" text-anchor="middle" class="title">CONTROL</text>
<path d="M 365 120 L 740 120" fill="none" stroke="#444" stroke-width="4" marker-end="url(#arrow-solid)" />
<path d="M 300 185 L 300 390" fill="none" stroke="#888" stroke-width="4" stroke-dasharray="6,6" marker-end="url(#arrow-dashed)" />
<path d="M 880 180 L 880 240" fill="none" stroke="#7b1fa2" stroke-width="4" stroke-dasharray="8,4" />
<path d="M 880 240 L 200 240 L 200 270" fill="none" stroke="#7b1fa2" stroke-width="4" stroke-dasharray="8,4" marker-end="url(#arrow-ai-end)" />
<path d="M 880 240 L 1380 240 L 1380 760 L 1140 760" fill="none" stroke="#7b1fa2" stroke-width="4" stroke-dasharray="8,4" marker-end="url(#arrow-ai-end)" />
<text x="880" y="230" text-anchor="middle" class="ai-edge-label">Workflow Orchestration</text>
<path d="M 390 460 L 490 460" fill="none" stroke="#888" stroke-width="4" stroke-dasharray="6,6" marker-end="url(#arrow-dashed)" />
<text x="440" y="445" text-anchor="middle" class="edge-label">Model Reduction</text>
<path d="M 580 410 L 580 345 Q 580 330 595 330 L 1205 330 Q 1220 330 1220 345 L 1220 410" fill="none" stroke="#888" stroke-width="4" stroke-dasharray="6,6" marker-end="url(#arrow-dashed)" />
<text x="900" y="322" text-anchor="middle" class="edge-label">Training</text>
<path d="M 660 430 L 750 430" fill="none" stroke="#888" stroke-width="4" stroke-dasharray="6,6" marker-end="url(#arrow-dashed)" />
<text x="705" y="415" text-anchor="middle" class="edge-label">Forecast</text>
<path d="M 750 490 L 660 490" fill="none" stroke="#444" stroke-width="4" marker-end="url(#arrow-solid)" />
<text x="705" y="520" text-anchor="middle" class="edge-label">State Nudge</text>
<path d="M 1130 430 L 1010 430" fill="none" stroke="#888" stroke-width="4" stroke-dasharray="6,6" marker-end="url(#arrow-dashed)" />
<text x="1070" y="415" text-anchor="middle" class="edge-label">Forecast</text>
<path d="M 1010 490 L 1125 490" fill="none" stroke="#444" stroke-width="4" marker-end="url(#arrow-solid)" />
<text x="1065" y="520" text-anchor="middle" class="edge-label">State Nudge</text>
<path d="M 1220 510 L 1220 630 L 640 630 L 640 730" fill="none" stroke="#444" stroke-width="5" marker-end="url(#arrow-solid)" />
<text x="930" y="620" text-anchor="middle" class="edge-label">Fast Prediction</text>
<path d="M 750 780 L 940 780" fill="none" stroke="#444" stroke-width="4" marker-end="url(#arrow-solid)" />
<path d="M 1000 820 L 910 920" fill="none" stroke="#444" stroke-width="4" marker-end="url(#arrow-solid)" />
<text x="980" y="880" text-anchor="middle" class="edge-label">Actuation</text>
<path d="M 880 930 L 880 585" fill="none" stroke="#444" stroke-width="5" marker-end="url(#arrow-solid)" />
<text x="860" y="880" text-anchor="end" class="edge-label">Observations (y)</text>
<circle cx="300" cy="120" r="55" fill="#e1bee7" stroke="#8e24aa" stroke-width="3" />
<text x="300" y="128" text-anchor="middle" class="node-main">USER</text>
<rect x="760" y="70" width="240" height="100" rx="8" fill="#f3e5f5" stroke="#8e24aa" stroke-width="3" />
<text x="880" y="115" text-anchor="middle" class="node-main">AI AGENT / MCP</text>
<text x="880" y="140" text-anchor="middle" class="node-sub">Orchestrator</text>
<rect x="220" y="410" width="160" height="100" rx="5" fill="#e0e0e0" stroke="#9e9e9e" stroke-width="3" stroke-dasharray="5,5" />
<text x="300" y="455" text-anchor="middle" class="node-main">HIGH-FIDELITY</text>
<text x="300" y="485" text-anchor="middle" class="node-sub">Baseline Models</text>
<rect x="510" y="410" width="140" height="100" rx="5" fill="#bbdefb" stroke="#1976d2" stroke-width="3" />
<text x="580" y="455" text-anchor="middle" class="node-main">ENSEMBLE</text>
<text x="580" y="485" text-anchor="middle" class="node-sub">ExaCA</text>
<circle cx="880" cy="460" r="115" fill="#c8e6c9" stroke="#388e3c" stroke-width="4" />
<text x="880" y="455" text-anchor="middle" class="node-main">DATA ASSIMILATION</text>
<text x="880" y="485" text-anchor="middle" class="node-sub">TorchDA / EnKF</text>
<rect x="1140" y="410" width="160" height="100" rx="5" fill="#bbdefb" stroke="#1976d2" stroke-width="3" />
<text x="1220" y="455" text-anchor="middle" class="node-main">SURROGATE</text>
<text x="1220" y="485" text-anchor="middle" class="node-sub">FNOs</text>
<polygon points="570,740 710,740 730,780 710,820 570,820 550,780" fill="#fff9c4" stroke="#fbc02d" stroke-width="3" />
<text x="640" y="788" text-anchor="middle" class="node-main">OPTIMIZER</text>
<rect x="960" y="740" width="160" height="80" rx="5" fill="#fff9c4" stroke="#fbc02d" stroke-width="3" />
<text x="1040" y="788" text-anchor="middle" class="node-main">CONTROLLER</text>
<rect x="800" y="930" width="160" height="100" rx="5" fill="#ffccbc" stroke="#e64a19" stroke-width="4" />
<text x="880" y="975" text-anchor="middle" class="node-main">AM MACHINE</text>
<text x="880" y="1005" text-anchor="middle" class="node-sub">Sensors</text>
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment