Is there a way to draw the Nodes within Drawflow canvas based on user preferred size and position?

I am using the Drawflow within my Vuejs/Nuxtjs application and creating Nodes dynamically upon clicking on the Add Node button. During the addition of the Node within addNode method, I am passing the posx and posy due to which Node is always added to the same place in Drawflow Canvas and I have to drag it to the different place based on my wish.

Is there any way for me to add it to the place I would like directly rather than adding it to the same posx and posy? Also, set the size (height and width) of the Node dynamically? Something like the Drag-and-drop with Draw approach after clicking on the Add Node button?

I have added my code sample in CodeSandbox.

I am really looking forward to some suggestions or work-around. I looking for some suggestions that would look something like this:

[jerosoler]

I just saw that the corresponding css was not being applied.

[jerosoler]

Try change this lines:

@import "~/assets/css/drawflow.css";
@import "drawflow/dist/drawflow.min.css";

to

@import "drawflow/dist/drawflow.min.css";
@import "~/assets/css/drawflow.css";

And add css of the library theme: https://element.eleme.io/#/es/component/quickstart

import 'element-ui/lib/theme-chalk/index.css';