How to create a custom element in the bpmn-js modeler

I’m trying to create a custom element that should be available in the left side panel of the drag and drop list in modeler using angular

I have seen an example of nyan cat and integrated it

nyan-cat is configured and rendered for every service task, In the similar way I want to configure it for a service task with a specific connector in it and it should be rendered only for service task with specific connector template

On drag and drop that connector should be able to embedd it’s xml into the bpmn diagram in modeler

@nikku, @philippfromme Any example code or your insights would be helpful

Thanks in Advance