怎样使用vue和diagram-js-minimap实现网页实时预览图，能根据页面的变化实时更新预览图，页面放大后，预览图显示不变还是显示全部页面，且说出diagram-js-minimap的api有哪些及功能介绍

1. 使用vue和diagram-js-minimap实现网页实时预览图

首先需要安装diagram-js-minimap插件，可以通过npm install diagram-js-minimap来安装，然后在vue组件中引入该插件：

import Minimap from 'diagram-js-minimap';

export default {
  mounted() {
    this.initMinimap();
  },
  methods: {
    initMinimap() {
      const canvas = this.$refs.canvas;
      const minimap = new Minimap({
        container: this.$refs.minimap,
        viewport: {
          container: canvas.parentNode,
          element: canvas
        }
      });
      minimap.attach();
    }
  }
}

这里使用了mounted钩子函数，在组件挂载后执行initMinimap方法来初始化预览图。initMinimap方法中，首先通过this.$refs.canvas获取到页面的canvas元素，然后通过new Minimap来创建预览图，将预览图的容器设置为this.$refs.minimap，将预览图的viewport设置为页面的canvas元素，最后通过minimap.attach()来将预览图添加到页面中。

2. 实现网页实时预览图的更新

为了实现网页实时预览图的更新，需要监听页面变化，当页面变化时，手动更新预览图。可以使用MutationObserver来监听DOM变化：

mounted() {
  this.initMinimap();
  this.observeDOM();
},
methods: {
  observeDOM() {
    const canvas = this.$refs.canvas;
    const observer = new MutationObserver(() => {
      this.updateMinimap();
    });
    const config = { childList: true, subtree: true };
    observer.observe(canvas.parentNode, config);
  },
  updateMinimap() {
    const minimap = this.minimap;
    if (minimap) {
      minimap._updateViewbox();
      minimap._updateTransform();
    }
  }
}

这里在mounted钩子函数中调用了observeDOM方法来监听DOM变化。observeDOM方法中，首先通过this.$refs.canvas获取到页面的canvas元素，然后创建一个MutationObserver，当canvas元素的子节点变化时，手动调用updateMinimap方法来更新预览图。

updateMinimap方法中，首先获取到预览图对象minimap，然后调用minimap._updateViewbox()和minimap._updateTransform()方法来更新预览图的位置和大小。

3. 页面放大后，预览图显示不变还是显示全部页面

diagram-js-minimap默认会显示整个页面，如果页面放大后，预览图的大小不变，但是显示的内容会发生变化。如果想要预览图的大小随着页面的放大而变化，可以通过设置minimap的size和padding属性来实现：

initMinimap() {
  const canvas = this.$refs.canvas;
  const minimap = new Minimap({
    container: this.$refs.minimap,
    viewport: {
      container: canvas.parentNode,
      element: canvas
    },
    size: {
      width: '25%',
      height: '25%'
    },
    padding: 10
  });
  minimap.attach();
  this.minimap = minimap;
}

这里将minimap的size设置为宽度和高度都为页面的25%，将padding设置为10，这样当页面放大后，预览图的大小会随之变化。

4. diagram-js-minimap的api及功能介绍

diagram-js-minimap的api包括：

- constructor(options)：创建一个新的minimap对象。
- attach()：将minimap添加到页面中。
- detach()：将minimap从页面中移除。
- setSize(size)：设置minimap的大小。
- setPadding(padding)：设置minimap的padding。
- setViewport(viewport)：设置minimap的viewport。
- setViewbox(viewbox)：设置minimap的viewbox。
- _updateSize()：更新minimap的大小。
- _updatePadding()：更新minimap的padding。
- _updateViewport()：更新minimap的viewport。
- _updateViewbox()：更新minimap的viewbox。
- _updateTransform()：更新minimap的transform。

diagram-js-minimap的主要功能是提供一个网页实时预览图，可以根据页面的变化实时更新预览图，并且可以通过设置size和padding属性来调整预览图的大小和位置。同时，diagram-js-minimap还提供了一些api，可以用来手动更新预览图的位置、大小和transform。