283 lines
8.4 KiB
HTML
283 lines
8.4 KiB
HTML
<!-- test321 -->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Home-Lab diagram – live editor</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style>
|
||
:root{--bg:#f7f9fc;--text:#222;--accent:#0d6efd}
|
||
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;font-size:14px;background:var(--bg);color:var(--text)}
|
||
header{background:var(--accent);color:#fff;padding:.6rem 1rem;font-weight:600;display:flex;gap:.5rem;align-items:center}
|
||
header button{padding:.2rem .6rem;border:none;border-radius:4px;background:#fff;color:var(--accent);cursor:pointer}
|
||
.wrap{display:flex;height:calc(100vh - 40px)}
|
||
.panel{flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid #ddd;transition:flex .3s ease}
|
||
.panel:last-child{border:none}
|
||
h3{margin:.4rem .6rem;font-size:1rem}
|
||
#src{flex:1;padding:.5rem;overflow:auto;background:#1e1e1e;color:#d4d4d4;font-family:"Consolas","Monaco",monospace;border:none;outline:none;white-space:pre-wrap}
|
||
#preview{flex:1;padding:.5rem;overflow:auto;background:#fff}
|
||
/* IMPORTANT: Let the SVG flow naturally and scroll if needed */
|
||
#preview svg{display:block;margin:0 auto;max-width:100%;height:auto}
|
||
#error{color:#d32f2f;background:#fff3cd;padding:.5rem;margin:.5rem;border-left:4px solid #d32f2f;display:none}
|
||
#zoomVal{margin-left:.5rem;font-size:.9rem;color:#fff}
|
||
/* collapsed state */
|
||
#srcPanel.collapsed{flex:0}
|
||
#srcPanel.collapsed #src{display:none}
|
||
/* Debug: uncomment to see element bounds */
|
||
/* #preview{outline:2px solid red} #preview svg{outline:2px solid blue} */
|
||
</style>
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<button id="toggleBtn" onclick="togglePanel()">🗔 Hide source</button>
|
||
Home-Lab diagram – live Mermaid editor
|
||
<button onclick="saveSVG()">💾 SVG</button>
|
||
<button onclick="savePNG()">💾 PNG</button>
|
||
<button onclick="reset()">🔄 Reset</button>
|
||
<label style="margin-left:auto;display:flex;align-items:center;gap:.3rem;color:#fff">
|
||
Zoom: <input type="range" id="zoom" min="50" max="300" value="100" style="width:100px"><span id="zoomVal">100%</span>
|
||
</label>
|
||
</header>
|
||
|
||
<div class="wrap">
|
||
<div class="panel" id="srcPanel">
|
||
<h3>Source (edit here)</h3>
|
||
<textarea id="src" spellcheck="false"></textarea>
|
||
</div>
|
||
<div class="panel">
|
||
<h3>Live preview</h3>
|
||
<div id="preview"></div>
|
||
<div id="error"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const DEFAULT = `flowchart LR
|
||
%% ============ Internet ============
|
||
subgraph WAN[🌐 Internet / Cloud]
|
||
extDNS[(📡 Public DNS)]
|
||
extGit[(☁️ Externe registries / Git)]
|
||
end
|
||
|
||
%% ============ LAN 192.168.1.x ============
|
||
subgraph LAN[🏠 LAN 192.168.1.0/24]
|
||
hub[🛜 Router / Gateway\\nhub.lan\\n192.168.1.1]
|
||
|
||
subgraph core[💻 Hoofdserver / Desktop\\nTour / hephaestus / ollama / dokku.lan\\n192.168.1.159]
|
||
traefik[🚦 Traefik\\nReverse Proxy]
|
||
gitea[📚 Gitea\\n git.appmodel.nl]
|
||
dokku[🐳 Dokku\\nPaaS / build]
|
||
auctionFE[🧱 Auction Frontend\\n auction.appmodel.nl]
|
||
aupiAPI[🧱 Auction Backend API\\n aupi.appmodel.nl]
|
||
mi50[🧠 MI50 / Ollama\\nAI workloads]
|
||
end
|
||
|
||
subgraph infraDNS[🧭 Infra & DNS\\nodroid / dns.lan\\n192.168.1.163]
|
||
adguard[🧭 AdGuard Home\\nDNS / *.lan / *.appmodel.nl]
|
||
artifactory[📦 Artifactory]
|
||
runner[⚙️ Build runners]
|
||
end
|
||
|
||
subgraph ha[🏡 Home Automation\\nha.lan\\n192.168.1.193]
|
||
hass[🏠 Home Assistant]
|
||
end
|
||
|
||
atlas[🧱 atlas.lan\\n192.168.1.100\\n]
|
||
|
||
iot1[📺 hof-E402NA\\n192.168.1.214]
|
||
iot2[🎧 S380HB\\n192.168.1.59]
|
||
iot3[📟 ecb5faa56c90\\n192.168.1.49]
|
||
iot4[❓ Unknown\\n192.168.1.240]
|
||
end
|
||
|
||
%% ============ Tether subnet ============
|
||
subgraph TETHER[📶 Tether subnet 192.168.137.0/24]
|
||
hermes[🛰️ hermes.lan\\n192.168.137.239\\nworker / node]
|
||
plato[🛰️ plato.lan\\n192.168.137.163\\nworker / node]
|
||
end
|
||
|
||
%% ============ Verkeer ============
|
||
|
||
%% Basis LAN connecties
|
||
hub --- core
|
||
hub --- infraDNS
|
||
hub --- ha
|
||
hub --- atlas
|
||
hub --- iot1
|
||
hub --- iot2
|
||
hub --- iot3
|
||
hub --- iot4
|
||
|
||
%% WAN koppeling
|
||
hub --> WAN
|
||
infraDNS --> WAN
|
||
|
||
%% DNS-resolutie
|
||
core --> adguard
|
||
ha --> adguard
|
||
atlas --> adguard
|
||
TETHER --> adguard
|
||
|
||
%% Websites / reverse proxy
|
||
extDNS --> traefik
|
||
traefik --> gitea
|
||
traefik --> auctionFE
|
||
traefik --> aupiAPI
|
||
traefik --> dokku
|
||
|
||
%% App flow
|
||
auctionFE --> aupiAPI
|
||
aupiAPI --> adguard
|
||
|
||
%% AI workloads
|
||
core --> mi50
|
||
|
||
%% Tether workers
|
||
core --- TETHER
|
||
`;
|
||
|
||
function getStorage(key, fallback) {
|
||
try { return localStorage.getItem(key) ?? fallback; } catch { return fallback; }
|
||
}
|
||
function setStorage(key, val) {
|
||
try { localStorage.setItem(key, val); } catch {}
|
||
}
|
||
|
||
const srcEl = document.getElementById('src');
|
||
const errEl = document.getElementById('error');
|
||
const zoomEl = document.getElementById('zoom');
|
||
const zoomVal = document.getElementById('zoomVal');
|
||
const srcPanel = document.getElementById('srcPanel');
|
||
const toggleBtn = document.getElementById('toggleBtn');
|
||
|
||
srcEl.value = getStorage('labDiagram', DEFAULT);
|
||
if (getStorage('panelCollapsed', 'false') === 'true') {
|
||
srcPanel.classList.add('collapsed');
|
||
toggleBtn.textContent = '🗔 Show source';
|
||
}
|
||
|
||
function togglePanel() {
|
||
srcPanel.classList.toggle('collapsed');
|
||
const collapsed = srcPanel.classList.contains('collapsed');
|
||
toggleBtn.textContent = collapsed ? '🗔 Show source' : '🗔 Hide source';
|
||
setStorage('panelCollapsed', collapsed);
|
||
}
|
||
|
||
mermaid.initialize({startOnLoad: false, theme: 'default'});
|
||
|
||
function render() {
|
||
const src = srcEl.value;
|
||
setStorage('labDiagram', src);
|
||
errEl.style.display = 'none';
|
||
|
||
const preview = document.getElementById('preview');
|
||
preview.innerHTML = '';
|
||
|
||
const mermaidDiv = document.createElement('div');
|
||
mermaidDiv.className = 'mermaid';
|
||
mermaidDiv.textContent = src;
|
||
preview.appendChild(mermaidDiv);
|
||
|
||
// Render and fix sizing
|
||
mermaid.init(undefined, mermaidDiv).then(() => {
|
||
const svg = preview.querySelector('svg');
|
||
if (svg) {
|
||
// CRITICAL: Ensure SVG has viewBox for proper sizing
|
||
if (!svg.hasAttribute('viewBox')) {
|
||
const {width, height} = svg.getBBox();
|
||
svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
|
||
}
|
||
svg.style.maxWidth = '100%';
|
||
svg.style.height = 'auto';
|
||
applyZoom();
|
||
}
|
||
}).catch(e => {
|
||
errEl.textContent = 'Mermaid error: ' + e.message;
|
||
errEl.style.display = 'block';
|
||
});
|
||
}
|
||
|
||
srcEl.addEventListener('input', () => {
|
||
clearTimeout(srcEl._t);
|
||
srcEl._t = setTimeout(render, 300);
|
||
});
|
||
|
||
zoomEl.addEventListener('input', () => {
|
||
zoomVal.textContent = zoomEl.value + '%';
|
||
applyZoom();
|
||
});
|
||
|
||
function applyZoom() {
|
||
const svg = document.querySelector('#preview svg');
|
||
if (svg) {
|
||
svg.style.transform = `scale(${zoomEl.value / 100})`;
|
||
}
|
||
}
|
||
|
||
function reset() {
|
||
if (confirm('Reset to default diagram?')) {
|
||
srcEl.value = DEFAULT;
|
||
zoomEl.value = 100;
|
||
zoomVal.textContent = '100%';
|
||
setStorage('labDiagram', DEFAULT);
|
||
render();
|
||
}
|
||
}
|
||
|
||
function saveSVG() {
|
||
const svg = document.querySelector('#preview svg');
|
||
if (!svg) return alert('Nothing to save yet.');
|
||
|
||
const clone = svg.cloneNode(true);
|
||
clone.removeAttribute('style');
|
||
clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
||
|
||
const blob = new Blob([clone.outerHTML], {type: 'image/svg+xml'});
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'home-lab.svg';
|
||
a.click();
|
||
setTimeout(() => URL.revokeObjectURL(url), 100);
|
||
}
|
||
|
||
function savePNG() {
|
||
const svg = document.querySelector('#preview svg');
|
||
if (!svg) return alert('Nothing to save yet.');
|
||
|
||
const {width, height} = svg.getBBox();
|
||
const canvasW = Math.max(width, 1200);
|
||
const canvasH = Math.max(height, 800);
|
||
|
||
const svgData = new XMLSerializer().serializeToString(svg);
|
||
const img = new Image();
|
||
|
||
img.onload = () => {
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = canvasW;
|
||
canvas.height = canvasH;
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
ctx.fillStyle = 'white';
|
||
ctx.fillRect(0, 0, canvasW, canvasH);
|
||
ctx.drawImage(img, 0, 0, canvasW, canvasH);
|
||
|
||
canvas.toBlob(blob => {
|
||
const a = document.createElement('a');
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = 'home-lab.png';
|
||
a.click();
|
||
});
|
||
};
|
||
|
||
img.onerror = () => alert('PNG conversion failed. Try SVG instead.');
|
||
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgData);
|
||
}
|
||
|
||
render();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
<!-- Auto-deployed at $(date122`) -->
|