메뉴
Use when building or modifying custom React Flow node components in the webview — especially the table-card node that lists columns inside. Covers registration, handle placement, theming, and performance patterns. Targets @xyflow/react v12 (the successor to the old `reactflow` package).
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use whenever any change touches the shape of the /erd JSON payload (nodes, edges, columns, relationships) — whether in the FastAPI Pydantic models, the generated TypeScript types, or the React consumers. Ensures all three layers stay in sync.
Use when wrapping, calling, or extending the dbterd Python API from the FastAPI server — parsing manifest.json/catalog.json, extracting nodes and FK relationships, and mapping to the ErdPayload schema.
Use when building a local .vsix of the VS Code extension for sideloading or ad-hoc testing. Covers the build/sync pipeline, sanity-checking the bundled server source, and the boundary with the release flow (this skill never publishes).
Use when cutting a release of the VS Code extension — creating a GitHub Release that triggers the marketplace publish workflow. Covers version selection, the "do not hand-bump package.json" rule, release-notes generation, and post-publish verification.
| name | reactflow-nodes |
| description | Use when building or modifying custom React Flow node components in the webview — especially the table-card node that lists columns inside. Covers registration, handle placement, theming, and performance patterns. Targets @xyflow/react v12 (the successor to the old `reactflow` package). |
Where this work lives now: the table-card node, FK edges, and layout engines were extracted into the external
@datnguye/erd-flowpackage (repo: github.com/datnguye/erd-flow). This repo's webview only wires<ErdFlow>props — do not recreate node components underwebview/src/. The guidance below applies when working inside the erd-flow package repo.
We're on @xyflow/react v12 — the v11 reactflow package is legacy. Imports come from @xyflow/react, styles from @xyflow/react/dist/style.css.
Each node is a React component. We register them in one nodeTypes map passed to <ReactFlow />. Do not inline-define node components — that breaks React reconciliation and causes node flicker on every render.
┌─────────────────────────┐
│ 📦 dim_customer │ ← header: resource icon + name, click → open SQL
├─────────────────────────┤
│ customer_key varchar │ ← row per column; PK/FK badge on left
│ customer_name varchar │
│ region varchar │
└─────────────────────────┘
nodeTypes = { erdTable: ErdTableNode } as const declared at module scope. Never inside a component body.React.memo. React Flow re-renders a lot.NodeProps<TFlowNode> where TFlowNode = Node<YourData, "erdTable">. The string literal is the type key registered in nodeTypes.<Handle> with id={column.name}. The edge's sourceHandle / targetHandle references that id.var(--vscode-editor-background), var(--vscode-editor-foreground), var(--vscode-focusBorder), etc.{ type: "openCompiledSql", name: node.data.name, sql: node.data.compiled_sql } to the extension, which opens the SQL in an untitled editor. Guard on compiled_sql being a non-empty string.layout.ts before nodes hit React Flow.webview/src/components/
├── ErdTableNode.tsx # the custom node
├── ErdTableNode.css # scoped styles
├── ColumnRow.tsx # one row, with PK/FK badge + handles
└── nodeTypes.ts # the registry
data if nodes have thousands of columns — virtualize inside the card.onlyRenderVisibleElements on <ReactFlow /> for large graphs.useNodesState / useEdgesState hooks only when nodes are locally mutable. For read-only ERDs, keep state in a parent useState.DatabaseSchemaNodeReact Flow ships a ready-made DatabaseSchemaNode component (see https://reactflow.dev/ui/components/database-schema-node) that renders exactly our table-card shape: header, row per column, LabeledHandle on each side. It's shadcn-flavored and comes with DatabaseSchemaNodeHeader / DatabaseSchemaNodeBody / DatabaseSchemaTableRow / DatabaseSchemaTableCell primitives.
We currently hand-roll ErdTableNode.tsx so we can theme everything with VS Code CSS variables and avoid pulling shadcn in. If a future feature needs non-trivial node internals (hoverable cells, inline editing, expandable groups), reconsider migrating to the upstream primitive rather than growing ours — the upstream version is maintained by the xyflow team and tracks their API changes.
reactflowimport { Handle, ... } from "reactflow" → from "@xyflow/react".import "reactflow/dist/style.css" → "@xyflow/react/dist/style.css".NodeProps<Data> → NodeProps<Node<Data, "typeKey">>.ReactFlow is now a named export: import { ReactFlow } from "@xyflow/react".