) {
React.useEffect(() => {
- props.onInit?.({ fitView: vi.fn() })
- }, [props.onInit])
+ props.onInit?.({ fitView: vi.fn() });
+ }, [props.onInit]);
return (
{props.nodes.length}
{props.edges.length}
- props.onConnect?.({ source: 'table-1', target: 'table-2' })} />
- props.onEdgeClick?.(event, props.edges[0] ?? edge)} />
- props.onEdgeClick?.(event, { ...edge, label: undefined })} />
- props.onNodeDoubleClick?.(event, props.nodes[0] ?? initialNode)} />
+
+ props.onConnect?.({ source: "table-1", target: "table-2" })
+ }
+ />
+
+ props.onEdgeClick?.(event, props.edges[0] ?? edge)
+ }
+ />
+
+ props.onEdgeClick?.(event, { ...edge, label: undefined })
+ }
+ />
+
+ props.onNodeDoubleClick?.(event, props.nodes[0] ?? initialNode)
+ }
+ />
{props.children}
- )
+ );
}
return {
@@ -84,55 +132,97 @@ vi.mock('@xyflow/react', async () => {
Controls: () =>
- props.setNewTableName('audit_log')} />
- props.setNewTableName("audit_log")}
+ />
+
),
EditEdgeModal: (props: any) => (
- props.setRelLabel(' fk_new ')} />
- props.setRelLabel(" fk_new ")}
+ />
+
@@ -141,87 +231,267 @@ vi.mock('./components/modals', () => ({
{props.shareLinkUrl}
{props.shareLinkError}
-
),
GroupModal: (props: any) => (
- props.setNewGroupName('Billing')} />
- props.onAssignBusinessGroup(props.nodes[0]?.id ?? 'missing-node', 'missing')} />
- props.onAssignBusinessGroup(props.nodes[0]?.id ?? 'missing-node', props.businessGroups[0]?.id ?? '')} />
- props.onDeleteBusinessGroup(props.businessGroups[0]?.id ?? 'missing')} />
- props.setNewGroupName("Billing")}
+ />
+
+ props.onAssignBusinessGroup(
+ props.nodes[0]?.id ?? "missing-node",
+ "missing",
+ )
+ }
+ />
+
+ props.onAssignBusinessGroup(
+ props.nodes[0]?.id ?? "missing-node",
+ props.businessGroups[0]?.id ?? "",
+ )
+ }
+ />
+
+ props.onDeleteBusinessGroup(
+ props.businessGroups[0]?.id ?? "missing",
+ )
+ }
+ />
+
),
CardinalityModal: (props: any) => {
const recommendation = {
- index_name: 'idx_users_email',
- columns: ['email'],
- access_method: 'btree',
+ index_name: "idx_users_email",
+ columns: ["email"],
+ access_method: "btree",
estimated_distinct: 50,
cardinality_ratio: 0.5,
- strength: 'recommended',
- reason: 'selective',
- source: 'cardinality-wizard',
- }
+ strength: "recommended",
+ reason: "selective",
+ source: "cardinality-wizard",
+ };
return (
{props.formatPercent(0.5)}
- {props.strengthLabel('recommended')}
- {props.strengthLabel('consider')}
- {props.strengthLabel('skip')}
- props.onApplyCardinalityRecommendation({ ...recommendation, strength: 'skip' })} />
+
+ {props.strengthLabel("recommended")}
+
+
+ {props.strengthLabel("consider")}
+
+
+ {props.strengthLabel("skip")}
+
+
+ props.onApplyCardinalityRecommendation({
+ ...recommendation,
+ strength: "skip",
+ })
+ }
+ />
{props.isOpen ? (
<>
- props.onCardinalityTableChange('missing')} />
- props.onCardinalityTableChange('table-2')} />
- props.onCardinalityColumnToggle('email', true)} />
- props.onCardinalityDistinctCountChange('email', 'bad')} />
- props.onCardinalityDistinctCountChange('email', '50')} />
- props.onApplyCardinalityRecommendation(recommendation)} />
- props.onApplyCardinalityRecommendation(recommendation)} />
- props.onApplyCardinalityRecommendation({ ...recommendation, columns: undefined })} />
- props.onApplyCardinalityRecommendation({ ...recommendation, index_name: '', columns: [], strength: 'consider' })} />
- props.onApplyCardinalityRecommendation({ ...recommendation, index_name: 'idx_users_second', columns: ['id'] })} />
+ props.onCardinalityTableChange("missing")}
+ />
+ props.onCardinalityTableChange("table-2")}
+ />
+ props.onCardinalityColumnToggle("email", true)}
+ />
+
+ props.onCardinalityDistinctCountChange("email", "bad")
+ }
+ />
+
+ props.onCardinalityDistinctCountChange("email", "50")
+ }
+ />
+
+ props.onApplyCardinalityRecommendation(recommendation)
+ }
+ />
+
+ props.onApplyCardinalityRecommendation(recommendation)
+ }
+ />
+
+ props.onApplyCardinalityRecommendation({
+ ...recommendation,
+ columns: undefined,
+ })
+ }
+ />
+
+ props.onApplyCardinalityRecommendation({
+ ...recommendation,
+ index_name: "",
+ columns: [],
+ strength: "consider",
+ })
+ }
+ />
+
+ props.onApplyCardinalityRecommendation({
+ ...recommendation,
+ index_name: "idx_users_second",
+ columns: ["id"],
+ })
+ }
+ />
{
- const clearButton = document.querySelector('[aria-label="모든 노드 지우기"]')
- clearButton?.click()
- props.onApplyCardinalityRecommendation(recommendation)
+ const clearButton = document.querySelector(
+ '[aria-label="모든 노드 지우기"]',
+ );
+ clearButton?.click();
+ props.onApplyCardinalityRecommendation(recommendation);
}}
/>
-
- )
+ );
},
EditTableModal: (props: any) => (
-
),
-}))
+}));
-import App, { DiagramTable } from './App'
-import { snapshotToGraph } from './erd/convert'
+import App, { DiagramTable } from "./App";
+import { snapshotToGraph } from "./erd/convert";
const projects = [
- { project_space_uuid: 'p1', project_name: '' },
- { project_space_uuid: 'p2', project_name: 'HR' },
-]
-const connections = [{ db_connection_uuid: 'c1', conn_name: 'Warehouse' }]
+ { project_space_uuid: "p1", project_name: "" },
+ { project_space_uuid: "p2", project_name: "HR" },
+];
+const connections = [{ db_connection_uuid: "c1", conn_name: "Warehouse" }];
const snapshots = [
- { schema_snapshot_uuid: 's1', status: 'succeeded', schema_filter: 'billing' },
- { schema_snapshot_uuid: 's2', status: 'failed', schema_filter: null },
-]
+ { schema_snapshot_uuid: "s1", status: "succeeded", schema_filter: "billing" },
+ { schema_snapshot_uuid: "s2", status: "failed", schema_filter: null },
+];
beforeEach(() => {
- vi.clearAllMocks()
- api.getMe.mockResolvedValue({ subject: 'user', display_name: 'User', user_account_uuid: 'u' })
- api.listProjects.mockResolvedValue(projects)
- api.listConnections.mockResolvedValue(connections)
- api.listSnapshots.mockResolvedValue(snapshots)
- api.createProject.mockResolvedValue({ project_space_uuid: 'p3', project_name: 'New' })
- api.createConnection.mockResolvedValue({ db_connection_uuid: 'c2', conn_name: 'New DB' })
- api.createSnapshot.mockResolvedValue({ schema_snapshot_uuid: 's3', status: 'queued', schema_filter: 'public' })
+ vi.clearAllMocks();
+ api.getMe.mockResolvedValue({
+ subject: "user",
+ display_name: "User",
+ user_account_uuid: "u",
+ });
+ api.listProjects.mockResolvedValue(projects);
+ api.listConnections.mockResolvedValue(connections);
+ api.listSnapshots.mockResolvedValue(snapshots);
+ api.createProject.mockResolvedValue({
+ project_space_uuid: "p3",
+ project_name: "New",
+ });
+ api.createConnection.mockResolvedValue({
+ db_connection_uuid: "c2",
+ conn_name: "New DB",
+ });
+ api.createSnapshot.mockResolvedValue({
+ schema_snapshot_uuid: "s3",
+ status: "queued",
+ schema_filter: "public",
+ });
api.getSnapshot.mockResolvedValue({
- schema_snapshot_uuid: 's3',
- status: 'succeeded',
- schema_filter: 'public',
+ schema_snapshot_uuid: "s3",
+ status: "succeeded",
+ schema_filter: "public",
error_message: null,
snapshot_json: { relations: [], columns: [], pk_columns: [], fk_edges: [] },
- })
- api.createShareLink.mockResolvedValue({ url: 'http://localhost/api/share/one' })
+ });
+ api.createShareLink.mockResolvedValue({
+ url: "http://localhost/api/share/one",
+ });
exports.inferRelationships.mockReturnValue([
- { id: 'inferred', source: 'table-1', target: 'table-2', label: 'fk_inferred' },
- ])
- vi.stubGlobal('ResizeObserver', class { observe() {} unobserve() {} disconnect() {} })
- vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
- callback(0)
- return 1
- })
- Object.defineProperty(navigator, 'clipboard', {
+ {
+ id: "inferred",
+ source: "table-1",
+ target: "table-2",
+ label: "fk_inferred",
+ },
+ ]);
+ vi.stubGlobal(
+ "ResizeObserver",
+ class {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ },
+ );
+ vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+ callback(0);
+ return 1;
+ });
+ Object.defineProperty(navigator, "clipboard", {
configurable: true,
value: { writeText: vi.fn().mockResolvedValue(undefined) },
- })
-})
+ });
+});
afterEach(() => {
- cleanup()
- vi.useRealTimers()
- vi.unstubAllGlobals()
- vi.restoreAllMocks()
-})
+ cleanup();
+ vi.useRealTimers();
+ vi.unstubAllGlobals();
+ vi.restoreAllMocks();
+});
async function renderReadyApp() {
- render((null);
const [editingEdge, setEditingEdge] = useState(null);
- const [editingNode, setEditingNode] = useState | null>(null);
+ const [editingNode, setEditingNode] = useState | null>(
+ null,
+ );
const [isEditTableModalOpen, setIsEditTableModalOpen] = useState(false);
const [isAddTableModalOpen, setIsAddTableModalOpen] = useState(false);
const [newTableName, setNewTableName] = useState("");
@@ -313,7 +324,11 @@ export default function App() {
getSnapshot(snapshotId)
.then((s) => {
setSnapshot(s);
- if (s.status === "succeeded" || s.status === "failed" || s.status === "not_found") {
+ if (
+ s.status === "succeeded" ||
+ s.status === "failed" ||
+ s.status === "not_found"
+ ) {
clearInterval(timer);
if (selectedProjectId) {
listSnapshots(selectedProjectId)
@@ -367,9 +382,7 @@ export default function App() {
// ⚡ Bolt: Removed nodesById Map creation inside useMemo which iterates over all nodes and allocates memory.
// Using nodes.find() for single lookups is O(N) but avoids Map construction overhead, providing ~10x speedup and reducing GC pressure.
const cardinalityNode = useMemo(() => {
- return (
- nodes.find((n) => n.id === cardinalityTableId) ?? nodes[0] ?? null
- );
+ return nodes.find((n) => n.id === cardinalityTableId) ?? nodes[0] ?? null;
}, [cardinalityTableId, nodes]);
const cardinalityColumns = useMemo(() => {
if (!cardinalityNode) return [];
@@ -380,11 +393,7 @@ export default function App() {
cardinalityDistinctCounts[column.column_name] ?? "",
),
}));
- }, [
- cardinalityColumnSelections,
- cardinalityDistinctCounts,
- cardinalityNode,
- ]);
+ }, [cardinalityColumnSelections, cardinalityDistinctCounts, cardinalityNode]);
const cardinalityRecommendations = useMemo(
() =>
buildIndexRecommendations({
@@ -392,7 +401,11 @@ export default function App() {
rowCount: cardinalityRowCountNumber,
columns: cardinalityColumns,
}),
- [cardinalityColumns, cardinalityNode?.data.title, cardinalityRowCountNumber],
+ [
+ cardinalityColumns,
+ cardinalityNode?.data.title,
+ cardinalityRowCountNumber,
+ ],
);
const appliedCardinalityIndexes = useMemo(
() => cardinalityNode?.data.indexes ?? [],
@@ -404,7 +417,8 @@ export default function App() {
const columns = new Set();
for (const index of appliedCardinalityIndexes) {
if (index.index_name) names.add(index.index_name);
- if (index.columns && index.columns.length > 0) columns.add(index.columns.join(","));
+ if (index.columns && index.columns.length > 0)
+ columns.add(index.columns.join(","));
}
return { names, columns };
}, [appliedCardinalityIndexes]);
@@ -503,11 +517,14 @@ export default function App() {
}
}
- const onNodeDoubleClick = useCallback((event: React.MouseEvent, node: Node) => {
- event.preventDefault();
- setEditingNode(node as Node);
- setIsEditTableModalOpen(true);
- }, []);
+ const onNodeDoubleClick = useCallback(
+ (event: React.MouseEvent, node: Node) => {
+ event.preventDefault();
+ setEditingNode(node as Node);
+ setIsEditTableModalOpen(true);
+ },
+ [],
+ );
const onEdgeClick = useCallback((event: React.MouseEvent, edge: Edge) => {
event.preventDefault();
@@ -622,7 +639,11 @@ export default function App() {
}
function onDownloadMermaid() {
- downloadText("pg-erd-diagram.mermaid", exportMermaid(nodes, edges), "text/plain");
+ downloadText(
+ "pg-erd-diagram.mermaid",
+ exportMermaid(nodes, edges),
+ "text/plain",
+ );
}
function onDownloadDbml() {
@@ -630,7 +651,11 @@ export default function App() {
}
function onDownloadPrisma() {
- downloadText("pg-erd-diagram.prisma", exportPrisma(nodes, edges), "text/plain");
+ downloadText(
+ "pg-erd-diagram.prisma",
+ exportPrisma(nodes, edges),
+ "text/plain",
+ );
}
function onExportDictionaryCsv() {
@@ -696,10 +721,7 @@ export default function App() {
}));
}
- function onCardinalityDistinctCountChange(
- columnName: string,
- value: string,
- ) {
+ function onCardinalityDistinctCountChange(columnName: string, value: string) {
if (!/^\d*$/.test(value)) return;
setCardinalityDistinctCounts((prev) => ({
...prev,
@@ -729,7 +751,8 @@ export default function App() {
const recColumns = recommendation.columns?.join(",") ?? "";
if (
- (recommendation.index_name && appliedIndexNames.has(recommendation.index_name)) ||
+ (recommendation.index_name &&
+ appliedIndexNames.has(recommendation.index_name)) ||
(recColumns && appliedColumns.has(recColumns))
) {
return currentNodes;
@@ -806,7 +829,12 @@ export default function App() {
}
function onDeleteBusinessGroup(groupId: string) {
- if (!window.confirm("이 그룹을 삭제하면 포함된 모든 테이블에서 그룹 지정이 해제됩니다. 정말로 삭제하시겠습니까?")) return;
+ if (
+ !window.confirm(
+ "이 그룹을 삭제하면 포함된 모든 테이블에서 그룹 지정이 해제됩니다. 정말로 삭제하시겠습니까?",
+ )
+ )
+ return;
setBusinessGroups((groups) =>
groups.filter((group) => group.id !== groupId),
);
@@ -825,7 +853,6 @@ export default function App() {
);
}
-
function onDeleteTable() {
if (!editingNode) return;
if (!window.confirm("정말로 이 테이블을 삭제하시겠습니까?")) return;
@@ -834,7 +861,11 @@ export default function App() {
setNodes((nds) => nds.filter((n) => n.id !== editingNode.id));
// Remove connected edges
- setEdges((eds) => eds.filter((e) => e.source !== editingNode.id && e.target !== editingNode.id));
+ setEdges((eds) =>
+ eds.filter(
+ (e) => e.source !== editingNode.id && e.target !== editingNode.id,
+ ),
+ );
setIsEditTableModalOpen(false);
setEditingNode(null);
@@ -851,7 +882,9 @@ export default function App() {
if (!title.trim()) return;
// Parse columns from formData
- const updatedColumns: Array["data"]["columns"][number]> = [];
+ const updatedColumns: Array<
+ Node["data"]["columns"][number]
+ > = [];
for (let i = 0; i < editingNode.data.columns.length; i++) {
const colName = formData.get(`col_name_${i}`) as string;
if (colName === null) continue; // Deleted column
@@ -881,13 +914,13 @@ export default function App() {
columns: updatedColumns,
badges: {
...n.data.badges,
- pk: updatedColumns.some(c => c.is_pk)
- }
- }
+ pk: updatedColumns.some((c) => c.is_pk),
+ },
+ },
};
}
return n;
- })
+ }),
);
setIsEditTableModalOpen(false);
@@ -899,7 +932,6 @@ export default function App() {
setEditingNode(null);
}
-
function onAddTableSubmit() {
if (!newTableName.trim()) return;
const newId = `new_table_${Date.now()}`;
@@ -964,7 +996,9 @@ export default function App() {
/* v8 ignore next -- the save control is disabled until both fields are present */
if (!nextConnectionName || !connectionDsn) return;
if (!isSupportedConnectionDsn(connectionDsn)) {
- setError("Connection DSN must use postgresql://, postgres://, or snowflake:// with a host.");
+ setError(
+ "Connection DSN must use postgresql://, postgres://, or snowflake:// with a host.",
+ );
dsnInput.value = "";
setIsDsnPresent(false);
return;
@@ -1006,12 +1040,7 @@ export default function App() {
if (isAuthLoading) {
return (
-
+
pg-erd-cloud
Authenticating…
@@ -1020,7 +1049,8 @@ export default function App() {
if (!me) {
/* v8 ignore next -- the loaded unauthenticated state always records its rejection */
- const authGateMessage = authError ?? "Sign in before managing database metadata.";
+ const authGateMessage =
+ authError ?? "Sign in before managing database metadata.";
return (
Authentication required
@@ -1045,7 +1075,11 @@ export default function App() {
setActiveView(item.id)}
aria-current={activeView === item.id ? "page" : undefined}
>
@@ -1056,158 +1090,175 @@ export default function App() {
{activeView === "editor" ? (
<>
+
+
Project
+
+ setSelectedProjectId(e.target.value || null)}
+ style={{ flex: 1, padding: 8 }}
+ >
+
+ Select…
+
+ {projects.map((p) => (
+
+ {p.project_name}
+
+ ))}
+
+
+
-
Project
-
-
setSelectedProjectId(e.target.value || null)}
- style={{ flex: 1, padding: 8 }}
- >
-
- Select…
-
- {projects.map((p) => (
-
- {p.project_name}
+
+ New project
+
+ {createProjectHint ? (
+
+ {createProjectHint}
+
+ ) : null}
+
+
+
+ Connection
+ setSelectedConnId(e.target.value || null)}
+ style={{ padding: 8 }}
+ >
+
+ Select…
- ))}
-
-
-
+ {connections.map((c) => (
+
+ {c.conn_name}
+
+ ))}
+
+
+ Schema filter (optional)
+
-
-
New project
-
-
- {isCreatingProject ? "Creating…" : "Create"}
+ {isCreatingSnapshot ? "Starting…" : "Reverse engineer → snapshot"}
-
- {createProjectHint ? (
-
- {createProjectHint}
-
- ) : null}
-
- Connection
- setSelectedConnId(e.target.value || null)}
- style={{ padding: 8 }}
- >
-
- Select…
-
- {connections.map((c) => (
-
- {c.conn_name}
-
- ))}
-
-
-
-
- New connection (DSN)
-
- {isCreatingConnection ? "Saving…" : "Save connection"}
-
- {createConnectionHint ? (
-
- {createConnectionHint}
-
- ) : null}
-
-
-
- Schema filter (optional)
-
-
-
- {isCreatingSnapshot ? "Starting…" : "Reverse engineer → snapshot"}
-
- {createSnapshotHint ? (
-
- {createSnapshotHint}
-
- ) : null}
-
-
- Snapshot: {snapshot?.status || "—"}
- {snapshot?.error_message ? (
-
- {String(snapshot.error_message)}
+ {createSnapshotHint ? (
+
+ {createSnapshotHint}
+
+ ) : null}
+
+
+ Snapshot: {snapshot?.status || "—"}
+ {snapshot?.error_message ? (
+
+ {String(snapshot.error_message)}
+
+ ) : null}
- ) : null}
-
- {error ? (
-
- {error}
-
- ) : null}
+ {error ? (
+
+ {error}
+
+ ) : null}
) : (
@@ -1228,7 +1279,10 @@ export default function App() {
{activeView === "dashboard" ? (
-
+
대시보드
@@ -1254,7 +1308,10 @@ export default function App() {
-
+
최근 프로젝트
setActiveView("projects")}>
@@ -1280,11 +1337,16 @@ export default function App() {
))}
) : (
- 아직 프로젝트가 없습니다. 편집기에서 프로젝트를 생성하세요.
+
+ 아직 프로젝트가 없습니다. 편집기에서 프로젝트를 생성하세요.
+
)}
-
+
최근 다이어그램
setActiveView("diagrams")}>
@@ -1293,7 +1355,9 @@ export default function App() {
{
setSnapshotId(id);
setSnapshot(null);
@@ -1307,33 +1371,55 @@ export default function App() {
프로젝트
-
프로젝트를 선택하면 해당 다이어그램 목록을 볼 수 있습니다.
+
+ 프로젝트를 선택하면 해당 다이어그램 목록을 볼 수 있습니다.
+
-
+
+
-
+
이름
연결
동작
{projects.map((project) => (
-
-
{sanitizeHtml(project.project_name)}
-
{project.project_space_uuid === selectedProjectId ? connections.length : "선택 후 표시"}
+
+
+ {sanitizeHtml(project.project_name)}
+
+
+ {project.project_space_uuid === selectedProjectId
+ ? connections.length
+ : "선택 후 표시"}
+
))}
{!projects.length ? (
- 프로젝트가 없습니다. 이름을 입력해 새 프로젝트를 만드세요.
+
+ 프로젝트가 없습니다. 이름을 입력해 새 프로젝트를 만드세요.
+
) : null}
@@ -1357,22 +1445,30 @@ export default function App() {
다이어그램
-
{selectedProject ? `${selectedProject.project_name} 프로젝트의 스냅샷` : "프로젝트를 선택하세요."}
+
+ {selectedProject
+ ? `${selectedProject.project_name} 프로젝트의 스냅샷`
+ : "프로젝트를 선택하세요."}
+
setActiveView("editor")}>
편집기 열기
-
- 다이어그램 검색
-
+
) : (
-
-
- 테이블 또는 컬럼 검색
-
-
- {isLayouting ? "…" : "↔"}
-
-
- ↶
-
-
- 🪄
-
-
- 🗑️
-
-
- +
-
-
- ◇
-
-
- #
-
-
- SQL
-
-
- ↗
-
-
e.preventDefault()}>
+
+ 테이블 또는 컬럼 검색
+
+
+
+ {isLayouting ? "…" : "↔"}
+
+
+ ↶
+
+
+ 🪄
+
+
+ 🗑️
+
+
+ +
+
+
+ ◇
+
+
+ #
+
+
+ SQL
+
+
+ ↗
+
+
+ IMG
+
+
+ UML
+
+
+ {"{}"}
+
+
+ {[layoutMessage, nodeSearchStatus].filter(Boolean).join(" ")}
+
+
+
+
{
+ reactFlowRef.current = instance;
+ }}
>
- IMG
-
-
+
+ {nodes.length === 0 && (
+
+ {isSnapshotPending ? (
+ <>
+
+
스냅샷 생성 중...
+
+ 데이터베이스에서 스키마를 가져오고 있습니다. 잠시만
+ 기다려주세요.
+
+
+ ) : (
+ <>
+
+
+ ERD 캔버스가 비어 있습니다
+
+
+ 작업 패널에서 스냅샷을 생성하거나 상단의{" "}
+ 테이블 추가 버튼을 눌러 시작하세요.
+
+
+ + 테이블 추가
+
+
+ )}
+
+ )}
+
+
0}
+ hasDictionaryExport={nodes.length > 0}
+ hasDiagramExport={nodes.length > 0}
+ shareLinkUrl={shareLinkUrl}
+ isCreatingShareLink={isCreatingShareLink}
+ isShareLinkCopied={isShareLinkCopied}
+ shareLinkError={shareLinkError}
+ canCreateShareLink={Boolean(selectedProjectId)}
+ onCloseExport={onCloseExport}
+ onCopyExportDdl={onCopyExportDdl}
+ onDownloadSvg={onDownloadSvg}
+ onDownloadUml={onDownloadUml}
+ onDownloadMermaid={onDownloadMermaid}
+ onExportDictionaryCsv={onExportDictionaryCsv}
+ onExportDictionaryMarkdown={onExportDictionaryMarkdown}
+ onDownloadDbml={onDownloadDbml}
+ onDownloadPrisma={onDownloadPrisma}
+ onCreateShareLink={onCreateShareLink}
+ onCopyShareLink={onCopyShareLink}
+ />
+
+
- UML
-
-
- {"{}"}
-
-
- {[layoutMessage, nodeSearchStatus].filter(Boolean).join(" ")}
-
- {
- reactFlowRef.current = instance;
- }}
- >
-
-
- {nodes.length === 0 && (
-
- {isSnapshotPending ? (
- <>
-
-
스냅샷 생성 중...
-
- 데이터베이스에서 스키마를 가져오고 있습니다. 잠시만 기다려주세요.
-
-
- ) : (
- <>
-
-
ERD 캔버스가 비어 있습니다
-
- 작업 패널에서 스냅샷을 생성하거나 상단의 테이블 추가 버튼을 눌러 시작하세요.
-
-
- + 테이블 추가
-
-
- )}
-
0}
- hasDictionaryExport={nodes.length > 0}
- hasDiagramExport={nodes.length > 0}
- shareLinkUrl={shareLinkUrl}
- isCreatingShareLink={isCreatingShareLink}
- isShareLinkCopied={isShareLinkCopied}
- shareLinkError={shareLinkError}
- canCreateShareLink={Boolean(selectedProjectId)}
- onCloseExport={onCloseExport}
- onCopyExportDdl={onCopyExportDdl}
- onDownloadSvg={onDownloadSvg}
- onDownloadUml={onDownloadUml}
- onDownloadMermaid={onDownloadMermaid}
- onExportDictionaryCsv={onExportDictionaryCsv}
- onExportDictionaryMarkdown={onExportDictionaryMarkdown}
- onDownloadDbml={onDownloadDbml}
- onDownloadPrisma={onDownloadPrisma}
- onCreateShareLink={onCreateShareLink}
- onCopyShareLink={onCopyShareLink}
- />
-
-
+
+
+
+
)}
동작
{rows.map(({ item, name }) => (
-
+
{name}
{selectedProjectName || "현재 프로젝트"}
-
+
{sanitizeHtml(item.status)}