https://github.com/cybertec-postgresql/react-database-diagram

A react component to render nice database diagram using storm-react-diagrams
https://github.com/cybertec-postgresql/react-database-diagram

database-diagrams react-database-diagram react-diagrams

Last synced: 3 months ago
JSON representation

A react component to render nice database diagram using storm-react-diagrams

• Host: GitHub
• URL: https://github.com/cybertec-postgresql/react-database-diagram
• Owner: cybertec-postgresql
• Archived: true
• Created: 2018-11-27T14:15:30.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-06-28T08:43:40.000Z (over 3 years ago)
• Last Synced: 2024-06-17T22:48:33.940Z (5 months ago)
• Topics: database-diagrams, react-database-diagram, react-diagrams
• Language: TypeScript
• Size: 119 KB
• Stars: 17
• Watchers: 5
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• jimsghstars - cybertec-postgresql/react-database-diagram - A react component to render nice database diagram using storm-react-diagrams (TypeScript)

README

        
# react-database-diagram

A react component to render nice database diagram using storm-react-diagrams

![A diagram rendered by storm-react-diagram](example.png)

# Usage

```javascript

import * as React from "react";

import * as ReactDOM from "react-dom";

import DatabaseDiagram, { IDatabaseTable } from "@cybertec/react-database-diagram";

const schema = [{

    columns: [

      { name: "a", type: "integer" },

      { name: "b", type: "integer" },

      { name: "c", type: "integer" }

    ],

    table_name: "t1",

    foreign_keys: [

      {

        toTable: "t2",

        toSchema: "public",

        toColumns: ["c"],

        fromColumns: ["c"]

      },

    ],

    primary_keys: ["a"],

    table_schema: "cypex_generated"

  },

  {

    columns: [{ name: "c", type: "integer" }],

    table_name: "t2",

    foreign_keys: [],

    table_schema: "cypex_generated"

  },] as IDatabaseTable;

  ReactDOM.render(, document.body);

```

You can also check out the [`demo`](https://github.com/cybertec-postgresql/react-database-diagram/tree/master/demo) in the demo folder.

# TODO

- [ ] Add custom relations line

- [ ] Add m:n display

- [ ] Add tests