Skip to main content

Add elements

Let's add our first two Elements into the diagram. Each Element needs a position and a size, and to be added to a Graph:

const rect1 = new shapes.standard.Rectangle();
rect1.position(25, 25);
rect1.resize(180, 50);
rect1.addTo(graph);

const rect2 = new shapes.standard.Rectangle();
rect2.position(95, 225);
rect2.resize(180, 50);
rect2.addTo(graph);

We can change the stroke color and round the corners of each Element:

rect1.attr('body', { stroke: '#C94A46', rx: 2, ry: 2 });
rect2.attr('body', { stroke: '#C94A46', rx: 2, ry: 2 });

We should also provide a label and its fill color for each Element:

rect1.attr('label', { text: 'Hello', fill: '#353535' });
rect2.attr('label', { text: 'World!', fill: '#353535' });

See it in action​

Try dragging the Elements around in our example:

Open on CodeSandboxOpen Sandbox

💡 Would you prefer to learn more about Elements? We have many demos illustrating them on our Demos & examples page.