<div style="width:100%;height:100%">
                        <div class="col-md-7">
                            <div id="canvas" style="width:100%;height:600px;"></div>
                        </div>
                    </div>
                
            

            
                    <script src="https://diagram.measuresquare.com/scripts/m2diag.js"></script>
                    <script>
                    let options = { apiKey: 'your public api key', panZoom: false };
                    let diag = new m2Diag.Engine('canvas', options);
                    diag.state.onDataLoaded = function () {
                        //show room table, assign product, for more detail, please view F12 - > Source directly
                    }
                    diag.loadCloudData('your project id');
                    </script>