怎样使用diagram-js-minimap实现网页实时预览图，能根据页面的变化实时更新预览图，页面放大后，预览图显示不变还是显示全部页面

使用diagram-js-minimap实现网页实时预览图的步骤如下：

1. 引入diagram-js和diagram-js-minimap库。

2. 创建一个diagram-js模型，模型包含页面元素和连接。

3. 创建一个diagram-js-minimap实例，将模型传递给该实例。

4. 将diagram-js-minimap实例添加到网页中。

5. 监听页面元素变化事件，当页面元素发生变化时，更新diagram-js模型，并更新diagram-js-minimap实例。

6. 当页面放大后，预览图显示全部页面。

7. 可以通过设置diagram-js-minimap实例的缩放比例，控制预览图的大小。

下面是一个简单的使用示例：

1. 引入diagram-js和diagram-js-minimap库。

<!-- 引入diagram-js库 -->
<script src="https://cdn.jsdelivr.net/npm/diagram-js/dist/diagram-production.min.js"></script>

<!-- 引入diagram-js-minimap库 -->
<script src="https://cdn.jsdelivr.net/npm/diagram-js-minimap/dist/diagram-js-minimap.production.min.js"></script>

2. 创建一个diagram-js模型。

var bpmnModeler = new BpmnModeler({
  container: '#canvas'
});

bpmnModeler.importXML(xml, function(err) {
  if (err) {
    console.log('error rendering', err);
  } else {
    console.log('rendered');
  }
});

3. 创建一个diagram-js-minimap实例，将模型传递给该实例。

var minimap = new Minimap({
  container: '.minimap',
  modeler: bpmnModeler
});

4. 将diagram-js-minimap实例添加到网页中。

<div class="minimap"></div>

5. 监听页面元素变化事件，当页面元素发生变化时，更新diagram-js模型，并更新diagram-js-minimap实例。

bpmnModeler.on('commandStack.changed', function(e) {
  minimap.update();
});

6. 当页面放大后，预览图显示全部页面。

minimap.fit();

7. 可以通过设置diagram-js-minimap实例的缩放比例，控制预览图的大小。

minimap.setZoom(0.5);