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


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"/>


  • 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.


  • 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