: Draw your own interactive ER diagram using react. Inspired by dbdiagram.io. And this is just a sample product. .p.s. I have no designer. Please help me...
: Want to know how does this ERD maker like dbdiagram product works.
- FE : Next.js, Typescript
- Hosting : Firebase Hosting
: You can experience demo project according to these steps below.
- Access to the url(
https://interactiveerd.web.app). - Click 'Get started' button on right of the header.
- Drag & Drop table component with no third-party library.
- Connect arrow line which can represent relationship to each table with no third-party library..
- Put text on every side of bidirectional arrow line(start, end, middle).
- Polyline shape lines for better visualization.
- Select mode, drag mode available.
- Comments mode still not available.(like Figma comment)
- Realtime share system still not available.
- Table insertion still developing.
URL : https://jsbin.com/vurumupoqu/1/edit?html,output
: Issues that I faced while making this product. Huge thanks for all people who gave me below solutions.
- [ISSUE] mouse event escape when move too fast => DraggableTable component URL : https://stackoverflow.com/questions/56822929/how-to-process-mousemove-event-in-parent-in-react
- [ISSUE] getBoundingClientRect changes while scrolling => ArrowLine component URL : https://stackoverflow.com/questions/25630035/javascript-getboundingclientrect-changes-while-scrolling