<script src="dist/scheme-designer.min.js"></script>

2. Add Markup

<canvas id="canvas" width="800" height="500"></canvas>

for adaptive add wrapper (relative):

 <div style="width: 100%; height: 500px; position:relative;">
       <canvas id="canvas"></canvas>
 </div>

3. Init, create layers, add objects to layers and render (see examples)

var defaultLayer = new SchemeDesigner.Layer('default', {zIndex: 1});

var schemeObject = new SchemeDesigner.SchemeObject({
            x: 0.5 + leftOffset,
            y: 0.5 + topOffset,
            width: width,
            height: height,
            renderFunction: renderPlace
});

defaultLayer.addObject(schemeObject);

var canvas = document.getElementById('canvas');
var schemeDesigner = new SchemeDesigner.Scheme(canvas, {
    options: {
        cacheSchemeRatio: 2
    },
    scroll: {
        maxHiddenPart: 0.85
    },
    zoom: {
        padding: 0.1,
        maxScale: 8,
        zoomCoefficient: 1.04
    },
    storage: {
        treeDepth: 6
    }
});

schemeDesigner.addLayer(defaultLayer);

schemeDesigner.render();

Examples:

var schemeDesigner = new SchemeDesigner.Scheme(canvas);

SchemeDesigner.setCursorStyle('move');
schemeDesigner.getZoomManager().zoomToCenter(10);
schemeDesigner.getScrollManager().scroll(100, 200);
schemeDesigner.getStorageManager().showNodesParts();
schemeDesigner.getStorageManager().setLayerVisibility('background', true);