ER-diagram

The Entity-relationship model (ERD) provides an illustration of various SQL entities, and the relationship between them. Entity types supported by the ERD diagram are currently Table & Literal. It has a very generic architecture, and more types of entities can be supported in the future.

Attributes Events
Customize

Import

Please refer here for importing the component in your own project. Also er-diagram-demo app have working examples.

Once imported er-diagram can be used like a native HTML tag.

<er-diagram id="erd-element-id"/>

Attributes

  • entities: Array <IEntity> - An array of entity objects. Each entity will be a box in the UI.
  • relations: Array <IRelation> - An array of relation objects. Each relation will connect two of the above entities.

Please refer the interfaces for an idea on the structure of these objects.

Events

  • entity-clicked: Function(IEntity) - Will be triggered when an entity is clicked.

Resource Files

  • Hue
    • Web Component: gethue/web/er-diagram.js
    • Vue Component: gethue/components/er-diagram/index.vue
  • GetHue
    • Web Component: desktop/core/src/desktop/js/components/er-diagram/webcomp.ts
    • Vue Component: desktop/core/src/desktop/js/components/er-diagram/index.vue