菜单
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".