--- title: "er-diagram" draft: false --- Hue ERD provides an illustration of various entities, and the relationship between them. Entity types supported by ERD currently are `Table` & `Literal`. We have a very generic architecture, and more types of entities can be supported in the future. Please refer [here](/developer/components/#using-ui-components-in-your-project) for importing the component in your own project. Also [er-diagram-demo](https://github.com/cloudera/hue/tree/master/tools/examples/components/er-diagram-demo) app have working examples. Once imported `er-diagram` can be used like a native HTML tag. ### Attributes / Props - entities: Array <[IEntity](https://github.com/cloudera/hue/blob/master/desktop/core/src/desktop/js/components/er-diagram/lib/interfaces.ts#L21)> - An array of entity objects. Each entity will be a box in the UI. - relations: Array <[IRelation](https://github.com/cloudera/hue/blob/master/desktop/core/src/desktop/js/components/er-diagram/lib/interfaces.ts#L26)> - An array of relation objects. Each relation will connect two of the above entities. Please refer the [interfaces](https://github.com/cloudera/hue/blob/master/desktop/core/src/desktop/js/components/er-diagram/lib/interfaces.ts) for an idea on the structure of these objects. ### Events - entity-clicked: Function([IEntity](https://github.com/cloudera/hue/blob/master/desktop/core/src/desktop/js/components/er-diagram/lib/interfaces.ts#L21)) - 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