diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.css b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.css
new file mode 100644
index 0000000000..34f840208d
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.css
@@ -0,0 +1,3 @@
+.diagram {
+    border: 1px solid lightgray; overflow:auto
+}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.html b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.html
index 9cf62cc2d4..d9c35653a2 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.html
+++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="diagram">
+<div *ngIf="diagram" class="diagram">
     <div *ngFor="let element of diagram.elements">
         <div [ngSwitch]="element.type">
             <div *ngSwitchCase="'StartEvent'">
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
index cf72ea91e0..d4e78c7248 100644
--- a/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts
@@ -25,6 +25,7 @@ import { DiagramModel, DiagramElementModel } from '../models/diagram.model';
 @Component({
     moduleId: module.id,
     selector: 'activiti-diagram',
+    styleUrls: ['./diagram.component.css'],
     templateUrl: './diagram.component.html'
 })
 export class DiagramComponent {
@@ -52,6 +53,9 @@ export class DiagramComponent {
     @Output()
     onError = new EventEmitter();
 
+    PADDING_WIDTH: number = 60;
+    PADDING_HEIGHT: number = 60;
+
     private diagram: DiagramModel;
     private elementRef: ElementRef;
 
@@ -66,10 +70,6 @@ export class DiagramComponent {
         this.elementRef = elementRef;
     }
 
-    ngOnInit() {
-        this.raphaelService.setting(this.width, this.height);
-    }
-
     ngOnChanges(changes: SimpleChanges) {
         this.reset();
         this.diagramColorService.setTotalColors(this.metricColor);
@@ -80,6 +80,7 @@ export class DiagramComponent {
         this.diagramsService.getProcessDefinitionModel(processDefinitionId).subscribe(
             (res: any) => {
                 this.diagram = new DiagramModel(res);
+                this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH, this.diagram.diagramHeight + this.PADDING_HEIGHT);
                 this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType);
                 this.onSuccess.emit(res);
             },
diff --git a/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
index b5534067c6..32510ca0db 100644
--- a/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
+++ b/ng2-components/ng2-activiti-diagrams/src/models/diagram.model.ts
@@ -16,10 +16,10 @@
  */
 
 export class DiagramModel {
-    diagramBeginX: string;
-    diagramBeginY: string;
-    diagramHeight: string;
-    diagramWidth: string;
+    diagramBeginX: number;
+    diagramBeginY: number;
+    diagramHeight: number;
+    diagramWidth: number;
     elements: DiagramElementModel[] = [];
     flows: DiagramFlowElementModel[] = [];
     pools: DiagramPoolElementModel[] = [];