https://github.com/cnimmo16/react-erd
An easy-to-use component for rendering Entity Relationship Diagrams in React
https://github.com/cnimmo16/react-erd
entity-relationship-diagram erd react
Last synced: 4 months ago
JSON representation
An easy-to-use component for rendering Entity Relationship Diagrams in React
- Host: GitHub
- URL: https://github.com/cnimmo16/react-erd
- Owner: CNimmo16
- License: mit
- Created: 2023-03-10T11:02:54.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-07-28T20:51:03.000Z (6 months ago)
- Last Synced: 2025-07-28T22:29:35.748Z (6 months ago)
- Topics: entity-relationship-diagram, erd, react
- Language: TypeScript
- Homepage:
- Size: 602 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React ERD
An easy-to-use component for rendering Entity Relationship Diagrams in React
## Installation
Install `react-erd` using npm:
```
npm install --save react-erd
```
or yarn:
```
yarn add react-erd
```
## Compatibility
React ERD is compatible with React v18+.
## Usage
```js
import { RelationshipDiagram } from 'react-erd';
import 'react-erd/dist/style.css'
function MyComponent() {
return (
);
}
```
## Caveats
Note that the diagrams produced by this library are not Entity Relationship Diagrams in the strictest sense.
Traditionally, associative/junction tables used in many-to-many relationships are not represented as their own entity in an ERD. Instead the entities on each side of the relationship are joined by a single line, annotated with the appropriate "crow foot" notation to represent the many-to-many relation type.
React ERD was designed for use-cases where you want to provide users with a more 1:1 insight into the actual _tables_ in their database, rather than the _entities_ represented in your application.
In future React ERD may support more traditional forms of ERDs (see [roadmap](#roadmap) below).
## Roadmap
- Provide a controls overlay for navigating the diagram as an alternative to mouse/touch gestures.
- Improve control over diagram styles - potentially move towards a "headless" model.
- Support rendering many-to-many relationships in the traditional way using crow-foot notation and hidden junction table (see [caveats](#caveats)).
- Allow configuration of table positions on screen.