@eavfw/er-diagram

A powerful React component library for visualizing and editing Entity-Relationship diagrams with built-in internationalization support, module organization, and interactive features.

Features

• 🎨 Interactive ER diagram visualization
• 🌐 Built-in internationalization (i18n) support
• 📦 Module-based organization
• ↔️ Smart relationship routing
• 🔄 Real-time updates
• 📱 Responsive design
• 🎯 Context menus for quick actions
• 🔑 Primary and foreign key visualization
• 🎭 Dark mode support

Installation

npm install @eavfw/er-diagram

Quick Start

import { ERDiagram, DataModelProvider } from '@eavfw/er-diagram';

function App() {
  const schema = {
    modules: ['Core'],
    tables: [
      {
        name: 'users',
        module: 'Core',
        locales: {
          '1033': { singular: 'User', plural: 'Users' }
        },
        attributes: {
          id: { 
            name: 'id', 
            type: 'uuid', 
            isPrimary: true 
          },
          email: { 
            name: 'email', 
            type: 'varchar(255)' 
          }
        }
      }
    ]
  };

  return (
    <DataModelProvider initialSchema={schema}>
      <div className="w-screen h-screen">
        <ERDiagram />
      </div>
    </DataModelProvider>
  );
}

Schema Structure

SchemaData

interface SchemaData {
  modules: string[];           // List of modules
  tables: Table[];            // List of tables
  variables?: Record<string, any>; // Optional variables for reuse
}

Table Definition

interface Table {
  name: string;               // Table name
  pluralName?: string;        // Plural form
  module?: string;            // Module name
  sitemap?: string;          // UI navigation location
  locales?: Record<string, {  // Localized names
    singular: string;
    plural: string;
  }>;
  attributes: {              // Table columns
    [key: string]: {
      name: string;
      type: string;
      isPrimary?: boolean;
      isForeign?: boolean;
      references?: {
        table: string;
        attribute: string;
      };
    }
  };
}

Advanced Features

Variable Support

Use variables to define reusable attribute sets:

const schema = {
  variables: {
    audit: {
      "Modified On": {
        type: { type: "DateTime", required: true },
        locale: { "1030": { displayName: "Ændret" } }
      },
      "Created On": {
        type: { type: "DateTime", required: true },
        locale: { "1030": { displayName: "Oprettet" } }
      }
    }
  },
  tables: [
    {
      name: "users",
      attributes: {
        "[merge()]": "[variables('audit')]",
        // ... other attributes
      }
    }
  ]
};

Supported Localizations

The component supports multiple locales out of the box:

• 🇺🇸 English (US) - 1033
• 🇩🇰 Danish - 1030
• 🇩🇪 German - 1031
• 🇫🇷 French - 1036
• 🇪🇸 Spanish - 1034
• 🇳🇴 Norwegian - 1044
• 🇸🇪 Swedish - 1053

Module Organization

Tables can be organized into modules for better visualization:

const schema = {
  modules: ['Core', 'Blog', 'Commerce'],
  tables: [
    {
      name: 'products',
      module: 'Commerce',
      // ... other properties
    }
  ]
};

API Reference

Components

ERDiagram

Main component for rendering the ER diagram.

<ERDiagram />

DataModelProvider

Context provider for schema data and actions.

<DataModelProvider initialSchema={schema}>
  {children}
</DataModelProvider>

Hooks

useDataModel

Access and modify the data model from any component.

const { schema, dispatch, selectedLocale } = useDataModel();

Contributing

Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• 📧 Email: [email protected]
• 🌐 Documentation: https://docs.example.com
• 🐛 Issue Tracker: https://github.com/EAVFW/er-diagram/issues

Acknowledgments

• Built with React and ReactFlow
• Styled with Tailwind CSS
• UI components from Radix UI