@extends('layouts.app')
@section('title','ERD-Editor - Datenbankmodell online bauen | kotsch.tech')
@section('meta_description','ERD-Editor online: Tabellen, Spalten, Primaer- und Fremdschluessel, Beziehungen, SQL und JSON lokal im Browser erstellen.')
@section('meta_extra')
<meta name="keywords" content="ERD Editor, Entity Relationship Diagram, Datenbank Schema, SQL Export, Tabellen modellieren">
@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}.erd-wrap{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px}.erd-bar{display:flex;gap:8px;flex-wrap:wrap}.erd-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;box-shadow:var(--shadow);touch-action:none}.erd-world{position:absolute;left:0;top:0;width:3000px;height:2200px;transform-origin:0 0}.erd-table{position:absolute;width:230px;background:#fff;border:2px solid #0f172a;border-radius:12px;box-shadow:0 18px 40px -24px #0f172a;overflow:hidden}.erd-head{background:#0f172a;color:#fff;padding:10px 12px;font-weight:900;cursor:grab;display:flex;justify-content:space-between;align-items:center}.erd-body{padding:8px}.erd-field{display:flex;gap:7px;align-items:center;padding:5px 4px;border-bottom:1px solid #e2e8f0;font-family:'JetBrains Mono',monospace;font-size:.8rem}.erd-field:last-child{border-bottom:0}.badge{font-size:.62rem;font-weight:900;border-radius:5px;padding:2px 4px;background:#dbeafe;color:#1d4ed8}.fk{background:#dcfce7;color:#15803d}.erd-side{display:grid;gap:12px}.erd-list{max-height:430px;overflow:auto}.erd-rel{padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px;font-size:.86rem}.erd-svg{position:absolute;left:0;top:0;width:3000px;height:2200px;pointer-events:none}.erd-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)}.mini{font-size:.8rem;color:var(--muted)}@media(max-width:980px){.tool-container.ae-wide{width:min(100% - 16px,100%)!important}.erd-wrap{grid-template-columns:1fr}.erd-board{height:min(68vh,620px);min-height:430px}.erd-table{width:210px}.erd-bar{flex-wrap:nowrap;overflow-x:auto}.erd-bar>*{flex:0 0 auto}.erd-bar .t-btn{min-height:44px}.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-database"></i> Developer</span><h1 class="tool-h1">ERD<span>-Editor.</span></h1><p class="tool-sub">Tabellen, Spalten und Beziehungen grafisch modellieren. Alles lokal, exportierbar als SQL oder JSON.</p></div>
<div class="t-panel"><div class="erd-bar">
<button class="t-btn accent sm" onclick="addTable()"><i class="fas fa-plus"></i> Tabelle</button>
<button class="t-btn ghost sm" onclick="addField()"><i class="fas fa-list"></i> Spalte</button>
<button class="t-btn ghost sm" onclick="addRelation()"><i class="fas fa-link"></i> Beziehung</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="exportSql()"><i class="fas fa-file-code"></i> SQL</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="erd-wrap">
<div class="erd-board" id="board"><div class="erd-world" id="world"><svg class="erd-svg" id="links"></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="erd-side">
<div class="t-panel"><div class="t-panel-title"><i class="fas fa-table"></i> Modell</div><div id="model-list" class="erd-list"></div><p class="mini">Tabelle anklicken = Auswahl. Kopf ziehen = verschieben. Beziehungen per Button.</p></div>
<div class="t-panel"><div class="t-panel-title"><i class="fas fa-code"></i> Export</div><textarea id="out" class="erd-out" readonly></textarea></div>
</div></div>
@include('tools._ads_banner')
</div></div>
<script>
let model={tables:[],rels:[]},sel=null,drag=null,view={x:0,y:0,k:1};const board=document.getElementById('board'),world=document.getElementById('world'),links=document.getElementById('links');
const uid=()=>Math.random().toString(36).slice(2,8);const 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,links].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('erd-v1',JSON.stringify(model))}
function load(){try{model=JSON.parse(localStorage.getItem('erd-v1'))||model}catch(e){} if(!model.tables.length)demo(false); render()}
function addTable(name){const n=name||prompt('Tabellenname','users');if(!n)return;model.tables.push({id:uid(),name:n,x:60+model.tables.length*35,y:70+model.tables.length*30,fields:[{n:'id',t:'INT',pk:true},{n:'name',t:'VARCHAR(120)'}]});sel=model.tables.at(-1).id;render();save()}
function addField(){const t=getSel();if(!t)return alert('Erst Tabelle waehlen.');const raw=prompt('Spalte: name TYPE, PK/FK optional','email VARCHAR(180)');if(!raw)return;const p=raw.trim().split(/\s+/);t.fields.push({n:p[0],t:p[1]||'TEXT',pk:/\bPK\b/i.test(raw),fk:/\bFK\b/i.test(raw)});render();save()}
function addRelation(){if(model.tables.length<2)return alert('Mindestens 2 Tabellen.');const from=prompt('Von Tabelle',model.tables[0].name);const to=prompt('Zu Tabelle',model.tables[1].name);const a=model.tables.find(t=>t.name===from),b=model.tables.find(t=>t.name===to);if(!a||!b)return alert('Tabelle nicht gefunden.');model.rels.push({id:uid(),from:a.id,to:b.id,label:prompt('Label','1:n')||'1:n'});render();save()}
function getSel(){return model.tables.find(t=>t.id===sel)}
function render(){world.querySelectorAll('.erd-table').forEach(e=>e.remove());model.tables.forEach(t=>{const d=document.createElement('div');d.className='erd-table';d.style.left=t.x+'px';d.style.top=t.y+'px';d.dataset.id=t.id;d.innerHTML=`<div class="erd-head">${esc(t.name)}<span>${sel===t.id?'*':''}</span></div><div class="erd-body">${t.fields.map(f=>`<div class="erd-field"><span>${esc(f.n)}</span><span class="mini">${esc(f.t)}</span>${f.pk?'<b class="badge">PK</b>':''}${f.fk?'<b class="badge fk">FK</b>':''}</div>`).join('')}</div>`;d.onclick=e=>{sel=t.id;render()};d.querySelector('.erd-head').onpointerdown=e=>{const p=worldPoint(e);drag={kind:'table',id:t.id,dx:p.x-t.x,dy:p.y-t.y};d.setPointerCapture(e.pointerId)};world.appendChild(d)});renderLinks();renderList();applyView()}
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 t=model.tables.find(x=>x.id===drag.id),p=worldPoint(e);t.x=p.x-drag.dx;t.y=p.y-drag.dy;render();save()});window.addEventListener('pointerup',()=>drag=null);
function renderLinks(){links.innerHTML=model.rels.map(r=>{const a=model.tables.find(t=>t.id===r.from),b=model.tables.find(t=>t.id===r.to);if(!a||!b)return'';const x1=a.x+230,y1=a.y+45,x2=b.x,y2=b.y+45,mx=(x1+x2)/2,my=(y1+y2)/2;return`<path d="M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}" fill="none" stroke="#10b981" stroke-width="2"/><text x="${mx}" y="${my-6}" font-size="12" font-weight="800" fill="#0f172a">${esc(r.label)}</text>`}).join('')}
function renderList(){document.getElementById('model-list').innerHTML=model.tables.map(t=>`<div class="erd-rel"><b>${esc(t.name)}</b><br>${t.fields.map(f=>esc(f.n+': '+f.t+(f.pk?' PK':'')+(f.fk?' FK':''))).join('<br>')}</div>`).join('')+model.rels.map(r=>{const a=model.tables.find(t=>t.id===r.from),b=model.tables.find(t=>t.id===r.to);return`<div class="erd-rel"><i class="fas fa-link"></i> ${a?.name||'?'} -> ${b?.name||'?'} (${esc(r.label)})</div>`}).join('')}
function exportSql(){document.getElementById('out').value=model.tables.map(t=>`CREATE TABLE ${t.name} (\n`+t.fields.map(f=>`  ${f.n} ${f.t}${f.pk?' PRIMARY KEY':''}`).join(',\n')+`\n);`).join('\n\n')}
function exportJson(){document.getElementById('out').value=JSON.stringify(model,null,2)}
function clearAll(){if(confirm('Alles loeschen?')){model={tables:[],rels:[]};sel=null;render();save()}}
function demo(doSave=true){model={tables:[{id:'u',name:'users',x:70,y:80,fields:[{n:'id',t:'INT',pk:true},{n:'email',t:'VARCHAR(180)'},{n:'name',t:'VARCHAR(120)'}]},{id:'o',name:'orders',x:390,y:130,fields:[{n:'id',t:'INT',pk:true},{n:'user_id',t:'INT',fk:true},{n:'total',t:'DECIMAL(10,2)'}]}],rels:[{id:'r1',from:'u',to:'o',label:'1:n'}]};sel='u';if(doSave)save();render();exportSql()}load();
</script>

@include('tools._seo_content', ['toolSlug' => 'erd-editor', 'toolName' => 'ERD-Editor'])

@endsection