Create paper
Every JointJS diagram needs a Paper, a Graph, and a shared namespace.
The JointJS Paper transforms an ordinary <div>
HTML element into an interactive diagram area. In our example, we identify <div id="paper">
as the host HTML element of our paper via the el
Paper property:
const namespace = shapes;
const graph = new dia.Graph({}, { cellNamespace: namespace });
const paper = new dia.Paper({
el: document.getElementById('paper'),
model: graph,
width: 300,
height: 300,
background: { color: '#F5F5F5' },
cellViewNamespace: namespace
});
See it in action
The Paper is the gray area in the code example below. It will serve as the visible area of our diagram, which we will be populating with Elements and Links:
- JointJS
- JointJS+
💡 Would you prefer to learn more about Paper? We have many demos illustrating it on our Demos & examples page.