@extends('layouts.app')
@section('title','API-Flow-Designer - System- und Datenfluss modellieren | kotsch.tech')
@section('meta_description','API-Flow-Designer online: Services, Datenbanken, Queues und externe APIs als Systemdiagramm modellieren, Latenzen und Risiken auswerten.')
@section('meta_extra')
<meta name="keywords" content="API Flow Designer, System Design, Microservices, Datenfluss, Architektur Diagramm">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.kt-side-ad,.side-ad{display:none!important}.kt-banner-ad{display:block!important}.ae-wide{width:min(100% - 32px,1400px)!important}.af-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px}.af-board{height:760px;border:1.5px solid var(--line);border-radius:16px;background:radial-gradient(circle at 1px 1px,#e2e8f0 1px,transparent 1px) 0 0/24px 24px,#fff;position:relative;overflow:hidden;touch-action:none;box-shadow:var(--shadow)}.af-world{position:absolute;left:0;top:0;width:3000px;height:2200px;transform-origin:0 0}.af-node{position:absolute;width:170px;background:#fff;border:2px solid #0f172a;border-radius:12px;padding:10px;box-shadow:0 16px 34px -24px #0f172a;cursor:pointer}.af-node.api{border-color:#2563eb}.af-node.db{border-color:#7c3aed}.af-node.queue{border-color:#f59e0b}.af-node.ext{border-color:#ef4444}.af-node.sel{outline:4px solid rgba(16,185,129,.25)}.af-title{font-weight:900}.af-meta{font-size:.72rem;color:var(--muted);margin-top:4px}.af-svg{position:absolute;left:0;top:0;width:3000px;height:2200px;pointer-events:none}.af-bar{display:flex;gap:8px;flex-wrap:wrap}.af-side{display:grid;gap:12px}.af-card{padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px}.af-out{width:100%;min-height:240px;font-family:'JetBrains Mono',monospace;font-size:.78rem}.canvas-controls{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:5}.cc-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;box-shadow:0 2px 8px -2px rgba(15,23,42,.16)}.cc-btn:hover{border-color:var(--accent);color:var(--accent)}@media(max-width:980px){.tool-container.ae-wide{width:min(100% - 16px,100%)!important}.af-grid{grid-template-columns:1fr}.af-board{height:min(68vh,620px);min-height:420px}.af-bar{flex-wrap:nowrap;overflow-x:auto}.af-bar>*{flex:0 0 auto}.af-bar .t-btn{min-height:44px}.af-node{width:155px}.canvas-controls{flex-direction:row;top:10px;right:10px;bottom:auto}.cc-btn{min-width:44px;min-height:44px}}
</style>
<div class="tool-page"><div class="tool-container ae-wide">
<div class="tool-header"><span class="t-tag"><i class="fas fa-route"></i> Developer</span><h1 class="tool-h1">API-Flow<span>-Designer.</span></h1><p class="tool-sub">Systemflüsse modellieren: Services, Datenbanken, Queues, externe APIs, Latenzen und Risiken.</p></div>
<div class="t-panel"><div class="af-bar">
<button class="t-btn accent sm" onclick="addNode('api')"><i class="fas fa-server"></i> Service</button><button class="t-btn ghost sm" onclick="addNode('db')"><i class="fas fa-database"></i> DB</button><button class="t-btn ghost sm" onclick="addNode('queue')"><i class="fas fa-inbox"></i> Queue</button><button class="t-btn ghost sm" onclick="addNode('ext')"><i class="fas fa-cloud"></i> Extern</button><button class="t-btn ghost sm" onclick="linkMode=!linkMode;from=null"><i class="fas fa-link"></i> Verbinden</button><button class="t-btn ghost sm" onclick="demo()"><i class="fas fa-wand-magic-sparkles"></i> Demo</button><button class="t-btn ghost sm" onclick="exportMd()"><i class="fas fa-file-lines"></i> Markdown</button><button class="t-btn ghost sm" onclick="exportJson()"><i class="fas fa-download"></i> JSON</button><button class="t-btn ghost sm danger" onclick="clearAll()"><i class="fas fa-trash"></i></button>
</div></div>
<div class="af-grid"><div class="af-board" id="board"><div class="af-world" id="world"><svg class="af-svg" id="svg"></svg></div><div class="canvas-controls"><button class="cc-btn" onclick="zoom(1.2)" title="Zoom +"><i class="fas fa-plus"></i></button><button class="cc-btn" onclick="zoom(1/1.2)" title="Zoom -"><i class="fas fa-minus"></i></button><button class="cc-btn" onclick="resetView()" title="Ansicht reset"><i class="fas fa-crosshairs"></i></button></div></div><div class="af-side"><div class="t-panel"><div class="t-panel-title"><i class="fas fa-chart-line"></i> Analyse</div><div id="info"></div></div><div class="t-panel"><div class="t-panel-title"><i class="fas fa-code"></i> Export</div><textarea id="out" class="af-out" readonly></textarea></div></div></div>
@include('tools._ads_banner')
</div></div>
<script>
let m={nodes:[],links:[]},sel=null,drag=null,linkMode=false,from=null,view={x:0,y:0,k:1};const board=document.getElementById('board'),world=document.getElementById('world'),svg=document.getElementById('svg');const uid=()=>Math.random().toString(36).slice(2,8),esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
function applyView(){world.style.transform=`translate(${view.x}px,${view.y}px) scale(${view.k})`}
function boardPoint(e){const r=board.getBoundingClientRect();return{x:e.clientX-r.left,y:e.clientY-r.top}}
function worldPoint(e){const p=boardPoint(e);return{x:(p.x-view.x)/view.k,y:(p.y-view.y)/view.k}}
function zoom(factor,anchor){const p=anchor||{x:board.clientWidth/2,y:board.clientHeight/2};const wx=(p.x-view.x)/view.k,wy=(p.y-view.y)/view.k;view.k=Math.max(.3,Math.min(3,view.k*factor));view.x=p.x-wx*view.k;view.y=p.y-wy*view.k;applyView()}
function resetView(){view={x:0,y:0,k:1};applyView()}
board.addEventListener('wheel',e=>{e.preventDefault();zoom(e.deltaY<0?1.1:1/1.1,boardPoint(e))},{passive:false});
board.addEventListener('pointerdown',e=>{if(![board,world,svg].includes(e.target))return;drag={kind:'pan',sx:e.clientX,sy:e.clientY,ox:view.x,oy:view.y};board.setPointerCapture(e.pointerId)});
function save(){localStorage.setItem('api-flow-v1',JSON.stringify(m))}
function load(){try{m=JSON.parse(localStorage.getItem('api-flow-v1'))||m}catch(e){} if(!m.nodes.length)demo(false);render()}
function addNode(type){const name=prompt('Name',type==='api'?'Auth API':type==='db'?'Postgres':type==='queue'?'Jobs Queue':'Stripe');if(!name)return;m.nodes.push({id:uid(),type,name,x:70+m.nodes.length*35,y:80+m.nodes.length*40,lat:type==='db'?12:type==='queue'?35:type==='ext'?180:45,risk:type==='ext'?'high':'med'});sel=m.nodes.at(-1).id;render();save()}
function node(id){return m.nodes.find(n=>n.id===id)}
function click(id){if(linkMode){if(!from){from=id;sel=id}else if(from!==id){m.links.push({id:uid(),from,to:id,label:prompt('Call/Topic','HTTP')||'HTTP'});from=null;save()}render();return}sel=id;render()}
function render(){world.querySelectorAll('.af-node').forEach(x=>x.remove());m.nodes.forEach(n=>{const d=document.createElement('div');d.className=`af-node ${n.type} ${sel===n.id?'sel':''}`;d.style.left=n.x+'px';d.style.top=n.y+'px';d.innerHTML=`<div class="af-title"><i class="fas ${icon(n.type)}"></i> ${esc(n.name)}</div><div class="af-meta">${n.type.toUpperCase()} · ${n.lat} ms · Risiko ${n.risk}</div>`;d.onclick=e=>{e.stopPropagation();click(n.id)};d.ondblclick=e=>edit(n.id);d.onpointerdown=e=>{const p=worldPoint(e);drag={kind:'node',id:n.id,dx:p.x-n.x,dy:p.y-n.y};d.setPointerCapture(e.pointerId)};world.appendChild(d)});draw();analyse();applyView()}
function icon(t){return t==='db'?'fa-database':t==='queue'?'fa-inbox':t==='ext'?'fa-cloud':'fa-server'}
window.addEventListener('pointermove',e=>{if(!drag)return;if(drag.kind==='pan'){view.x=drag.ox+(e.clientX-drag.sx);view.y=drag.oy+(e.clientY-drag.sy);applyView();return}const n=node(drag.id),p=worldPoint(e);n.x=p.x-drag.dx;n.y=p.y-drag.dy;render()})
window.addEventListener('pointerup',()=>{if(drag)save();drag=null})
function draw(){svg.innerHTML=m.links.map(l=>{const a=node(l.from),b=node(l.to);if(!a||!b)return'';const x1=a.x+170,y1=a.y+35,x2=b.x,y2=b.y+35,mx=(x1+x2)/2;return`<path d="M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}" fill="none" stroke="#10b981" stroke-width="2.5"/><text x="${mx}" y="${(y1+y2)/2-8}" font-size="12" font-weight="800">${esc(l.label)}</text>`}).join('')}
function edit(id){const n=node(id);const raw=prompt('Name; Latenz ms; Risiko low/med/high',`${n.name}; ${n.lat}; ${n.risk}`);if(!raw)return;const p=raw.split(';').map(s=>s.trim());n.name=p[0]||n.name;n.lat=Number(p[1])||n.lat;n.risk=p[2]||n.risk;save();render()}
function analyse(){const total=m.nodes.reduce((s,n)=>s+n.lat,0);const high=m.nodes.filter(n=>n.risk==='high').length;document.getElementById('info').innerHTML=`<div class="af-card"><b>Knoten:</b> ${m.nodes.length}<br><b>Verbindungen:</b> ${m.links.length}<br><b>Serielle Latenz grob:</b> ${total} ms<br><b>High-Risk Abhaengigkeiten:</b> ${high}</div>`+m.nodes.map(n=>`<div class="af-card"><b>${esc(n.name)}</b><br>${n.type}, ${n.lat} ms, Risiko ${n.risk}</div>`).join('')}
function exportJson(){document.getElementById('out').value=JSON.stringify(m,null,2)}
function exportMd(){document.getElementById('out').value='# API Flow\n\n## Nodes\n'+m.nodes.map(n=>`- ${n.name} (${n.type}, ${n.lat} ms, risk ${n.risk})`).join('\n')+'\n\n## Links\n'+m.links.map(l=>`- ${node(l.from)?.name||'?'} -> ${node(l.to)?.name||'?'}: ${l.label}`).join('\n')}
function clearAll(){if(confirm('Alles loeschen?')){m={nodes:[],links:[]};save();render()}}
function demo(s=true){m={nodes:[{id:'web',type:'api',name:'Frontend',x:70,y:120,lat:25,risk:'low'},{id:'api',type:'api',name:'Backend API',x:310,y:120,lat:55,risk:'med'},{id:'db',type:'db',name:'Postgres',x:560,y:90,lat:18,risk:'med'},{id:'pay',type:'ext',name:'Payment API',x:560,y:220,lat:220,risk:'high'}],links:[{from:'web',to:'api',label:'REST'},{from:'api',to:'db',label:'SQL'},{from:'api',to:'pay',label:'HTTPS'}]};sel='api';if(s)save();render();exportMd()}load();
</script>

@include('tools._seo_content', ['toolSlug' => 'api-flow-designer', 'toolName' => 'API-Flow-Designer'])

@endsection