diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html
index fc7e2dedcf..9c7845ad53 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html
+++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/diagram.component.html
@@ -46,6 +46,9 @@
             <div *ngSwitchCase="'IntermediateCatchEvent'">
                 <diagram-intermediate-catching-event [data]="element"></diagram-intermediate-catching-event>
             </div>
+            <div *ngSwitchCase="'SubProcess'">
+                <diagram-subprocess [data]="element"></diagram-subprocess>
+            </div>
         </div>
     </div>
     <div *ngFor="let flow of diagram.flows">
diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts
index a5e5dfec49..59656b5e75 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/index.ts
@@ -23,6 +23,7 @@ import { DIAGRAM_GATEWAY_DIRECTIVES } from './gateways/index';
 import { DIAGRAM_ICONS_DIRECTIVES } from './icons/index';
 import { DIAGRAM_BOUNDARY_EVENTS_DIRECTIVES } from './boundary-events/index';
 import { DIAGRAM_INTERMEDIATE_EVENTS_DIRECTIVES } from './intermediate-catching-events/index';
+import { DIAGRAM_STRUCTURAL_DIRECTIVES } from './structural/index';
 
 import { DiagramColorService } from './services/diagram-color.service';
 
@@ -34,6 +35,7 @@ export * from './icons/index';
 export * from './diagram-sequence-flow.component';
 export * from './boundary-events/index';
 export * from './intermediate-catching-events/index';
+export * from './structural/index';
 
 export const DIAGRAM_DIRECTIVES: any[] = [
     DiagramComponent,
@@ -43,7 +45,8 @@ export const DIAGRAM_DIRECTIVES: any[] = [
     DIAGRAM_GATEWAY_DIRECTIVES,
     DIAGRAM_ICONS_DIRECTIVES,
     DIAGRAM_BOUNDARY_EVENTS_DIRECTIVES,
-    DIAGRAM_INTERMEDIATE_EVENTS_DIRECTIVES
+    DIAGRAM_INTERMEDIATE_EVENTS_DIRECTIVES,
+    DIAGRAM_STRUCTURAL_DIRECTIVES
 ];
 
 export const DIAGRAM_PROVIDERS: any[] = [
diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/diagram-subprocess.component.html b/ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/diagram-subprocess.component.html
new file mode 100644
index 0000000000..a3b195375b
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/diagram-subprocess.component.html
@@ -0,0 +1,3 @@
+<raphael-rect [leftCorner]="rectLeftCorner" [width]="width" [height]="height" [radius]="options.radius"
+              [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+              [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rect>
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/diagram-subprocess.component.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/diagram-subprocess.component.ts
new file mode 100644
index 0000000000..50bf2e8ab7
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/diagram-subprocess.component.ts
@@ -0,0 +1,52 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { DiagramColorService } from './../services/diagram-color.service';
+
+@Component({
+    moduleId: module.id,
+    selector: 'diagram-subprocess',
+    templateUrl: './diagram-subprocess.component.html',
+    styleUrls: ['./diagram-subprocess.component.css']
+})
+export class DiagramSubprocessComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    onError = new EventEmitter();
+
+    rectLeftCorner: any;
+    width: any;
+    height: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: 4};
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.rectLeftCorner = {x: this.data.x, y: this.data.y};
+        this.width = this.data.width;
+        this.height = this.data.height;
+
+        this.options.fillColors = 'none';
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.strokeWidth = 1;
+    }
+}
diff --git a/ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/index.ts b/ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/index.ts
new file mode 100644
index 0000000000..1f283e491e
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/src/components/diagrams/structural/index.ts
@@ -0,0 +1,25 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DiagramSubprocessComponent } from './diagram-subprocess.component';
+
+// primitives
+export * from './diagram-subprocess.component';
+
+export const DIAGRAM_STRUCTURAL_DIRECTIVES: any[] = [
+    DiagramSubprocessComponent
+];