Code (HTML)

<div id="view" style="height: 100vh; width: 1600px; display: flex; overflow: auto; background-color: Red;">
  <canvas id="diagram">
  </canvas>
 </div> 

Code (Javascript)

// Add some backing fields that will store the node's zoom level and scroll positions
MindFusion.Diagramming.ContainerNode.prototype.zoomFactor = 100;
MindFusion.Diagramming.ContainerNode.prototype.scrollX = 0;
MindFusion.Diagramming.ContainerNode.prototype.scrollY = 0;

// The following methods are expected by the ZoomControl to be present on its target
// and will be invoked in response to interactions with the widget

// Sets the zoom factor of the target
MindFusion.Diagramming.ContainerNode.prototype.setZoomLevel = function (zoomFactor)
{
	var dz = (zoomFactor - this.zoomFactor) / 100;
	this.zoomFactor = zoomFactor;

        // Update the bounds of the children with the new scale
	MindFusion.Collections.ArrayList.forEach(this.children, function (child)
	{
		var transform = new MindFusion.Drawing.Matrix();
		transform.scale(1 + dz, 1 + dz);

		var bounds = child.getBounds();
		bounds = transform.transformRect(bounds);

		child.setBounds(bounds, true);
	});
};

// Gets the current scroll positions
MindFusion.Diagramming.ContainerNode.prototype.getScrollX = function ()
{
	return this.scrollX;
};
MindFusion.Diagramming.ContainerNode.prototype.getScrollY = function ()
{
	return this.scrollY;
};

// Sets the scroll position of the target
MindFusion.Diagramming.ContainerNode.prototype.setScroll = function (x, y)
{
	if (this.zoomFactor <= 100)
		return;

	var dx = x - this.scrollX;
	var dy = y - this.scrollY;

	this.scrollX = x;
	this.scrollY = y;

        // Update the bounds of children with the new offset
	MindFusion.Collections.ArrayList.forEach(this.children, function (child)
	{
		var bounds = child.getBounds();
		bounds.x -= dx;
		bounds.y -= dy;
		child.setBounds(bounds, true);
	});
};

// ...

// Create the zoom control from the html canvas element
var zoomer = MindFusion.Controls.ZoomControl.create($("#zoomer")[0]);

// Set the current target of the widget, in this case for example, a selected ContainerNode
zoomer.setTarget(diagram.getActiveItem()); 

Code (HTML)

<div style="width: 50px; height: 300px; position: absolute; top: 20px; left: 20px; width: 50px; height: 300px;">
    <canvas id="zoomer" width="50" height="300">
    </canvas>
</div>