diff --git a/demos/custom-tree-graph.html b/demos/custom-tree-graph.html
index ce7d8d1d30..ae9aa9ba63 100644
--- a/demos/custom-tree-graph.html
+++ b/demos/custom-tree-graph.html
@@ -9,7 +9,15 @@
 <button id="download">点击下载图片</button>
 <script src="assets/hierarchy.js"></script>
 <script src="../build/g6.js"></script>
+<script src="../build/minimap.js"></script>
 <script src="./assets/jquery-3.2.1.min.js"></script>
+<style>
+  .g6-minimap{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+</style>
 <script>
 const COLLAPSE_ICON = function(x, y, r) {
   return [
@@ -70,10 +78,12 @@ G6.registerNode('tree-node', {
     return rect;
   }
 }, 'single-shape');
+const minimap = new Minimap({ size: [200, 150] });
 const graph = new G6.TreeGraph({
   container: 'mountNode',
   width: 800,
   height: 600,
+  plugins: [ minimap ],
   modes: {
     default: [{
       type: 'collapse-expand',
@@ -88,7 +98,7 @@ const graph = new G6.TreeGraph({
         data.collapsed = collapsed;
         return true;
       }
-    }, 'drag-canvas']
+    }, 'drag-canvas', 'zoom-canvas']
   },
   defaultNode: {
     shape: 'tree-node',
diff --git a/demos/er-diagram.html b/demos/er-diagram.html
index e61c81d5fb..b5b550b1e7 100644
--- a/demos/er-diagram.html
+++ b/demos/er-diagram.html
@@ -7,6 +7,7 @@
 <body>
 <div id="mountNode"></div>
 <script src="../build/g6.js"></script>
+<script src="../build/minimap.js"></script>
 <script>
 
   G6.registerEdge('relation', {
@@ -71,15 +72,16 @@
         }
       });
       return keyShape;
-      console.log(point, tangent);
     }
   });
+  const minimap = new Minimap({ size: [ 160, 100 ] });
   const graph = new G6.Graph({
     container: 'mountNode',
     width: 800,
     height: 500,
+    plugins: [ minimap ],
     modes: {
-      default: [ 'drag-node']
+      default: [ 'drag-node', 'drag-canvas', 'zoom-canvas']
     }
   });
   const data = {
diff --git a/package.json b/package.json
index e7e1490b43..0cd69626a4 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "silent": false
   },
   "dependencies": {
-    "@antv/g": "~3.4.0",
+    "@antv/g": "~3.4.1",
     "@antv/util": "~1.3.1"
   },
   "engines": {
diff --git a/plugins/minimap/index.js b/plugins/minimap/index.js
index 8987936223..351b932dbf 100644
--- a/plugins/minimap/index.js
+++ b/plugins/minimap/index.js
@@ -19,14 +19,6 @@ class Minimap extends Base {
       className: 'g6-minimap',
       viewportClassName: 'g6-minimap-viewport',
       keyShapeOnly: false,
-      viewportStyle: {
-        stroke: '#1890ff',
-        lineWidth: 2,
-        x: 0,
-        y: 0,
-        width: 200,
-        height: 120
-      },
       size: [ 200, 120 ]
     };
   }
@@ -146,16 +138,21 @@ class Minimap extends Base {
     } else {
       this._updateGraphShapes();
     }
-    // 更新minimap视口
-    this._updateViewport();
-    // 刷新后bbox可能会变，需要重置画布矩阵以缩放到合适的大小
     const bbox = canvas.getBBox();
+    // 刷新后bbox可能会变，需要重置画布矩阵以缩放到合适的大小
     const width = max(bbox.width, graph.get('width'));
     const height = max(bbox.height, graph.get('height'));
     const pixelRatio = canvas.get('pixelRatio');
+    const ratio = Math.min(size[0] / width, size[1] / height);
     canvas.resetMatrix();
-    canvas.scale(size[0] / width * pixelRatio, size[1] / height * pixelRatio);
+    canvas.scale(ratio * pixelRatio, ratio * pixelRatio);
+    // 缩放到适合视口后, 平移到画布中心
+    const dx = (size[0] - width * ratio) / 2;
+    const dy = (size[1] - height * ratio) / 2;
+    canvas.translate(dx * pixelRatio, dy * pixelRatio);
     canvas.draw();
+    // 更新minimap视口
+    this._updateViewport(ratio, dx, dy);
   }
   // 仅在minimap上绘制keyShape
   // FIXME 如果用户自定义绘制了其他内容，minimap上就无法画出
@@ -179,8 +176,7 @@ class Minimap extends Base {
   }
   // 将主图上的图形完全复制到小图
   _updateGraphShapes() {
-    const cfgs = this._cfgs;
-    const graph = cfgs.graph;
+    const graph = this.get('graph');
     const canvas = this.get('canvas');
     const graphGroup = graph.get('group');
     const clonedGroup = graphGroup.clone();
@@ -188,23 +184,32 @@ class Minimap extends Base {
     canvas.get('children')[0] = clonedGroup;
   }
   // 绘制minimap视口
-  _updateViewport() {
-    const size = this._cfgs.size;
-    const graph = this._cfgs.graph;
-    const matrix = graph.get('group').getMatrix();
+  _updateViewport(ratio, dx, dy) {
+    const graph = this.get('graph');
+    const size = this.get('size');
+    const graphWidth = graph.get('width');
+    const graphHeight = graph.get('height');
     const topLeft = graph.getPointByCanvas(0, 0);
+    const bottomRight = graph.getPointByCanvas(graphWidth, graphHeight);
     const viewport = this.get('viewport');
     if (!viewport) {
       this.initViewport();
     }
     // viewport宽高,左上角点的计算
-    const width = matrix[0] >= 1 ? size[0] / matrix[0] : size[0];
-    const height = matrix[4] >= 1 ? size[1] / matrix[4] : size[1];
-    const left = topLeft.x > 0 ? topLeft.x * size[0] / graph.get('width') : 0;
-    const top = topLeft.y > 0 ? topLeft.y * size[1] / graph.get('height') : 0;
+    let width = (bottomRight.x - topLeft.x) * ratio;
+    let height = (bottomRight.y - topLeft.y) * ratio;
+    const left = topLeft.x * ratio + dx;
+    const top = topLeft.y * ratio + dy;
+    if (width > size[0]) {
+      width = size[0];
+    }
+    if (height > size[1]) {
+      height = size[1];
+    }
+
     modifyCSS(viewport, {
-      left: left + 'px',
-      top: top + 'px',
+      left: left > 0 ? left + 'px' : 0,
+      top: top > 0 ? top + 'px' : 0,
       width: width + 'px',
       height: height + 'px'
     });
diff --git a/test/unit/behavior/tooltip-spec.js b/test/unit/behavior/tooltip-spec.js
index bebec3b889..3c334b8bff 100644
--- a/test/unit/behavior/tooltip-spec.js
+++ b/test/unit/behavior/tooltip-spec.js
@@ -49,14 +49,14 @@ describe('tooltip', () => {
     expect(style.left).to.equal('64px');
     expect(style.top).to.equal('64px');
     graph.emit('node:mouseenter', { x: 410, y: 52, item: rt });
-    expect(style.left).to.equal('372.203px');
+    expect(style.left).to.equal('384.203px');
     expect(style.top).to.equal('64px');
     graph.emit('node:mouseenter', { x: 410, y: 410, item: rb });
-    expect(style.left).to.equal('372.203px');
-    expect(style.top).to.equal('380px');
+    expect(style.left).to.equal('384.203px');
+    expect(style.top).to.equal('392px');
     graph.emit('node:mouseenter', { x: 52, y: 410, item: lb });
     expect(style.left).to.equal('64px');
-    expect(style.top).to.equal('380px');
+    expect(style.top).to.equal('392px');
     graph.removeBehaviors('tooltip', 'default');
     div.removeChild(tooltip);
   });
