diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte
index 56add3394..e26325267 100644
--- a/packages/web/src/designer/Designer.svelte
+++ b/packages/web/src/designer/Designer.svelte
@@ -9,7 +9,6 @@
   import cleanupDesignColumns from './cleanupDesignColumns';
   import _ from 'lodash';
   import createRef from '../utility/createRef';
-  import DesignerReference from './DesignerReference.svelte';
   import { writable } from 'svelte/store';
   import { tick } from 'svelte';
   import contextMenu from '../utility/contextMenu';
@@ -21,6 +20,7 @@
   export let database;
   export let menu;
   export let settings;
+  export let referenceComponent;
 
   let domCanvas;
 
@@ -272,7 +272,7 @@
           if (dst) newTables.push(dst);
         }
       }
-      
+
       return {
         ...current,
         tables: [
@@ -418,7 +418,7 @@
 
   <div class="canvas" bind:this={domCanvas} on:dragover={e => e.preventDefault()} on:drop={handleDrop}>
     {#each references || [] as ref (ref.designerId)}
-      <DesignerReference
+      <svelte:component this={referenceComponent}
         bind:this={referenceRefs[ref.designerId]}
         {domTables}
         reference={ref}
diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte
index c63e4307d..592fa839f 100644
--- a/packages/web/src/designer/DiagramDesigner.svelte
+++ b/packages/web/src/designer/DiagramDesigner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Designer from './Designer.svelte';
+  import DiagramDesignerReference from './DiagramDesignerReference.svelte';
 </script>
 
 <Designer
@@ -11,9 +12,8 @@
     allowTableAlias: false,
     updateFromDbInfo: true,
     useDatabaseReferences: true,
-    showJoinType: false,
-    showReferenceArrow: true,
     allowScrollColumns: false,
     allowAddAllReferences: true,
   }}
+  referenceComponent={DiagramDesignerReference}
 />
diff --git a/packages/web/src/designer/DiagramDesignerReference.svelte b/packages/web/src/designer/DiagramDesignerReference.svelte
new file mode 100644
index 000000000..cbb057e07
--- /dev/null
+++ b/packages/web/src/designer/DiagramDesignerReference.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import { isConnectedByReference } from './designerTools';
+  import contextMenu from '../utility/contextMenu';
+
+  export let reference;
+  export let onRemoveReference;
+  export let onChangeReference;
+  export let designer;
+  export let domTables;
+  export let settings;
+
+  let src = null;
+  let dst = null;
+
+  let minpos;
+  let columnsY = [];
+
+  const buswi = 10;
+  const extwi = 25;
+  const arwi = 12;
+  const arhi = 12;
+  const arpad = 3;
+
+  export function recomputePosition() {
+    const { designerId, sourceId, targetId, columns, joinType } = reference;
+
+    /** @type {DomTableRef} */
+    const sourceTable = domTables[sourceId];
+    /** @type {DomTableRef} */
+    const targetTable = domTables[targetId];
+    if (!sourceTable || !targetTable) return null;
+    const sourceRect = sourceTable.getRect();
+    const targetRect = targetTable.getRect();
+    if (!sourceRect || !targetRect) return null;
+
+    const possibilities = [];
+    possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.left - buswi, dirdst: -1 });
+    possibilities.push({ xsrc: sourceRect.left - buswi, dirsrc: -1, xdst: targetRect.right + buswi, dirdst: 1 });
+    possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.left - buswi, dirdst: -1 });
+    possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.right + buswi, dirdst: 1 });
+
+    minpos = _.minBy(possibilities, p => Math.abs(p.xsrc - p.xdst));
+
+    let srcY = _.mean(columns.map(x => sourceTable.getColumnY(x.source)));
+    let dstY = _.mean(columns.map(x => targetTable.getColumnY(x.target)));
+
+    if (columns.length == 0) {
+      srcY = sourceTable.getColumnY('');
+      dstY = targetTable.getColumnY('');
+    }
+
+    src = { x: minpos.xsrc, y: srcY };
+    dst = { x: minpos.xdst, y: dstY };
+
+    columnsY = columns.map((col, colIndex) => {
+      const y1 = sourceTable.getColumnY(col.source);
+      const y2 = targetTable.getColumnY(col.target);
+      return [y1, y2];
+    });
+  }
+
+  $: {
+    domTables;
+    recomputePosition();
+  }
+
+  function createMenu() {
+    const isConnected = isConnectedByReference(
+      designer,
+      { designerId: reference?.sourceId },
+      { designerId: reference?.targetId },
+      reference
+    );
+    const setJoinType = joinType => {
+      onChangeReference({
+        ...reference,
+        joinType,
+      });
+    };
+
+    return [
+      { text: 'Remove', onClick: () => onRemoveReference(reference) },
+      !isConnected && [
+        { divider: true },
+        { onClick: () => setJoinType('INNER JOIN'), text: 'Set INNER JOIN' },
+        { onClick: () => setJoinType('LEFT JOIN'), text: 'Set LEFT JOIN' },
+        { onClick: () => setJoinType('RIGHT JOIN'), text: 'Set RIGHT JOIN' },
+        { onClick: () => setJoinType('FULL OUTER JOIN'), text: 'Set FULL OUTER JOIN' },
+        { onClick: () => setJoinType('CROSS JOIN'), text: 'Set CROSS JOIN' },
+        { onClick: () => setJoinType('WHERE EXISTS'), text: 'Set WHERE EXISTS' },
+        { onClick: () => setJoinType('WHERE NOT EXISTS'), text: 'Set WHERE NOT EXISTS' },
+      ],
+    ];
+  }
+</script>
+
+{#if src && dst && minpos}
+  <svg>
+    <polyline
+      points={`
+      ${src.x},${src.y}
+      ${src.x + extwi * minpos.dirsrc},${src.y}
+      ${dst.x + extwi * minpos.dirdst},${dst.y}
+      ${dst.x},${dst.y}
+  `}
+    />
+    {#each columnsY as coly}
+      <polyline
+        points={`
+  ${src.x},${src.y}
+  ${src.x},${coly[0]}
+  ${src.x - buswi * minpos.dirsrc},${coly[0]}
+`}
+      />
+      <polyline
+        points={`
+  ${dst.x},${dst.y}
+  ${dst.x},${coly[1]}
+  ${dst.x - buswi * minpos.dirdst},${coly[1]}
+`}
+      />
+    {/each}
+    <polygon
+      points={`
+      ${dst.x - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y}
+      ${dst.x + arwi * minpos.dirdst - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y + arhi / 2}
+      ${dst.x + arwi * minpos.dirdst - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y - arhi / 2}
+      `}
+    />
+  </svg>
+{/if}
+
+<style>
+  svg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+  }
+  polyline {
+    fill: none;
+    stroke: var(--theme-bg-4);
+    stroke-width: 2;
+  }
+</style>
diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte
index 7b25b727a..96dcc6de1 100644
--- a/packages/web/src/designer/QueryDesigner.svelte
+++ b/packages/web/src/designer/QueryDesigner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Designer from './Designer.svelte';
+  import QueryDesignerReference from './QueryDesignerReference.svelte';
 </script>
 
 <Designer
@@ -11,9 +12,8 @@
     allowTableAlias: true,
     updateFromDbInfo: false,
     useDatabaseReferences: false,
-    showJoinType: true,
-    showReferenceArrow: false,
     allowScrollColumns: true,
     allowAddAllReferences: false,
   }}
+  referenceComponent={QueryDesignerReference}
 />
diff --git a/packages/web/src/designer/DesignerReference.svelte b/packages/web/src/designer/QueryDesignerReference.svelte
similarity index 84%
rename from packages/web/src/designer/DesignerReference.svelte
rename to packages/web/src/designer/QueryDesignerReference.svelte
index e80482d27..9affea768 100644
--- a/packages/web/src/designer/DesignerReference.svelte
+++ b/packages/web/src/designer/QueryDesignerReference.svelte
@@ -18,9 +18,6 @@
 
   const buswi = 10;
   const extwi = 25;
-  const arwi = 12;
-  const arhi = 12;
-  const arpad = 3;
 
   export function recomputePosition() {
     const { designerId, sourceId, targetId, columns, joinType } = reference;
@@ -121,31 +118,20 @@
 `}
       />
     {/each}
-    {#if settings?.showReferenceArrow}
-      <polygon
-        points={`
-      ${dst.x - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y}
-      ${dst.x + arwi * minpos.dirdst - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y + arhi / 2}
-      ${dst.x + arwi * minpos.dirdst - buswi * minpos.dirdst + arpad * minpos.dirdst},${dst.y - arhi / 2}
-      `}
-      />
-    {/if}
   </svg>
 
-  {#if settings?.showJoinType}
-    <div
-      use:contextMenu={createMenu}
-      class="wrapper"
-      style={`left: ${(src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2 - 16}px;
+  <div
+    use:contextMenu={createMenu}
+    class="wrapper"
+    style={`left: ${(src.x + extwi * minpos.dirsrc + dst.x + extwi * minpos.dirdst) / 2 - 16}px;
             top: ${(src.y + dst.y) / 2 - 16}px`}
-    >
-      <div class="text">
-        {_.snakeCase(reference?.joinType || 'CROSS JOIN')
-          .replace('_', '\xa0')
-          .replace('_', '\xa0')}
-      </div>
+  >
+    <div class="text">
+      {_.snakeCase(reference?.joinType || 'CROSS JOIN')
+        .replace('_', '\xa0')
+        .replace('_', '\xa0')}
     </div>
-  {/if}
+  </div>
 {/if}
 
 <style>