Database Table Relationship Visualization

Functional Overview

This example visualizes database table relationships including primary keys, foreign keys, and table associations. It uses specialized node shapes to represent database tables with column lists, and different line styles to indicate relationship types (one-to-one, one-to-many, many-to-many).

Implementation of Key Features

Table Node Structure

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
        }))
    }
});

Relationship Lines

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
    };
};

Custom Table Rendering

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>
    );
};

Creative Use Cases

Database Documentation: Visual reference for database schemas.

Schema Design: Plan and visualize database structures.

Onboarding: Teach database structure to new developers.

Migration Planning: Show current and target schemas.

Query Optimization: Understand table relationships for better queries.

Table Relationship