表关系 - 可视化带有外键关系的数据库架构

数据库表关系可视化

功能概述

本示例可视化数据库表关系，包括主键、外键和表关联。它使用专门的节点形状表示带有列列表的数据库表，以及不同的线条样式指示关系类型（一对一、一对多、多对多）。

核心特性实现

表节点结构

const createTableNode = (table: TableSchema) => ({
    id: table.name,
    text: table.name,
    nodeShape: RGNodeShape.rect,
    width: 200,
    height: 30 + table.columns.length * 20,
    data: {
        columns: table.columns.map(col => ({
            name: col.name,
            type: col.type,
            isPrimaryKey: col.isPrimaryKey,
            isForeignKey: col.isForeignKey
        }))
    }
});

关系连线

const createRelationshipLine = (rel: Relationship) => {
    let lineStyle = RGLineShape.StandardStraight;
    let text = '';

    switch (rel.type) {
        case '1:1':
            text = '1:1';
            break;
        case '1:N':
            text = '1:N';
            lineStyle = RGLineShape.StandardOrthogonal;
            break;
        case 'N:M':
            text = 'N:M';
            lineStyle = RGLineShape.BezierCurve;
            break;
    }

    return {
        from: rel.fromTable,
        to: rel.toTable,
        text: `${rel.fromColumn} → ${rel.toColumn}`,
        lineShape: lineStyle
    };
};

自定义表渲染

const TableNode: React.FC<RGNodeSlotProps> = ({ node }) => {
    const columns = node.data.columns || [];

    return (
        <div className="table-node">
            <div className="table-header">{node.text}</div>
            <div className="table-columns">
                {columns.map((col, i) => (
                    <div key={i} className={`column ${col.isPrimaryKey ? 'pk' : ''} ${col.isForeignKey ? 'fk' : ''}`}>
                        <span className="column-name">{col.name}</span>
                        <span className="column-type">{col.type}</span>
                    </div>
                ))}
            </div>
        </div>
    );
};

创意使用场景

数据库文档：数据库架构的可视化参考。

架构设计：规划和可视化数据库结构。

入职培训：向新开发人员教授数据库结构。

迁移规划：显示当前和目标架构。

查询优化：了解表关系以获得更好的查询。