diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 2d937de015..f1d7e48405 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -1,4 +1,6 @@
 @import 'ant-design-vue/dist/antd.variable.min.css';
+@import '@braks/vue-flow/dist/style.css';
+@import '@braks/vue-flow/dist/theme-default.css';
 
 :root {
   --header-height: 42px;
@@ -242,3 +244,8 @@ a {
 .ant-dropdown-menu-submenu-title{
   @apply !pr-2;
 }
+
+.vue-flow__minimap {
+  transform: scale(75%);
+  transform-origin: bottom right;
+}
diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 377cd11c6a..0775cfde06 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -141,6 +141,7 @@ declare module '@vue/runtime-core' {
     MdiEmailArrowRightOutline: typeof import('~icons/mdi/email-arrow-right-outline')['default']
     MdiExitToApp: typeof import('~icons/mdi/exit-to-app')['default']
     MdiExport: typeof import('~icons/mdi/export')['default']
+    MdiEyeCircleOutline: typeof import('~icons/mdi/eye-circle-outline')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
@@ -173,6 +174,7 @@ declare module '@vue/runtime-core' {
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
+    MdiOpenInNewIcon: typeof import('~icons/mdi/open-in-new-icon')['default']
     MdiPencil: typeof import('~icons/mdi/pencil')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusCircleOutline: typeof import('~icons/mdi/plus-circle-outline')['default']
@@ -188,6 +190,7 @@ declare module '@vue/runtime-core' {
     MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
+    MdiTableLarge: typeof import('~icons/mdi/table-large')['default']
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
new file mode 100644
index 0000000000..4ccfe17aeb
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/settings/Erd.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="w-full h-full !py-0 !px-2" style="height: 70vh">
+    <ErdView />
+  </div>
+</template>
diff --git a/packages/nc-gui/components/dashboard/settings/Misc.vue b/packages/nc-gui/components/dashboard/settings/Misc.vue
index a9ce1f6d2e..fc98644a58 100644
--- a/packages/nc-gui/components/dashboard/settings/Misc.vue
+++ b/packages/nc-gui/components/dashboard/settings/Misc.vue
@@ -10,7 +10,7 @@ watch(includeM2M, async () => await loadTables())
     <div class="flex flex-col w-full">
       <div class="flex flex-row items-center w-full mb-4 gap-2">
         <!--        Show M2M Tables -->
-        <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']">{{
+        <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']" class="nc-settings-meta-misc">{{
           $t('msg.info.showM2mTables')
         }}</a-checkbox>
       </div>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index e9f7546f3f..52dba591fc 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -5,6 +5,7 @@ import AppStore from './AppStore.vue'
 import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
 import Misc from './Misc.vue'
+import Erd from './Erd.vue'
 import { useNuxtApp } from '#app'
 import { useI18n, useUIPermission, useVModel, watch } from '#imports'
 import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue'
@@ -90,7 +91,7 @@ const tabsInfo: TabGroup = {
       $e('c:settings:appstore')
     },
   },
-  metaData: {
+  projMetaData: {
     // Project Metadata
     title: t('title.projMeta'),
     icon: MultipleTableIcon,
@@ -108,6 +109,13 @@ const tabsInfo: TabGroup = {
           $e('c:table:ui-acl')
         },
       },
+      erd: {
+        title: t('title.erdView'),
+        body: Erd,
+        onClick: () => {
+          $e('c:settings:erd')
+        },
+      },
       misc: {
         title: t('general.misc'),
         body: Misc,
diff --git a/packages/nc-gui/components/erd/Flow.vue b/packages/nc-gui/components/erd/Flow.vue
new file mode 100644
index 0000000000..3568a486ae
--- /dev/null
+++ b/packages/nc-gui/components/erd/Flow.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import type { Edge, Node } from '@braks/vue-flow'
+import { Background, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import dagre from 'dagre'
+import TableNode from './TableNode.vue'
+import RelationEdge from './RelationEdge.vue'
+
+interface Props {
+  tables: any[]
+  config: {
+    showPkAndFk: boolean
+    showViews: boolean
+    showAllColumns: boolean
+    singleTableMode: boolean
+    showJunctionTableNames: boolean
+  }
+}
+
+const { tables, config } = defineProps<Props>()
+
+const { metasWithIdAsKey } = useMetas()
+
+const { $destroy, fitView } = useVueFlow()
+
+const nodes = ref<Node[]>([])
+const edges = ref<Edge[]>([])
+
+let dagreGraph: dagre.graphlib.Graph
+
+const initDagre = () => {
+  dagreGraph = new dagre.graphlib.Graph()
+  dagreGraph.setDefaultEdgeLabel(() => ({}))
+  dagreGraph.setGraph({ rankdir: 'LR' })
+}
+
+const populateInitialNodes = () => {
+  nodes.value = tables.flatMap((table) => {
+    if (!table.id) return []
+
+    const columns =
+      metasWithIdAsKey.value[table.id].columns?.filter(
+        (col) => config.showAllColumns || (!config.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+      ) || []
+
+    dagreGraph.setNode(table.id, { width: 250, height: 50 * columns.length })
+
+    return [
+      {
+        id: table.id,
+        data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk, showAllColumns: config.showAllColumns },
+        type: 'custom',
+        position: { x: 0, y: 0 },
+      },
+    ]
+  })
+}
+
+const populateEdges = () => {
+  const ltarColumns = tables.reduce<ColumnType[]>((acc, table) => {
+    const meta = metasWithIdAsKey.value[table.id!]
+    const columns = meta.columns?.filter(
+      (column: ColumnType) => column.uidt === UITypes.LinkToAnotherRecord && column.system !== 1,
+    )
+
+    columns?.forEach((column: ColumnType) => {
+      if ((column.colOptions as LinkToAnotherRecordType)?.type === 'hm') {
+        acc.push(column)
+      }
+
+      if ((column.colOptions as LinkToAnotherRecordType).type === 'mm') {
+        // Avoid duplicate mm connections
+        const correspondingColumn = acc.find(
+          (c) =>
+            (c.colOptions as LinkToAnotherRecordType | FormulaType | RollupType | LookupType).type === 'mm' &&
+            (c.colOptions as LinkToAnotherRecordType).fk_parent_column_id ===
+              (column.colOptions as LinkToAnotherRecordType).fk_child_column_id &&
+            (c.colOptions as LinkToAnotherRecordType).fk_child_column_id ===
+              (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id,
+        )
+        if (!correspondingColumn) {
+          acc.push(column)
+        }
+      }
+    })
+
+    return acc
+  }, [] as ColumnType[])
+
+  const edgeMMTableLabel = (modelId: string) => {
+    const mmModel = metasWithIdAsKey.value[modelId]
+    if (mmModel.title !== mmModel.table_name) {
+      return `${mmModel.title} (${mmModel.table_name})`
+    }
+    return mmModel.title
+  }
+
+  edges.value = ltarColumns.map((column) => {
+    const source = column.fk_model_id!
+    const target = (column.colOptions as LinkToAnotherRecordType).fk_related_model_id!
+
+    let sourceColumnId, targetColumnId
+    let edgeLabel = ''
+
+    if ((column.colOptions as LinkToAnotherRecordType).type === 'hm') {
+      sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
+      targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
+    }
+
+    if ((column.colOptions as LinkToAnotherRecordType).type === 'mm') {
+      sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id
+      targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
+      edgeLabel = config.showJunctionTableNames
+        ? edgeMMTableLabel((column.colOptions as LinkToAnotherRecordType).fk_mm_model_id!)
+        : ''
+    }
+
+    if (source !== target) dagreGraph.setEdge(source, target)
+
+    return {
+      id: `e-${sourceColumnId}-${source}-${targetColumnId}-${target}-#${edgeLabel}`,
+      source: `${source}`,
+      target: `${target}`,
+      sourceHandle: `s-${sourceColumnId}-${source}`,
+      targetHandle: `d-${targetColumnId}-${target}`,
+      type: 'custom',
+      data: {
+        column,
+        isSelfRelation: source === target && sourceColumnId === targetColumnId,
+        label: edgeLabel,
+      },
+    }
+  })
+}
+
+const connectNonConnectedNodes = () => {
+  const connectedNodes = new Set<string>()
+
+  edges.value.forEach((edge) => {
+    connectedNodes.add(edge.source)
+    connectedNodes.add(edge.target)
+  })
+
+  const nonConnectedNodes = tables.filter((table) => !connectedNodes.has(table.id!))
+
+  if (nonConnectedNodes.length === 0) return
+
+  if (nonConnectedNodes.length === 1) {
+    const firstTable = tables.find((table) => table.type === 'table' && table.id !== nonConnectedNodes[0].id)
+    if (!firstTable) return
+
+    dagreGraph.setEdge(nonConnectedNodes[0].id, firstTable.id)
+    return
+  }
+
+  const firstNode = nonConnectedNodes[0]
+  nonConnectedNodes.forEach((node, index) => {
+    if (index === 0) return
+
+    const source = firstNode.id
+    const target = node.id
+
+    dagreGraph.setEdge(source, target)
+  })
+}
+
+const layoutNodes = () => {
+  if (!config.singleTableMode) connectNonConnectedNodes()
+
+  dagre.layout(dagreGraph)
+
+  nodes.value = nodes.value.flatMap((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id)
+
+    if (!nodeWithPosition) return []
+
+    return [{ ...node, position: { x: nodeWithPosition.x, y: nodeWithPosition.y } } as Node]
+  })
+}
+
+const init = () => {
+  initDagre()
+  populateInitialNodes()
+  populateEdges()
+  layoutNodes()
+
+  setTimeout(() => fitView({ duration: 300 }))
+}
+
+init()
+
+onScopeDispose($destroy)
+
+watch([() => tables, () => config], init, { deep: true, flush: 'pre' })
+</script>
+
+<template>
+  <VueFlow :nodes="nodes" :edges="edges" elevate-edges-on-select>
+    <Controls class="!left-auto right-2 !top-3.5 !bottom-auto" :show-fit-view="false" :show-interactive="false" />
+
+    <template #node-custom="props">
+      <TableNode :data="props.data" />
+    </template>
+
+    <template #edge-custom="props">
+      <RelationEdge v-bind="props" />
+    </template>
+
+    <Background />
+
+    <div
+      v-if="!config.singleTableMode"
+      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram"
+      style="font-size: 0.6rem"
+    >
+      <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
+        <MdiTableLarge class="text-primary" />
+        <div>{{ $t('objects.table') }}</div>
+      </div>
+      <div class="flex flex-row items-center space-x-1 pt-1">
+        <MdiEyeCircleOutline class="text-primary" />
+        <div>{{ $t('objects.sqlVIew') }}</div>
+      </div>
+    </div>
+  </VueFlow>
+</template>
diff --git a/packages/nc-gui/components/erd/RelationEdge.vue b/packages/nc-gui/components/erd/RelationEdge.vue
new file mode 100644
index 0000000000..fec3122b9d
--- /dev/null
+++ b/packages/nc-gui/components/erd/RelationEdge.vue
@@ -0,0 +1,161 @@
+<script setup>
+import { EdgeText, getBezierPath, getEdgeCenter } from '@braks/vue-flow'
+import { computed } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  sourceX: {
+    type: Number,
+    required: true,
+  },
+  sourceY: {
+    type: Number,
+    required: true,
+  },
+  targetX: {
+    type: Number,
+    required: true,
+  },
+  targetY: {
+    type: Number,
+    required: true,
+  },
+  sourcePosition: {
+    type: String,
+    required: true,
+  },
+  targetPosition: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Object,
+    required: false,
+  },
+  markerEnd: {
+    type: String,
+    required: false,
+  },
+  style: {
+    type: Object,
+    required: false,
+  },
+  sourceHandleId: {
+    type: String,
+    required: false,
+  },
+  targetHandleId: {
+    type: String,
+    required: false,
+  },
+})
+
+const data = toRef(props, 'data')
+
+const isManyToMany = computed(() => data.value.column?.colOptions?.type === 'mm')
+
+const edgePath = computed(() => {
+  if (data.value.isSelfRelation) {
+    const { sourceX, sourceY, targetX, targetY } = props
+    const radiusX = (sourceX - targetX) * 0.6
+    const radiusY = 50
+    return `M ${sourceX} ${sourceY} A ${radiusX} ${radiusY} 0 1 0 ${targetX} ${targetY}`
+  }
+
+  return getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  })
+})
+
+const center = computed(() =>
+  getEdgeCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  }),
+)
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <path
+    :id="id"
+    :style="style"
+    class="path-wrapper p-4 hover:cursor-pointer"
+    :stroke-width="8"
+    fill="none"
+    :d="edgePath"
+    :marker-end="markerEnd"
+  />
+  <path
+    :id="id"
+    :style="style"
+    class="path stroke-gray-500 hover:stroke-green-500 hover:cursor-pointer"
+    :stroke-width="1.5"
+    fill="none"
+    :d="edgePath"
+    :marker-end="markerEnd"
+  />
+
+  <EdgeText
+    v-if="data.label?.length > 0"
+    :class="`nc-erd-table-label-${data.label.toLowerCase().replace(' ', '-').replace('\(', '').replace(')', '')}`"
+    :x="center[0]"
+    :y="center[1]"
+    :label="data.label"
+    :label-style="{ fill: 'white' }"
+    :label-show-bg="true"
+    :label-bg-style="{ fill: '#10b981' }"
+    :label-bg-padding="[2, 4]"
+    :label-bg-border-radius="2"
+  />
+
+  <rect
+    class="nc-erd-edge-rect"
+    :x="sourceX"
+    :y="sourceY - 4"
+    width="8"
+    height="8"
+    fill="#fff"
+    stroke="#6F3381"
+    :stroke-width="1.5"
+    :transform="`rotate(45,${sourceX + 2},${sourceY - 4})`"
+  />
+  <rect
+    v-if="isManyToMany"
+    class="nc-erd-edge-rect"
+    :x="targetX"
+    :y="targetY - 4"
+    width="8"
+    height="8"
+    fill="#fff"
+    stroke="#6F3381"
+    :stroke-width="1.5"
+    :transform="`rotate(45,${targetX + 2},${targetY - 4})`"
+  />
+  <circle v-else class="nc-erd-edge-circle" :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
+</template>
+
+<style scoped lang="scss">
+.path-wrapper:hover + .path {
+  @apply stroke-green-500;
+  stroke-width: 2;
+}
+.path:hover {
+  stroke-width: 2;
+}
+</style>
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
new file mode 100644
index 0000000000..0c753e9856
--- /dev/null
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
+import type { ColumnType, TableType } from 'nocodb-sdk'
+import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+
+interface Props extends NodeProps {
+  data: TableType & { showPkAndFk: boolean; showAllColumns: boolean }
+}
+
+const props = defineProps<Props>()
+
+const { data } = toRefs(props)
+
+provide(MetaInj, data as Ref<TableType>)
+
+const { $e } = useNuxtApp()
+
+const columns = computed(() => {
+  // Hide hm ltar created for `mm` relations
+  return data.value.columns?.filter((col) => !(col.uidt === UITypes.LinkToAnotherRecord && col.system === 1))
+})
+
+const pkAndFkColumns = computed(() => {
+  return columns.value
+    ?.filter(() => data.value.showPkAndFk && data.value.showAllColumns)
+    .filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
+})
+
+const nonPkColumns = computed(() => {
+  return columns.value
+    ?.filter(
+      (col: ColumnType) => data.value.showAllColumns || (!data.value.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+    )
+    .filter((col: ColumnType) => !col.pk && col.uidt !== UITypes.ForeignKey)
+})
+
+const relatedColumnId = (col: Record<string, any>) =>
+  col.colOptions.type === 'mm' ? col.colOptions.fk_parent_column_id : col.colOptions.fk_child_column_id
+</script>
+
+<template>
+  <div
+    class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1 nc-erd-table-node"
+    :class="`nc-erd-table-node-${data.table_name}`"
+    @click="$e('c:erd:node-click')"
+  >
+    <GeneralTooltip modifier-key="Alt">
+      <template #title> {{ data.table_name }} </template>
+      <div
+        class="text-gray-600 text-md py-2 border-b-1 border-gray-200 rounded-t-lg w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
+      >
+        <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
+        <MdiEyeCircleOutline v-else class="text-primary" />
+        <div class="flex pl-1.5">
+          {{ data.title }}
+        </div>
+      </div>
+    </GeneralTooltip>
+    <div>
+      <div
+        v-for="col in pkAndFkColumns"
+        :key="col.title"
+        class="w-full border-b-1 py-2 border-gray-100 keys"
+        :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+      >
+        <SmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
+      </div>
+
+      <div class="w-full mb-1"></div>
+
+      <div v-for="(col, index) in nonPkColumns" :key="col.title">
+        <div
+          class="w-full h-full flex items-center min-w-32 border-gray-100 py-2 px-1"
+          :class="index + 1 === nonPkColumns.length ? 'rounded-b-lg' : 'border-b-1'"
+        >
+          <div
+            v-if="col.uidt === UITypes.LinkToAnotherRecord"
+            class="flex relative w-full"
+            :class="`nc-erd-table-node-${data.table_name}-column-${col.title?.toLowerCase().replace(' ', '_')}`"
+          >
+            <Handle
+              :id="`s-${relatedColumnId(col)}-${data.id}`"
+              class="-right-4 opacity-0"
+              type="source"
+              :position="Position.Right"
+            />
+
+            <Handle
+              :id="`d-${relatedColumnId(col)}-${data.id}`"
+              class="-left-1 opacity-0"
+              type="target"
+              :position="Position.Left"
+            />
+            <SmartsheetHeaderVirtualCell :column="col" :hide-menu="true" />
+          </div>
+          <SmartsheetHeaderVirtualCell
+            v-else-if="isVirtualCol(col)"
+            :column="col"
+            :hide-menu="true"
+            :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+          />
+
+          <SmartsheetHeaderCell
+            v-else
+            :column="col"
+            :hide-menu="true"
+            :class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.keys {
+  background-color: #f6f6f6;
+}
+</style>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
new file mode 100644
index 0000000000..d480963e83
--- /dev/null
+++ b/packages/nc-gui/components/erd/View.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+
+const { table } = defineProps<{ table?: TableType }>()
+
+const { includeM2M } = useGlobal()
+
+const { tables: projectTables } = useProject()
+const tables = ref<TableType[]>([])
+const { metas, getMeta } = useMetas()
+
+let isLoading = $ref(true)
+const showAdvancedOptions = ref(false)
+
+const config = ref({
+  showPkAndFk: true,
+  showViews: false,
+  showAllColumns: true,
+  singleTableMode: !!table,
+  showMMTables: false,
+  showJunctionTableNames: false,
+})
+
+const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => {
+  await Promise.all(
+    localTables
+      .filter((table) => !metas.value[table.id!])
+      .map(async (table) => {
+        await getMeta(table.id!)
+      }),
+  )
+}
+
+const populateTables = async () => {
+  let localTables: TableType[] = []
+  if (table) {
+    // if table is provided only get the table and its related tables
+    localTables = projectTables.value.filter(
+      (t) =>
+        t.id === table.id ||
+        table.columns?.find(
+          (column) =>
+            column.uidt === UITypes.LinkToAnotherRecord &&
+            (column.colOptions as LinkToAnotherRecordType)?.fk_related_model_id === t.id,
+        ),
+    )
+  } else {
+    localTables = projectTables.value
+  }
+
+  await loadMetaOfTablesNotInMetas(localTables)
+
+  tables.value = localTables
+    .filter(
+      (t) =>
+        // todo: table type is missing mm property in type definition
+        config.value.showMMTables ||
+        (!config.value.showMMTables && !t.mm) ||
+        // Show mm table if it's the selected table
+        t.id === table?.id,
+    )
+    .filter((t) => (!config.value.showViews && t.type !== 'view') || config.value.showViews)
+
+  isLoading = false
+}
+
+watch(
+  [config, metas],
+  async () => {
+    await populateTables()
+  },
+  {
+    deep: true,
+  },
+)
+
+watch(
+  [projectTables],
+  async () => {
+    await populateTables()
+  },
+  { immediate: true },
+)
+
+watch(
+  () => config.value.showAllColumns,
+  () => {
+    config.value.showPkAndFk = config.value.showAllColumns
+  },
+)
+</script>
+
+<template>
+  <div
+    class="w-full"
+    style="height: inherit"
+    :class="{
+      'nc-erd-vue-flow': !config.singleTableMode,
+      'nc-erd-vue-flow-single-table': config.singleTableMode,
+    }"
+  >
+    <div v-if="isLoading" class="h-full w-full flex flex-col justify-center items-center">
+      <div class="flex flex-row justify-center">
+        <a-spin size="large" />
+      </div>
+    </div>
+    <div v-else class="relative h-full">
+      <ErdFlow :tables="tables" :config="config" />
+
+      <div
+        class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1 nc-erd-context-menu z-50"
+      >
+        <div class="flex flex-row items-center">
+          <a-checkbox
+            v-model:checked="config.showAllColumns"
+            v-e="['c:erd:showAllColumns']"
+            class="nc-erd-showColumns-checkbox"
+          />
+          <span
+            class="ml-2 select-none nc-erd-showColumns-label"
+            style="font-size: 0.65rem"
+            @dblclick="showAdvancedOptions = true"
+          >
+            {{ $t('activity.erd.showColumns') }}
+          </span>
+        </div>
+        <div class="flex flex-row items-center">
+          <a-checkbox
+            v-model:checked="config.showPkAndFk"
+            v-e="['c:erd:showPkAndFk']"
+            class="nc-erd-showPkAndFk-checkbox"
+            :class="{
+              'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns,
+              'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns,
+              'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk,
+              'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk,
+            }"
+            :disabled="!config.showAllColumns"
+          />
+          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
+        </div>
+        <div v-if="!table" class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
+          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
+        </div>
+        <div v-if="!table && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
+          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showMMTables') }}</span>
+        </div>
+        <div v-if="showAdvancedOptions && includeM2M" class="flex flex-row items-center">
+          <a-checkbox
+            v-model:checked="config.showJunctionTableNames"
+            v-e="['c:erd:showJunctionTableNames']"
+            class="nc-erd-showJunctionTableNames-checkbox"
+          />
+          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
index 8d4d458831..eeb5eea8eb 100644
--- a/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
@@ -16,7 +16,7 @@ import {
   useVirtualCell,
 } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean; required?: boolean | number }>()
+const props = defineProps<{ column: ColumnType; hideMenu?: boolean; required?: boolean | number }>()
 
 const { t } = useI18n()
 
diff --git a/packages/nc-gui/components/smartsheet-toolbar/Erd.vue b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
new file mode 100644
index 0000000000..c1a131fdea
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet-toolbar/Erd.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
+
+const meta = inject(MetaInj)
+
+interface Props {
+  modelValue: boolean
+}
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+const selectedView = inject(ActiveViewInj)
+</script>
+
+<template>
+  <a-modal
+    v-model:visible="vModel"
+    size="small"
+    :footer="null"
+    width="max(900px,60vw)"
+    :closable="false"
+    wrap-class-name="erd-single-table-modal"
+    transition-name="fade"
+  >
+    <div class="flex flex-row justify-between w-full items-center mb-1">
+      <a-typography-title class="ml-4 select-none" type="secondary" :level="5">
+        {{ `${$t('title.erdView')}: ${selectedView?.title}` }}
+      </a-typography-title>
+
+      <a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false">
+        <template #icon>
+          <MdiClose class="cursor-pointer mt-1 nc-modal-close" />
+        </template>
+      </a-button>
+    </div>
+    <div class="w-full h-full !py-0 !px-2" style="height: 70vh">
+      <ErdView :table="meta" />
+    </div>
+  </a-modal>
+</template>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index f095ffa5d5..f789ffae0f 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -18,6 +18,7 @@ import { LockType } from '~/lib'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
 import MdiAccountIcon from '~icons/mdi/account'
 import MdiAccountGroupIcon from '~icons/mdi/account-group'
+import AcountTreeRoundedIcon from '~icons/material-symbols/account-tree-rounded'
 
 const { t } = useI18n()
 
@@ -37,6 +38,8 @@ const showWebhookDrawer = ref(false)
 
 const showApiSnippetDrawer = ref(false)
 
+const showErd = ref(false)
+
 const quickImportDialog = ref(false)
 
 const { isUIAllowed } = useUIPermission()
@@ -160,9 +163,8 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
                 </template>
 
                 <template #expandIcon></template>
-                <a-menu-item>
+                <a-menu-item v-if="isUIAllowed('csvImport') && !isView && !isPublicView">
                   <div
-                    v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
                     v-e="['a:actions:upload-csv']"
                     class="nc-project-menu-item"
                     :class="{ disabled: isLocked }"
@@ -177,13 +179,8 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
               </a-sub-menu>
             </template>
             <a-menu-divider />
-            <a-menu-item>
-              <div
-                v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
-                v-e="['a:actions:shared-view-list']"
-                class="py-2 flex gap-2 items-center"
-                @click="sharedViewListDlg = true"
-              >
+            <a-menu-item v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView">
+              <div v-e="['a:actions:shared-view-list']" class="py-2 flex gap-2 items-center" @click="sharedViewListDlg = true">
                 <MdiViewListOutline class="text-gray-500" />
                 <!-- Shared View List -->
                 {{ $t('activity.listSharedView') }}
@@ -200,18 +197,19 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
                 {{ $t('objects.webhooks') }}
               </div>
             </a-menu-item>
-            <a-menu-item>
-              <div
-                v-if="!isSharedBase && !isPublicView"
-                v-e="['c:snippet:open']"
-                class="py-2 flex gap-2 items-center"
-                @click="showApiSnippetDrawer = true"
-              >
+            <a-menu-item v-if="!isSharedBase && !isPublicView">
+              <div v-e="['c:snippet:open']" class="py-2 flex gap-2 items-center" @click="showApiSnippetDrawer = true">
                 <MdiXml class="text-gray-500" />
                 <!-- Get API Snippet -->
                 {{ $t('activity.getApiSnippet') }}
               </div>
             </a-menu-item>
+            <a-menu-item>
+              <div v-e="['c:erd:open']" class="py-2 flex gap-2 items-center nc-view-action-erd" @click="showErd = true">
+                <AcountTreeRoundedIcon class="text-gray-500" />
+                {{ $t('title.erdView') }}
+              </div>
+            </a-menu-item>
           </a-menu-item-group>
         </a-menu>
       </template>
@@ -221,6 +219,8 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
+    <SmartsheetToolbarErd v-model="showErd" />
+
     <a-modal
       v-model:visible="sharedViewListDlg"
       :title="$t('activity.listSharedView')"
diff --git a/packages/nc-gui/composables/useMetas.ts b/packages/nc-gui/composables/useMetas.ts
index 8a780f1793..8f3aa68203 100644
--- a/packages/nc-gui/composables/useMetas.ts
+++ b/packages/nc-gui/composables/useMetas.ts
@@ -10,6 +10,12 @@ export function useMetas() {
   const { tables } = useProject()
 
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
+
+  const metasWithIdAsKey = computed<Record<string, TableType>>(() => {
+    const idEntries = Object.entries(metas.value).filter(([k, v]) => k === v.id)
+    return Object.fromEntries(idEntries)
+  })
+
   const loadingState = useState<Record<string, boolean>>('metas-loading-state', () => ({}))
 
   const setMeta = async (model: any) => {
@@ -91,5 +97,5 @@ export function useMetas() {
     }
   }
 
-  return { getMeta, clearAllMeta, metas, removeMeta, setMeta }
+  return { getMeta, clearAllMeta, metas, metasWithIdAsKey, removeMeta, setMeta }
 }
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 8def53b7e9..518421bfe2 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -103,7 +103,8 @@
       "editor": "Editor",
       "commenter": "Commenter",
       "viewer": "Viewer"
-    }
+    },
+    "sqlVIew": "SQL View"
   },
   "datatype": {
     "ID": "ID",
@@ -157,6 +158,7 @@
     "isNotNull": "is not null"
   },
   "title": {
+    "erdView": "ERD View",
     "newProj": "New Project",
     "myProject": "My Projects",
     "formTitle": "Form Title",
@@ -406,7 +408,14 @@
     "linkRecord": "Link record",
     "addNewRecord": "Add new record",
     "useConnectionUrl": "Use Connection URL",
-    "toggleCommentsDraw": "Toggle comments draw"
+    "toggleCommentsDraw": "Toggle comments draw",
+    "erd": {
+      "showColumns": "Show Columns",
+      "showPkAndFk": "Show Primary and Foreign Keys",
+      "showSqlViews": "Show SQL Views",
+      "showMMTables": "Show Many to Many tables",
+      "showJunctionTableNames": "Show Junction Table Names"
+    }
   },
   "tooltip": {
     "saveChanges": "Save changes",
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 9d8beb4b4c..c9b5e47c12 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -6,12 +6,14 @@
     "": {
       "hasInstallScript": true,
       "dependencies": {
+        "@braks/vue-flow": "^0.4.39",
         "@ckpack/vue-color": "^1.2.0",
         "@vuelidate/core": "^2.0.0-alpha.44",
         "@vuelidate/validators": "^2.0.0-alpha.31",
         "@vueuse/core": "^9.0.2",
         "@vueuse/integrations": "^9.0.2",
         "ant-design-vue": "^3.2.11",
+        "dagre": "^0.8.5",
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
         "httpsnippet": "^2.0.0",
@@ -53,6 +55,7 @@
         "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
+        "@types/dagre": "^0.7.48",
         "@types/file-saver": "^2.0.5",
         "@types/papaparse": "^5.3.2",
         "@types/sortablejs": "^1.13.0",
@@ -878,6 +881,103 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@braks/vue-flow": {
+      "version": "0.4.39",
+      "resolved": "https://registry.npmjs.org/@braks/vue-flow/-/vue-flow-0.4.39.tgz",
+      "integrity": "sha512-ZWKEwvEDKZe0Yw2sS8RxmxLs1k3O9DGFF0rk5xj+zWlExm15uBBhHAf8rWIRVULEbkjOmDwJEJ4bQrqwHn4pdA==",
+      "dependencies": {
+        "@vueuse/core": "^9.1.0",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@braks/vue-flow/node_modules/@vueuse/core": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.2.0.tgz",
+      "integrity": "sha512-/MZ6qpz6uSyaXrtoeBWQzAKRG3N7CvfVWvQxiM3ei3Xe5ydOjjtVbo7lGl9p8dECV93j7W8s63A8H0kFLpLyxg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.15",
+        "@vueuse/metadata": "9.2.0",
+        "@vueuse/shared": "9.2.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@braks/vue-flow/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@braks/vue-flow/node_modules/@vueuse/metadata": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.2.0.tgz",
+      "integrity": "sha512-exN4KE6iquxDCdt72BgEhb3tlOpECtD61AUdXnUqBTIUCl70x1Ar/QXo3bYcvxmdMS2/peQyfeTzBjRTpvL5xw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@braks/vue-flow/node_modules/@vueuse/shared": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.2.0.tgz",
+      "integrity": "sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@braks/vue-flow/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@ckpack/vue-color": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
@@ -2347,6 +2447,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/dagre": {
+      "version": "0.7.48",
+      "resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.48.tgz",
+      "integrity": "sha512-rF3yXSwHIrDxEkN6edCE4TXknb5YSEpiXfLaspw1I08grC49ZFuAVGOQCmZGIuLUGoFgcqGlUFBL/XrpgYpQgw==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "8.4.3",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.3.tgz",
@@ -5144,6 +5250,111 @@
       "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==",
       "dev": true
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
@@ -7882,6 +8093,14 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
@@ -15831,6 +16050,59 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@braks/vue-flow": {
+      "version": "0.4.39",
+      "resolved": "https://registry.npmjs.org/@braks/vue-flow/-/vue-flow-0.4.39.tgz",
+      "integrity": "sha512-ZWKEwvEDKZe0Yw2sS8RxmxLs1k3O9DGFF0rk5xj+zWlExm15uBBhHAf8rWIRVULEbkjOmDwJEJ4bQrqwHn4pdA==",
+      "requires": {
+        "@vueuse/core": "^9.1.0",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "dependencies": {
+        "@vueuse/core": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.2.0.tgz",
+          "integrity": "sha512-/MZ6qpz6uSyaXrtoeBWQzAKRG3N7CvfVWvQxiM3ei3Xe5ydOjjtVbo7lGl9p8dECV93j7W8s63A8H0kFLpLyxg==",
+          "requires": {
+            "@types/web-bluetooth": "^0.0.15",
+            "@vueuse/metadata": "9.2.0",
+            "@vueuse/shared": "9.2.0",
+            "vue-demi": "*"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.13.11",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+              "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+              "requires": {}
+            }
+          }
+        },
+        "@vueuse/metadata": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.2.0.tgz",
+          "integrity": "sha512-exN4KE6iquxDCdt72BgEhb3tlOpECtD61AUdXnUqBTIUCl70x1Ar/QXo3bYcvxmdMS2/peQyfeTzBjRTpvL5xw=="
+        },
+        "@vueuse/shared": {
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.2.0.tgz",
+          "integrity": "sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==",
+          "requires": {
+            "vue-demi": "*"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.13.11",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+              "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+              "requires": {}
+            }
+          }
+        }
+      }
+    },
     "@ckpack/vue-color": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
@@ -16999,6 +17271,12 @@
         "@types/node": "*"
       }
     },
+    "@types/dagre": {
+      "version": "0.7.48",
+      "resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.48.tgz",
+      "integrity": "sha512-rF3yXSwHIrDxEkN6edCE4TXknb5YSEpiXfLaspw1I08grC49ZFuAVGOQCmZGIuLUGoFgcqGlUFBL/XrpgYpQgw==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "8.4.3",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.3.tgz",
@@ -19096,6 +19374,81 @@
       "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==",
       "dev": true
     },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
+    "dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "requires": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "data-uri-to-buffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
@@ -21041,6 +21394,14 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index c7156b9491..9e260ae597 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -15,12 +15,14 @@
     "postinstall": "node scripts/updateNuxtRouting.js"
   },
   "dependencies": {
+    "@braks/vue-flow": "^0.4.39",
     "@ckpack/vue-color": "^1.2.0",
     "@vuelidate/core": "^2.0.0-alpha.44",
     "@vuelidate/validators": "^2.0.0-alpha.31",
     "@vueuse/core": "^9.0.2",
     "@vueuse/integrations": "^9.0.2",
     "ant-design-vue": "^3.2.11",
+    "dagre": "^0.8.5",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "httpsnippet": "^2.0.0",
@@ -62,6 +64,7 @@
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",
+    "@types/dagre": "^0.7.48",
     "@types/file-saver": "^2.0.5",
     "@types/papaparse": "^5.3.2",
     "@types/sortablejs": "^1.13.0",
diff --git a/packages/noco-docs/content/en/setup-and-usages/meta-management.md b/packages/noco-docs/content/en/setup-and-usages/meta-management.md
index 474e32dbd0..d4a0483165 100644
--- a/packages/noco-docs/content/en/setup-and-usages/meta-management.md
+++ b/packages/noco-docs/content/en/setup-and-usages/meta-management.md
@@ -55,16 +55,23 @@ From the destination project, go to `Project Metadata`. Under ``Export / Import
 
 Go to `Project Metadata`, under ``Metadata``, you can see your metadata sync status. If it is out of sync, you can sync the schema. See <a href="./sync-schema">Sync Schema</a> for more.
 
-<img width="1480" alt="image" src="https://user-images.githubusercontent.com/35857179/189116339-22b202ef-7674-4682-bab7-2b8625e13ea2.png">
+<img width="1418" alt="image" src="https://user-images.githubusercontent.com/35809690/191258001-a4385df0-e796-4fa1-8ea4-a25361cd2d91.png">
 
 ## UI Access Control
 
 Go to `Project Metadata`, under ``UI Access Control``, you can control the access to each table by roles. 
 
-<img width="1480" alt="image" src="https://user-images.githubusercontent.com/35857179/189116502-78a0dc75-70cb-4bbe-a676-93af53ecca22.png">
+<img width="1417" alt="image" src="https://user-images.githubusercontent.com/35809690/191258150-3abe8de9-bab9-46fe-9095-01b8815b57f2.png">
+
+## ERD
+
+Go to `Project Metadata`, under ``ERD View``, you can see the ERD of your database.
+
+<img width="1419" alt="image" src="https://user-images.githubusercontent.com/35809690/191258324-18bd4ed0-521b-4480-a3f6-fe4660b8ddd5.png">
+
 
 ## Miscellaneous
 
 Currently only `Show M2M Tables` can be configurated under Miscellaneous.
 
-<img width="1495" alt="image" src="https://user-images.githubusercontent.com/35857179/189116547-3c5ce944-82c0-4068-b91c-60f45b862d32.png">
\ No newline at end of file
+<img width="1409" alt="image" src="https://user-images.githubusercontent.com/35809690/191258441-72a12941-2d2b-4a0d-84b8-f7f8783aa4e8.png">
\ No newline at end of file
diff --git a/packages/nocodb-sdk/package-lock.json b/packages/nocodb-sdk/package-lock.json
index 6d5f785843..6fbe1b661d 100644
--- a/packages/nocodb-sdk/package-lock.json
+++ b/packages/nocodb-sdk/package-lock.json
@@ -234,6 +234,15 @@
         "vscode-textmate": "5.2.0"
       }
     },
+    "node_modules/pkg-conf/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/swagger-typescript-api": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/swagger-typescript-api/-/swagger-typescript-api-10.0.1.tgz",
@@ -411,6 +420,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oas-resolver/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
       "version": "5.3.1",
       "dev": true,
@@ -434,6 +452,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/conventional-changelog-core/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/highlight/node_modules/supports-color": {
       "version": "5.5.0",
       "dev": true,
@@ -783,6 +810,12 @@
         "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
       }
     },
+    "node_modules/commitizen/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
     "node_modules/decamelize": {
       "version": "1.2.0",
       "dev": true,
@@ -1195,6 +1228,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/git-semver-tags/node_modules/normalize-package-data": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^4.0.1",
+        "is-core-module": "^2.5.0",
+        "semver": "^7.3.4",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/cli-boxes": {
       "version": "2.2.1",
       "dev": true,
@@ -1406,6 +1454,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/pkg-conf/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@babel/core/node_modules/json5": {
       "version": "2.2.1",
       "dev": true,
@@ -1436,6 +1497,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/git-semver-tags/node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prettier": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
@@ -1565,6 +1638,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/gh-pages/node_modules/array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+      "dev": true,
+      "dependencies": {
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/escape-goat": {
       "version": "2.1.1",
       "dev": true,
@@ -1666,6 +1751,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/standard-version/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cosmiconfig-typescript-loader": {
       "version": "1.0.6",
       "dev": true,
@@ -2156,6 +2253,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/nyc/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true
+    },
     "node_modules/@babel/template": {
       "version": "7.16.7",
       "dev": true,
@@ -2539,6 +2642,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typedoc/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/trim-repeated": {
       "version": "1.0.0",
       "dev": true,
@@ -2661,6 +2773,18 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/conventional-changelog-core/node_modules/p-locate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+      "integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "dev": true,
@@ -2874,6 +2998,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/git-semver-tags/node_modules/normalize-package-data/node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/cspell-io": {
       "version": "4.1.7",
       "dev": true,
@@ -3092,6 +3231,18 @@
         "node": ">= 10"
       }
     },
+    "node_modules/commitizen/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/git-raw-commits/node_modules/meow": {
       "version": "8.1.2",
       "dev": true,
@@ -3558,6 +3709,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/standard-version/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
     "node_modules/@cspell/dict-cpp": {
       "version": "1.1.40",
       "dev": true,
@@ -3767,6 +3927,18 @@
         "node": "*"
       }
     },
+    "node_modules/inquirer/node_modules/onetime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+      "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/expand-tilde": {
       "version": "2.0.2",
       "dev": true,
@@ -4224,6 +4396,15 @@
         "url": "https://github.com/sponsors/mysticatea"
       }
     },
+    "node_modules/commitizen/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "dev": true,
@@ -4266,6 +4447,20 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/commitizen/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.0",
       "dev": true,
@@ -4673,6 +4868,15 @@
         }
       }
     },
+    "node_modules/commitizen/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/serialize-error/node_modules/type-fest": {
       "version": "0.13.1",
       "dev": true,
@@ -5144,6 +5348,15 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "dev": true,
@@ -5160,6 +5373,21 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/standard-version/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint-module-utils/node_modules/p-limit": {
       "version": "1.3.0",
       "dev": true,
@@ -5762,6 +5990,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/conventional-changelog-core/node_modules/p-limit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/oas-resolver/node_modules/yargs": {
       "version": "17.5.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.5.1.tgz",
@@ -5902,6 +6142,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/conventional-changelog-core/node_modules/p-try": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+      "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/prettier-linter-helpers": {
       "version": "1.0.0",
       "dev": true,
@@ -6127,6 +6376,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/gh-pages/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/ignore-walk": {
       "version": "3.0.4",
       "dev": true,
@@ -6178,6 +6436,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/inquirer/node_modules/mimic-fn": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.0.1",
       "dev": true,
@@ -6461,6 +6728,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/conventional-changelog-core/node_modules/locate-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+      "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^2.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "dev": true,
@@ -7101,6 +7381,18 @@
         "node": ">=4.8"
       }
     },
+    "node_modules/standard-version/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/spawn-wrap": {
       "version": "2.0.0",
       "dev": true,
@@ -7133,6 +7425,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "2.0.1",
       "dev": true,
@@ -7210,6 +7514,21 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/standard-version/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@nodelib/fs.walk": {
       "version": "1.2.8",
       "dev": true,
@@ -7230,6 +7549,18 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/conventional-changelog-writer/node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/eslint-plugin-import/node_modules/debug": {
       "version": "2.6.9",
       "dev": true,
@@ -7411,6 +7742,15 @@
         "node": ">=10.18.0 <11 || >=12.14.0 <13 || >=14"
       }
     },
+    "node_modules/commitizen/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
     "node_modules/oas-kit-common": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/oas-kit-common/-/oas-kit-common-1.0.8.tgz",
@@ -7463,6 +7803,21 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/standard-version/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "dev": true,
@@ -8451,6 +8806,15 @@
         "ini": "^1.3.2"
       }
     },
+    "node_modules/standard-version/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/semver-diff": {
       "version": "3.1.1",
       "dev": true,
@@ -8823,6 +9187,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/standard-version/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
     "node_modules/eslint/node_modules/@babel/code-frame": {
       "version": "7.12.11",
       "dev": true,
@@ -9475,6 +9845,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pkg-conf/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/normalize-package-data/node_modules/semver": {
       "version": "5.7.1",
       "dev": true,
@@ -9598,6 +9980,18 @@
       "engines": {
         "node": ">=8"
       }
+    },
+    "node_modules/commitizen/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
     }
   },
   "dependencies": {
@@ -10468,6 +10862,12 @@
       "version": "2.1.0",
       "dev": true
     },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "dev": true
+    },
     "array.prototype.flat": {
       "version": "1.2.5",
       "dev": true,
@@ -10928,6 +11328,41 @@
         "strip-json-comments": "3.0.1"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
+        },
         "cz-conventional-changelog": {
           "version": "3.2.0",
           "dev": true,
@@ -10941,6 +11376,12 @@
             "word-wrap": "^1.0.3"
           }
         },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
         "fs-extra": {
           "version": "8.1.0",
           "dev": true,
@@ -10962,6 +11403,12 @@
             "path-is-absolute": "^1.0.0"
           }
         },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
+        },
         "jsonfile": {
           "version": "4.0.0",
           "dev": true,
@@ -10981,6 +11428,15 @@
           "version": "3.0.1",
           "dev": true
         },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
         "universalify": {
           "version": "0.1.2",
           "dev": true
@@ -11139,6 +11595,16 @@
             "strip-bom": "^3.0.0"
           }
         },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
         "normalize-package-data": {
           "version": "3.0.3",
           "dev": true,
@@ -11149,6 +11615,36 @@
             "validate-npm-package-license": "^3.0.1"
           }
         },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "dev": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==",
+          "dev": true
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+          "dev": true
+        },
         "path-type": {
           "version": "3.0.0",
           "dev": true,
@@ -11254,6 +11750,15 @@
         "through2": "^4.0.0"
       },
       "dependencies": {
+        "hosted-git-info": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+          "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
         "meow": {
           "version": "8.1.2",
           "dev": true,
@@ -11648,6 +12153,12 @@
             "color-name": "1.1.3"
           }
         },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+          "dev": true
+        },
         "escape-string-regexp": {
           "version": "1.0.5",
           "dev": true
@@ -12614,6 +13125,15 @@
         "globby": "^6.1.0"
       },
       "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+          "dev": true,
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
         "commander": {
           "version": "2.20.3",
           "dev": true
@@ -12638,6 +13158,15 @@
             "pinkie-promise": "^2.0.0"
           }
         },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
         "pify": {
           "version": "2.3.0",
           "dev": true
@@ -12717,6 +13246,15 @@
         "semver": "^6.0.0"
       },
       "dependencies": {
+        "hosted-git-info": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+          "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
         "meow": {
           "version": "8.1.2",
           "dev": true,
@@ -12734,6 +13272,29 @@
             "yargs-parser": "^20.2.3"
           }
         },
+        "normalize-package-data": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+          "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+          "dev": true,
+          "requires": {
+            "hosted-git-info": "^4.0.1",
+            "is-core-module": "^2.5.0",
+            "semver": "^7.3.4",
+            "validate-npm-package-license": "^3.0.1"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "7.3.7",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+              "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+              "dev": true,
+              "requires": {
+                "lru-cache": "^6.0.0"
+              }
+            }
+          }
+        },
         "semver": {
           "version": "6.3.0",
           "dev": true
@@ -14089,6 +14650,12 @@
             "strip-ansi": "^6.0.0"
           }
         },
+        "y18n": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+          "dev": true
+        },
         "yargs": {
           "version": "15.4.1",
           "dev": true,
@@ -14155,6 +14722,12 @@
             "y18n": "^5.0.5",
             "yargs-parser": "^21.0.0"
           }
+        },
+        "yargs-parser": {
+          "version": "21.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+          "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+          "dev": true
         }
       }
     },
@@ -14455,6 +15028,31 @@
           "requires": {
             "locate-path": "^3.0.0"
           }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+          "dev": true
         }
       }
     },
@@ -15033,6 +15631,15 @@
         "yargs": "^16.0.0"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
         "chalk": {
           "version": "2.4.2",
           "dev": true,
@@ -15049,6 +15656,48 @@
             "locate-path": "^6.0.0",
             "path-exists": "^4.0.0"
           }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^5.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^3.0.2"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -15528,6 +16177,15 @@
         "shiki": "^0.10.1"
       },
       "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
         "glob": {
           "version": "8.0.3",
           "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
@@ -15804,6 +16462,12 @@
     "yn": {
       "version": "3.1.1",
       "dev": true
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
     }
   }
 }
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 6fdf188825..6665a3b9eb 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -122,6 +122,7 @@ export interface TableType {
   columnsById?: object;
   slug?: string;
   project_id?: string;
+  mm?: boolean | number;
 }
 
 export interface ViewType {
diff --git a/scripts/cypress/integration/common/9b_ERD.js b/scripts/cypress/integration/common/9b_ERD.js
new file mode 100644
index 0000000000..6d1f4a9828
--- /dev/null
+++ b/scripts/cypress/integration/common/9b_ERD.js
@@ -0,0 +1,373 @@
+import { mainPage, settingsPage } from "../../support/page_objects/mainPage";
+import {loginPage, projectsPage} from "../../support/page_objects/navigation";
+import { isTestSuiteActive, sakilaSqlViews, sakilaTables } from "../../support/page_objects/projectConstants";
+
+export const genTest = (apiType, dbType) => {
+  if (!isTestSuiteActive(apiType, dbType)) return;
+
+  describe(`${apiType.toUpperCase()} ERD`, () => {
+    // before(() => {
+    //   loginPage.loginAndOpenProject(apiType, dbType);
+    //   cy.openTableTab("Country", 25);
+    //   cy.saveLocalStorage();
+    // });
+
+    beforeEach(() => {
+      cy.restoreLocalStorage();
+    })
+
+    afterEach(() => {
+      cy.saveLocalStorage();
+    })
+
+    after(() => {
+      cy.restoreLocalStorage();
+      cy.closeTableTab("Country");
+      cy.saveLocalStorage();
+    });
+
+    // Test cases
+
+    it(`Enable MM setting Open Table ERD`, () => {
+      cy.openTableTab("Country", 25);
+      mainPage.toggleShowMMSetting();
+      
+      mainPage.openErdTab();
+      mainPage.closeMetaTab();
+    });
+
+    it(`Verify ERD Context menu in all table view`, () => {
+      mainPage.openErdTab();
+      cy.get('.nc-erd-context-menu').should('be.visible');
+      cy.get('.nc-erd-context-menu').get('.nc-erd-histogram').should('be.visible');
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').should('have.length', 3);
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(0).should('have.class', 'ant-checkbox-checked');
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(1).should('have.class', 'ant-checkbox-checked');
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').eq(2).should('not.have.class', 'ant-checkbox-checked');
+
+      cy.get('.nc-erd-context-menu').find('.nc-erd-showColumns-label').dblclick();
+      cy.get('.nc-erd-context-menu').find('.ant-checkbox').should('have.length', 5);
+    });
+
+    it("Verify ERD of all tables view and verify columns of actor and payment with default config", () => {
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-table-node').should('have.length', 12)
+      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 14)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 11)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 17)
+
+      for(const tableName of sakilaTables) {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-${tableName}`).should('exist');
+      }
+
+      // Actor table
+      [
+        'actor_id',
+        'first_name',
+        'last_name',
+        'last_update',
+        'film_list'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor`).find(`.nc-erd-table-node-actor-column-${colTitle}`).should('exist');
+      });
+
+      // Payment table
+      [
+        'payment_id',
+        'customer_id',
+        'staff_id',
+        'rental_id',
+        'amount',
+        'payment_date',
+        'last_update',
+        'customer',
+        'rental',
+        'staff'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-payment`).find(`.nc-erd-table-node-payment-column-${colTitle}`).should('exist');
+      });
+    });
+
+    it("Verify ERD of all tables view and verify columns of actor and payment with default config with showAllColumn disabled", () => {
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+      cy.get('.nc-erd-showPkAndFk-checkbox-disabled').should('exist');
+      cy.get('.nc-erd-showPkAndFk-checkbox-unchecked').should('exist');
+
+      // Actor table
+      [
+        'film_list'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor`).find(`.nc-erd-table-node-actor-column-${colTitle}`).should('exist');
+      });
+
+      // Payment table
+      [
+        'customer',
+        'rental',
+        'staff'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-payment`).find(`.nc-erd-table-node-payment-column-${colTitle}`).should('exist');
+      });
+    });
+
+    it("Verify ERD of all tables view and verify columns of actor and payment with default config with showPkAndFk disabled", () => {
+      // enable showAllColumn
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showPkAndFk-checkbox').click();
+
+      // Actor table
+      [
+        'last_name',
+        'last_update',
+        'film_list'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor`).find(`.nc-erd-table-node-actor-column-${colTitle}`).should('exist');
+      });
+
+      // Payment table
+      [
+        'amount',
+        'payment_date',
+        'last_update',
+        'customer',
+        'rental',
+        'staff'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-payment`).find(`.nc-erd-table-node-payment-column-${colTitle}`).should('exist');
+      });
+    });
+
+    it("Verify ERD of all tables view with sql grid on and verify columns of ActorInfo", () => {
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showViews-checkbox').click();
+
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-table-node').should('have.length', 19)
+      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 14)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 11)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 17)
+
+      for(const tableName of sakilaTables) {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-${tableName}`).should('exist');
+      }
+      
+      for(const tableName of sakilaSqlViews) {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-${tableName}`).should('exist');
+      }
+
+      // ActorInfo SQL View
+      [
+        'actor_id',
+        'first_name',
+        'last_name',
+        'film_info'
+      ].forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-actor_info`).find(`.nc-erd-table-node-actor_info-column-${colTitle}`).should('exist');
+      })
+
+    });
+
+    it("Verify show MM tables", () => {
+      cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-store`).should('not.exist');
+      // disable showViews
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showViews-checkbox').click();
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showMMTables-checkbox').click();
+
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-table-node').should('have.length', 16)
+      cy.get('.nc-erd-vue-flow').find('.vue-flow__edge').should('have.length', 26)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-circle').should('have.length', 22)
+      cy.get('.nc-erd-vue-flow').find('.nc-erd-edge-rect').should('have.length', 30)
+
+      // Check if store table is present
+      cy.get('.nc-erd-vue-flow').find(`.nc-erd-table-node-store`).should('exist');
+    })
+
+    it("Verify show junction table names", () => {
+      // disable showViews
+      cy.get('.nc-erd-context-menu').get('.nc-erd-showJunctionTableNames-checkbox').click();
+
+      cy.get('.nc-erd-vue-flow').get('.nc-erd-table-label-filmactor-film_actor').should('exist');
+      mainPage.closeMetaTab();
+    })
+
+    it('Verify table ERD view of country', () => {
+      mainPage.openTableErdView();
+
+      cy.get('.nc-erd-vue-flow-single-table').find('.nc-erd-table-node').should('have.length', 2)
+      cy.get('.nc-erd-vue-flow-single-table').find('.vue-flow__edge').should('have.length', 1)
+      cy.get('.nc-erd-vue-flow-single-table').find('.nc-erd-edge-circle').should('have.length', 1)
+      cy.get('.nc-erd-vue-flow-single-table').find('.nc-erd-edge-rect').should('have.length', 1)
+
+      const countryColumns = [
+        'country_id',
+        'country',
+        'last_update',
+        'city_list'
+      ]
+
+      // Country table
+      countryColumns.forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow-single-table').find(`.nc-erd-table-node-country`).find(`.nc-erd-table-node-country-column-${colTitle}`).should('exist');
+      });
+
+      const cityColumns = [
+        'city_id',
+        'city',
+        'last_update',
+        'country',
+        'address_list'
+      ]
+
+      // City table
+      cityColumns.forEach((colTitle) => {
+        cy.get('.nc-erd-vue-flow-single-table').find(`.nc-erd-table-node-city`).find(`.nc-erd-table-node-city-column-${colTitle}`).should('exist');
+      });
+    })
+
+    it('Verify table ERD view of country showAllColumn disabled', () => {
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+        cy.get('.nc-erd-showPkAndFk-checkbox-disabled').should('exist');
+        cy.get('.nc-erd-showPkAndFk-checkbox-unchecked').should('exist');
+
+        const countryColumns = [
+          'city_list'
+        ]
+  
+        // Country table
+        countryColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-country`).find(`.nc-erd-table-node-country-column-${colTitle}`).should('exist');
+        });
+  
+        const cityColumns = [
+          'country',
+          'address_list'
+        ]
+  
+        // City table
+        cityColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-city`).find(`.nc-erd-table-node-city-column-${colTitle}`).should('exist');
+        });
+
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showColumns-checkbox').click();
+      })
+    })
+
+    it('Verify table ERD view of country show PK AND FK disabled', () => {
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showPkAndFk-checkbox').click();
+
+        const countryColumns = [
+          'country',
+          'last_update',
+          'city_list'
+        ]
+  
+        // Country table
+        countryColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-country`).find(`.nc-erd-table-node-country-column-${colTitle}`).should('exist');
+        });
+  
+        const cityColumns = [
+          'city',
+          'last_update',
+          'country',
+          'address_list'
+        ]
+  
+        // City table
+        cityColumns.forEach((colTitle) => {
+          cy.get(`.nc-erd-table-node-city`).find(`.nc-erd-table-node-city-column-${colTitle}`).should('exist');
+        });
+
+        cy.get('.nc-erd-context-menu').get('.nc-erd-showPkAndFk-checkbox').click();
+
+      })
+      cy.getActiveModal().find('.nc-modal-close').click({ force: true });
+    })
+
+    it('create column and check if the change is in the schema', () => {
+      mainPage.addColumn('test_column', 'country')
+
+      // table view
+      mainPage.openTableErdView();
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('exist');
+      })
+      cy.getActiveModal().find('.nc-modal-close').click({ force: true });
+
+      // All table view
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('exist');
+      })
+      mainPage.closeMetaTab();
+
+
+      mainPage.deleteColumn('test_column')
+      
+      // table view
+      mainPage.openTableErdView();
+      cy.get('.nc-erd-vue-flow-single-table').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('not.exist');
+      })
+      cy.getActiveModal().find('.nc-modal-close').click({ force: true });
+
+      // All table view
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-country').find('.nc-erd-table-node-country-column-test_column').should('not.exist');
+      })
+      mainPage.closeMetaTab();
+    })
+
+    it('Create table should reflected in ERD', () => {
+      cy.createTable('new')
+
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-new').should('exist');
+      })
+      mainPage.closeMetaTab();
+
+      cy.deleteTable('new')
+      
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-table-node-new').should('not.exist');
+      })
+      mainPage.closeMetaTab();
+    })
+
+    it(`Disable MM setting Open Table ERD and check easter egg should not work`, () => {
+      mainPage.toggleShowMMSetting();
+      
+      mainPage.openErdTab();
+      cy.get('.nc-erd-vue-flow').within(() => {
+        cy.get('.nc-erd-context-menu').find('.nc-erd-showColumns-label').dblclick();
+        cy.get('.nc-erd-context-menu').find('.ant-checkbox').should('have.length', 3);
+      })
+
+      mainPage.closeMetaTab();
+    });
+  });
+};
+
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Raju Udava <sivadstala@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
diff --git a/scripts/cypress/integration/spec/roleValidation.spec.js b/scripts/cypress/integration/spec/roleValidation.spec.js
index 56b71fa398..e245a63649 100644
--- a/scripts/cypress/integration/spec/roleValidation.spec.js
+++ b/scripts/cypress/integration/spec/roleValidation.spec.js
@@ -41,7 +41,7 @@ export function _advSettings(roleType, mode) {
 
     cy.get(`[data-menu-id="teamAndAuth"]`).should("exist");
     cy.get(`[data-menu-id="appStore"]`).should("exist");
-    cy.get(`[data-menu-id="metaData"]`).should("exist");
+    cy.get(`[data-menu-id="projMetaData"]`).should("exist");
     cy.get(`[data-menu-id="audit"]`).should("exist");
 
     settingsPage.closeMenu();
@@ -254,8 +254,8 @@ export function _viewMenu(roleType, mode) {
   // Lock, Download, Upload
   let menuWithSubmenuCount = 3;
 
-  // share view list, webhook
-  let menuWithoutSubmenuCount = 3;
+  // share view list, webhook, api snippet, erd
+  let menuWithoutSubmenuCount = 4;
 
   cy.openTableTab(columnName, 25);
 
@@ -265,12 +265,14 @@ export function _viewMenu(roleType, mode) {
   if (roleType === "editor") {
     // Download / Upload CSV
     menuWithSubmenuCount = 2;
-    // Get API Snippet
-    menuWithoutSubmenuCount = 1;
-    if (mode === "baseShare") menuWithoutSubmenuCount = 0;
+    // Get API Snippet and ERD
+    menuWithoutSubmenuCount = 2;
+    // ERD
+    if (mode === "baseShare") menuWithoutSubmenuCount = 1;
   } else if (roleType === "commenter" || roleType === "viewer") {
     // Download CSV & Download excel
     menuWithSubmenuCount = 0;
+    // Get API Snippet and ERD
     menuWithoutSubmenuCount = 2;
   }
 
diff --git a/scripts/cypress/integration/test/restMisc.js b/scripts/cypress/integration/test/restMisc.js
index d348792c20..fc35c2003a 100644
--- a/scripts/cypress/integration/test/restMisc.js
+++ b/scripts/cypress/integration/test/restMisc.js
@@ -7,7 +7,8 @@ let t6e = require("../common/6e_project_operations");
 let t6f = require("../common/6f_attachments");
 let t6g = require("../common/6g_base_share");
 let t7a = require("../common/7a_create_project_from_excel");
-let t8a = require("../common/8a_webhook")
+let t8a = require("../common/8a_webhook");
+let t9b = require("../common/9b_ERD");
 const {
     setCurrentMode,
 } = require("../../support/page_objects/projectConstants");
@@ -15,19 +16,22 @@ const {
 const nocoTestSuite = (apiType, dbType) => {
     setCurrentMode(apiType, dbType);
     t01.genTest(apiType, dbType);
-
+    
     t6b.genTest(apiType, dbType);
     t6d.genTest(apiType, dbType);
     // exclude@ncv2 t6c.genTest(apiType, dbType);
     t6f.genTest(apiType, dbType);
-    t6g.genTest(apiType, dbType);
 
+    t9b.genTest(apiType, dbType);
+
+    t6g.genTest(apiType, dbType);
+    
     // webhook tests
     t8a.genTest(apiType, dbType)
-
+    
     // **deletes created project, hence place it @ end
     t6e.genTest(apiType, dbType);
-
+    
     // intended to keep this after earlier project deletion
     // creates project using excel & deletes it
     t7a.genTest(apiType, dbType);
diff --git a/scripts/cypress/support/page_objects/mainPage.js b/scripts/cypress/support/page_objects/mainPage.js
index 63b431512a..987999a850 100644
--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@@ -16,7 +16,7 @@ export class _settingsPage {
     // menu
     this.TEAM_N_AUTH = "teamAndAuth";
     this.APPSTORE = "appStore";
-    this.PROJ_METADATA = "metaData";
+    this.PROJ_METADATA = "projMetaData";
     this.AUDIT = "audit";
 
     // submenu
@@ -26,6 +26,8 @@ export class _settingsPage {
     this.METADATA = "metaData";
     this.UI_ACCESS_CONTROL = "acl";
     this.AUDIT_LOG = "audit";
+    this.ERD = "erd";
+    this.MISC = "misc";
   }
 
   openMenu(menuId) {
@@ -614,6 +616,35 @@ export class _mainPage {
   toggleRightSidebar() {
     cy.get(".nc-toggle-right-navbar").should("exist").click();
   }
+
+  openMiscTab() {
+    // open Project metadata tab
+    //
+    settingsPage.openMenu(settingsPage.PROJ_METADATA);
+    settingsPage.openTab(settingsPage.MISC);
+  }
+
+  toggleShowMMSetting() {
+    // toggle show MM setting
+    //
+    this.openMiscTab();
+    cy.get(".nc-settings-meta-misc").click();
+
+    settingsPage.openTab(settingsPage.TEAM_N_AUTH);
+    this.closeMetaTab();
+  }
+
+  openErdTab() {
+    // open Project metadata tab
+    //
+    settingsPage.openMenu(settingsPage.PROJ_METADATA);
+    settingsPage.openTab(settingsPage.ERD);
+  }
+
+  openTableErdView() {
+    cy.get(".nc-actions-menu-btn").should("exist").click();
+    cy.get(".nc-view-action-erd").should("exist").click();
+  }
 }
 
 export const mainPage = new _mainPage();
diff --git a/scripts/cypress/support/page_objects/projectConstants.js b/scripts/cypress/support/page_objects/projectConstants.js
index 3973378f12..103cad3c7f 100644
--- a/scripts/cypress/support/page_objects/projectConstants.js
+++ b/scripts/cypress/support/page_objects/projectConstants.js
@@ -156,3 +156,13 @@ export function setProjectString(projStr) {
 export function getProjectString() {
     return xcdbProjectString;
 }
+
+const sakilaTables = [
+    'actor', 'address', 'category', 'city', 'country', 'customer', 'film', 'film_text', 'language', 'payment', 'rental', 'staff'
+]
+
+const sakilaSqlViews = [
+    'actor_info', 'customer_list', 'film_list', 'nicer_but_slower_film_list', 'sales_by_film_category', 'sales_by_store', 'staff_list'
+]
+
+export { sakilaTables, sakilaSqlViews }
\ No newline at end of file
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 5d11767ceb..c0f2df3452 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -6069,6 +6069,12 @@
           },
           "project_id": {
             "type": "string"
+          },
+          "mm": {
+            "type": [
+              "boolean",
+              "number"
+            ]
           }
         },
         "required": [