diff --git a/app/index.html b/app/index.html
index 2780f3ff..ccbe6568 100644
--- a/app/index.html
+++ b/app/index.html
@@ -5,116 +5,106 @@
     <meta charset="utf-8">
     <title>for-Construction-Modeling</title>
 
-    <link rel="stylesheet" href="vendor/bpmn-js/assets/diagram-js.css"/>
-    <link rel="stylesheet" href="vendor/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css"/>
-    <link rel="stylesheet" href="css/index.css"/>
-    <link rel="stylesheet" href="css/lib.css"/>
+    <link rel="stylesheet" href="vendor/bpmn-js/assets/diagram-js.css" />
+    <link rel="stylesheet" href="vendor/bpmn-js/assets/bpmn-font/css/bpmn-embedded.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="stylesheet" href="css/lib.css" />
     <!-- CSS only -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand"/>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 </head>
 
 <body>
-<div id="navigationBar" class="topBar">
-    <a id="newButton" class="barButton barContent"> New </a>
-    <a id="openButton" class="barButton barContent"> Open </a>
-    <a id="saveButton" class="barButton barContent"> Save </a>
-    <a id="noteAreaToggleButton" class="barButton barContent"> Toggle Note Area </a>
-    <a class="barButton barContent" href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki"
-       target="_blank"> Guideline Help </a>
-    <h3 id="fileName" class="barContent">Unnamed file</h3>
-</div>
-<div id="note-area-wrapper" class="hidden">
-    <div id="note-area-drag" style="display:inline"><i class="material-icons">crop</i></div>
-    <div id="note-area-close" style="display:inline"><i class="material-icons">close</i></div>
-    <textarea class="note-area"></textarea>
-</div>
-<div id="main" class="mainContent">
-    <div id="fragments-canvas" class="canvas focus">
-        <div class="canvasHeader">
-            <h3 class="focusHeader" id="titleFM"><i class="material-icons focusHeaderIcon">photo_size_select_small</i>
-            </h3>
-            <a class="questionButton" href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Fragments"
-               target="_blank">?</a>
-        </div>
+    <div id="navigationBar" class="topBar">
+        <a id="newButton" class="barButton barContent"> New </a>
+        <a id="openButton" class="barButton barContent"> Open </a>
+        <a id="saveButton" class="barButton barContent"> Save </a>
+        <a id="noteAreaToggleButton" class="barButton barContent"> Toggle Note Area </a>
+        <a class="barButton barContent" href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki" target="_blank"> Guideline Help </a>
+        <h3 id="fileName" class="barContent">Unnamed file</h3>
     </div>
-    <div id="datamodel-canvas" class="canvas hidden">
-        <div class="canvasHeader">
-            <h3 class="focusHeader" id="titleDM"><i class="material-icons focusHeaderIcon">photo_size_select_small</i>
-            </h3>
-            <a class="questionButton" href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Data-Model"
-               target="_blank">?</a>
-        </div>
+    <div id="note-area-wrapper" class="hidden">
+        <div id="note-area-drag" style="display:inline"><i class="material-icons">crop</i></div>
+        <div id="note-area-close" style="display:inline"><i class="material-icons">close</i></div>
+        <textarea class="note-area"></textarea>
     </div>
-    <div id="objectivemodel-canvas" class="canvas hidden">
-        <div class="canvasHeader">
-            <h3 class="focusHeader" id="titleOM"><i class="material-icons focusHeaderIcon">photo_size_select_small</i>
-            </h3>
-            <a class="questionButton"
-               href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Objective-Model"
-               target="_blank">?</a>
+    <div id="main" class="mainContent">
+        <div id="fragments-canvas" class="canvas focus">
+            <div class="canvasHeader">
+                <h3 class="focusHeader" id="titleFM"> <i class="material-icons focusHeaderIcon">photo_size_select_small</i></h3>
+                <a class="questionButton" href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Fragments" target="_blank">?</a>
+            </div>
         </div>
-    </div>
-    <div id="rolemodel-canvas" class="canvas hidden">
-        <div class="canvasHeader">
-            <h3 class="focusHeader" id="titleROM"><i class="material-icons focusHeaderIcon">photo_size_select_small</i>
-            </h3>
-            <a class="questionButton"
-               href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Role-Model"
-               target="_blank">?</a>
+        <div id="datamodel-canvas" class="canvas hidden">
+            <div class="canvasHeader">
+                <h3 class="focusHeader" id="titleDM"> <i class="material-icons focusHeaderIcon">photo_size_select_small</i></h3>
+                <a class="questionButton" href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Data-Model" target="_blank">?</a>
+            </div>
         </div>
-    </div>
-    <div id="terminationcondition-canvas" class="canvas hidden">
-        <div class="canvasHeader" style="position:relative; display:inline-flex">
-            <h3 class="focusHeader" id="titleTC"><i class="material-icons focusHeaderIcon">photo_size_select_small</i>
-            </h3>
-            <a class="questionButton"
-               href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Termination-Condition"
-               target="_blank">?</a>
+        <div id="objectivemodel-canvas" class="canvas hidden">
+            <div class="canvasHeader">
+                <h3 class="focusHeader" id="titleOM"> <i class="material-icons focusHeaderIcon">photo_size_select_small</i></h3>
+                <a class="questionButton" href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Objective-Model" target="_blank">?</a>
+            </div>
         </div>
-    </div>
-    <div id="dependencymodel-canvas" class="canvas hidden">
-        <div class="canvasHeader">
-            <h3 class="focusHeader" id="titleDEP"><i class="material-icons focusHeaderIcon">photo_size_select_small</i>
-            </h3>
-            <a class="questionButton"
-               href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Dependency-Model"
-               target="_blank">?</a>
+        <div id="rolemodel-canvas" class="canvas hidden">
+            <div class="canvasHeader">
+                <h3 class="focusHeader" id="titleROM"><i class="material-icons focusHeaderIcon">photo_size_select_small</i>
+                </h3>
+                <a class="questionButton"
+                   href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Role-Model"
+                   target="_blank">?</a>
+            </div>
         </div>
-    </div>
-    <div id="olc-canvas" class="canvas hidden">
-        <div class="canvasHeader">
-            <h3 class="focusHeader" id="titleOLC"><i class="material-icons focusHeaderIcon">photo_size_select_small</i>
-            </h3>
-            <a class="questionButton"
-               href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Object-Lifecycle-(OLC)"
-               target="_blank">?</a>
+        <div id="resourcemodel-canvas" class="canvas hidden">
+            <div class="canvasHeader">
+                <h3 class="focusHeader" id="titleREM"><i class="material-icons focusHeaderIcon">photo_size_select_small</i></h3>
+                <a class="questionButton"
+                   href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Resource-Model"
+                   target="_blank">?</a>
+            </div>
         </div>
-    </div>
-</div>
-<div id="errorBar" class="hidingTable">
-    <table id="errorTable" class="errorTable">
-        <tr>
-            <th></th>
-            <th>Message</th>
-            <th></th>
-            <th>Element</th>
-            <th>Artifact</th>
-        </tr>
-    </table>
-    <div class="errorBarControls">
-        <div>
-            <a id="toggleErrorTable" class="barButton barContent"></a>
+        <div id="terminationcondition-canvas" class="canvas hidden">
+            <div class="canvasHeader" style="position:relative; display:inline-flex">
+                <h3 class="focusHeader" id="titleTC"> <i class="material-icons focusHeaderIcon">photo_size_select_small</i></h3>
+                <a class="questionButton" href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Termination-Condition" target="_blank">?</a>
+            </div>
         </div>
-        <div id="numberOfViolations">
-
+        <div id="dependencymodel-canvas" class="canvas hidden">
+            <div class="canvasHeader">
+                <h3 class="focusHeader" id="titleDEP">  <i class="material-icons focusHeaderIcon">photo_size_select_small</i></h3>
+                <a class="questionButton" href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Dependency-Model" target="_blank">?</a>
+            </div>
+        </div>
+        <div id="olc-canvas" class="canvas hidden">
+            <div class="canvasHeader">
+                <h3 class="focusHeader" id="titleOLC"> <i class="material-icons focusHeaderIcon">photo_size_select_small</i></h3>
+                <a class="questionButton" href="https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki/Object-Lifecycle-(OLC)" target="_blank">?</a>
+            </div>
+        </div>
+    </div>
+    <div id="errorBar" class="hidingTable">
+        <table id="errorTable" class="errorTable">
+            <tr>
+                <th> </th>
+                <th>Message</th>
+                <th> </th>
+                <th>Element</th>
+                <th>Artifact</th>
+            </tr>
+        </table>
+        <div class="errorBarControls">
+            <div>
+                <a id="toggleErrorTable" class="barButton barContent"></a>
+            </div>
+            <div id="numberOfViolations">
+                
+            </div>
         </div>
     </div>
-</div>
 
-<script src="./index.js"></script>
+    <script src="./index.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/app/index.js b/app/index.js
index a66668c8..e2386fd7 100644
--- a/app/index.js
+++ b/app/index.js
@@ -7,6 +7,7 @@ import DataModelModeler from './lib/datamodelmodeler/Modeler';
 import ObjectiveModeler from './lib/objectivemodeler/OmModeler';
 import DependencyModeler from './lib/dependencymodeler/DependencyModeler';
 import RoleModeler from './lib/rolemodeler/RoleModeler';
+import RemModeler from './lib/resourcemodeler/RemModeler';
 
 import $ from 'jquery';
 import Mediator from './lib/mediator/Mediator';
@@ -93,6 +94,17 @@ var roleModeler = new RoleModeler({
     }]
 });
 
+var resourceModeler = new RemModeler({
+    container: '#resourcemodel-canvas',
+    keyboard: {
+        bindTo: document.querySelector('#resourcemodel-canvas')
+    },
+    additionalModules: [{
+        __init__ : ['mediator'],
+        mediator : ['type', mediator.ResourceModelerHook]
+    }]
+});
+
 var terminationConditionModeler = new TerminationConditionModeler(
     '#terminationcondition-canvas'
 );
@@ -123,11 +135,12 @@ async function loadDebugData() {
 async function createNewDiagram() {
     try {
         checker.deactivate();
-        await roleModeler.createDiagram();
         await dependencyModeler.createNew();
-        await dataModeler.importXML(newDatamodel);
         await fragmentModeler.importXML(diagramXML);
         await olcModeler.createNew();
+        await dataModeler.importXML(newDatamodel);
+        await roleModeler.createDiagram();
+        await resourceModeler.createDiagram();
         await objectiveModeler.createDiagram();
         terminationConditionModeler.createNew();
         if (LOAD_DUMMY) {
@@ -165,6 +178,8 @@ async function exportToZip() {
     zip.file('objectiveModel.xml', objectiveModel);
     const olcs = (await olcModeler.saveXML({format: true})).xml;
     zip.file('olcs.xml', olcs);
+    const resourceModel = (await resourceModeler.saveXML({ format: true })).xml;
+    zip.file('resourceModel.xml', resourceModel);
     const terminationCondition = (await terminationConditionModeler.saveXML({format: true})).xml;
     zip.file('terminationCondition.xml', terminationCondition);
     const dependencyModel = (await dependencyModeler.saveXML({format: true})).xml;
@@ -184,6 +199,7 @@ async function importFromZip(zipData) {
         olcs: zip.file('olcs.xml'),
         terminationCondition: zip.file('terminationCondition.xml'),
         dependencyModel: zip.file('dependencyModel.xml'),
+        resourceModel: zip.file('resourceModel.xml'),
         roleModel: zip.file('roleModel.xml')
     };
     Object.keys(files).forEach(key => {
@@ -198,6 +214,7 @@ async function importFromZip(zipData) {
     await fragmentModeler.importXML(await files.fragments.async("string"));
     await terminationConditionModeler.importXML(await files.terminationCondition.async("string"));
     await objectiveModeler.importXML(await files.objectiveModel.async("string"));
+    await resourceModeler.importXML(await files.resourceModel.async("string"));
     checker.activate();
 }
 
diff --git a/app/lib/dependencymodeler/depLabelHandling/DepLabelHandler.js b/app/lib/dependencymodeler/depLabelHandling/DepLabelHandler.js
index 884882a3..e01061bf 100644
--- a/app/lib/dependencymodeler/depLabelHandling/DepLabelHandler.js
+++ b/app/lib/dependencymodeler/depLabelHandling/DepLabelHandler.js
@@ -2,6 +2,7 @@ import CommandInterceptor from "diagram-js/lib/command/CommandInterceptor";
 import getDropdown from "../../util/Dropdown";
 import {appendOverlayListeners} from "../../util/HtmlUtil";
 import {is} from "../../util/Util";
+import ObjectiveEvents from "../../objectivemodeler/ObjectiveEvents";
 
 export default class DepLabelHandler extends CommandInterceptor {
     constructor(eventBus, modeling, directEditing, overlays, dependencyModeler) {
diff --git a/app/lib/fragmentmodeler/taskLabelHandling/taskLabelHandler.js b/app/lib/fragmentmodeler/taskLabelHandling/taskLabelHandler.js
index 9cb75026..4b8a9edc 100644
--- a/app/lib/fragmentmodeler/taskLabelHandling/taskLabelHandler.js
+++ b/app/lib/fragmentmodeler/taskLabelHandling/taskLabelHandler.js
@@ -58,7 +58,7 @@ export default class TaskLabelHandler extends CommandInterceptor {
                         },
                         element
                     );
-                    this._durationDropdown.addCreateElementInput(event => this._dropdownContainer.confirm(),"number",activity.duration);
+                    this._durationDropdown.addCreateElementInput(event => this._dropdownContainer.confirm(),"number",activity.duration, "0");
                 }
                 const populateRoleDropdown = () => {
                     this._roleDropdown.populate(
@@ -96,7 +96,7 @@ export default class TaskLabelHandler extends CommandInterceptor {
                         this.updateName(newNameInput,element);
                         populateNameDropdown();
                     }
-                    if (newDurationInput !== activity.duration && newDurationInput > 0) {
+                    if (newDurationInput !== activity.duration && newDurationInput >= 0) {
                         this.updateDuration(newDurationInput,element);
                         populateDurationDropdown();
                     }
diff --git a/app/lib/mediator/Mediator.js b/app/lib/mediator/Mediator.js
index 9eadcfa8..5be5a98a 100644
--- a/app/lib/mediator/Mediator.js
+++ b/app/lib/mediator/Mediator.js
@@ -224,6 +224,7 @@ Mediator.prototype.olcRenamed = function (olc, name) {
 Mediator.prototype.roleListChanged = function () {
     let roles = this.roleModelerHook.modeler.getRoles();
     this.fragmentModelerHook.modeler.handleRoleListChanged(roles);
+    this.resourceModelerHook.modeler.handleRoleListChanged(roles);
 }
 
 Mediator.prototype.roleCreationRequested = function (name) {
@@ -244,11 +245,13 @@ Mediator.prototype.confirmRoleDeletion = function (role) {
 
 Mediator.prototype.deletedRole = function (role) {
     this.fragmentModelerHook.modeler.handleRoleDeleted(role);
+    this.resourceModelerHook.modeler.handleRoleDeleted(role);
     this.roleListChanged();
 }
 
 Mediator.prototype.renamedRole = function (role) {
     this.fragmentModelerHook.modeler.handleRoleRenamed(role);
+    this.resourceModelerHook.modeler.handleRoleRenamed(role);
 }
 
 
@@ -434,34 +437,35 @@ Mediator.prototype.FragmentModelerHook = function (eventBus, fragmentModeler) {
     this.mediator.fragmentModelerHook = this;
     this.eventBus = eventBus;
 
-    eventBus.on('import.parse.complete', ({warnings}) => {
-        warnings.filter(({message}) => message.startsWith('unresolved reference')).forEach(({
-                                                                                                property,
-                                                                                                value,
-                                                                                                element
-                                                                                            }) => {
-            if (property === 'fcm:dataclass') {
-                const dataClass = this.mediator.dataModelerHook.modeler.get('elementRegistry').get(value).businessObject;
-                if (!dataClass) {
-                    throw new Error('Could not resolve data class with id ' + value);
-                }
-                element.dataclass = dataClass;
-            } else if (property === 'fcm:states') {
-                const state = this.mediator.olcModelerHook.modeler.getStateById(value)
-                if (!state) {
-                    throw new Error('Could not resolve olc state with id ' + value);
-                }
-                element.get('states').push(state);
-            } else if (property === 'fcm:role') {
-                const role = this.mediator.roleModelerHook.modeler.get('elementRegistry').get(value).businessObject;
-                if (!role) {
-                    throw new Error('Could not resolve role with id ' + value);
-                }
-                element.role = role;
+  eventBus.on("import.parse.complete", ({ warnings }) => {
+    warnings
+      .filter(({ message }) => message.startsWith("unresolved reference"))
+      .forEach(({ property, value, element }) => {
+        if (property === "fcm:dataclass") {
+          const dataClass = this.mediator.dataModelerHook.modeler
+            .get("elementRegistry")
+            .get(value).businessObject;
+          if (!dataClass) {
+            throw new Error("Could not resolve data class with id " + value);
+          }
+          element.dataclass = dataClass;
+        } else if (property === "fcm:states") {
+          const state =
+            this.mediator.olcModelerHook.modeler.getStateById(value);
+          if (!state) {
+            throw new Error("Could not resolve olc state with id " + value);
+          }
+          element.get("states").push(state);
+        } else if (property === 'fcm:role') {
+            const role = this.mediator.roleModelerHook.modeler.get('elementRegistry').get(value).businessObject;
+            if (!role) {
+                throw new Error('Could not resolve role with id ' + value);
             }
-        });
-    });
-}
+            element.role = role;
+        }
+      });
+  });
+};
 inherits(Mediator.prototype.FragmentModelerHook, CommandInterceptor);
 
 Mediator.prototype.FragmentModelerHook.$inject = [
@@ -544,35 +548,38 @@ Mediator.prototype.ObjectiveModelerHook = function (eventBus, objectiveModeler)
         }
     });
 
-    eventBus.on('import.parse.complete', ({context}) => {
-        context.warnings.filter(({message}) => message.startsWith('unresolved reference')).forEach(({
-                                                                                                        property,
-                                                                                                        value,
-                                                                                                        element
-                                                                                                    }) => {
-            if (property === 'om:classRef') {
-                const dataClass = this.mediator.dataModelerHook.modeler.get('elementRegistry').get(value).businessObject;
-                if (!dataClass) {
-                    throw new Error('Could not resolve data class with id ' + value);
-                }
-                element.classRef = dataClass;
-            }
-            if (property === 'om:state') {
-                const state = this.mediator.olcModelerHook.modeler.getStateById(value);
-                if (!state) {
-                    throw new Error('Could not resolve state with id ' + value);
-                }
-                element.state = state;
-            }
-            if (property === 'odDi:objectiveRef') {
-                const objective = this.mediator.dependencyModelerHook.modeler.get('elementRegistry').get(value).businessObject;
-                if (!objective) {
-                    throw new Error('Could not resolve objectives with id ' + value);
-                }
-                element.objectiveRef = objective;
-            }
-        });
-    });
+  eventBus.on("import.parse.complete", ({ context }) => {
+    context.warnings
+      .filter(({ message }) => message.startsWith("unresolved reference"))
+      .forEach(({ property, value, element }) => {
+        if (property === "om:classRef") {
+          const dataClass = this.mediator.dataModelerHook.modeler
+            .get("elementRegistry")
+            .get(value).businessObject;
+          if (!dataClass) {
+            throw new Error("Could not resolve data class with id " + value);
+          }
+          element.classRef = dataClass;
+        }
+        if (property === "om:state") {
+          const state =
+            this.mediator.olcModelerHook.modeler.getStateById(value);
+          if (!state) {
+            throw new Error("Could not resolve state with id " + value);
+          }
+          element.state = state;
+        }
+        if (property === "odDi:objectiveRef") {
+          const objective = this.mediator.dependencyModelerHook.modeler
+            .get("elementRegistry")
+            .get(value).businessObject;
+          if (!objective) {
+            throw new Error("Could not resolve objectives with id " + value);
+          }
+          element.objectiveRef = objective;
+        }
+      });
+  });
 
     eventBus.on(ObjectiveEvents.OBJECTIVE_CREATION_REQUESTED, event => {
         return this.mediator.objectiveCreationRequested(event.name);
@@ -659,21 +666,21 @@ Mediator.prototype.OlcModelerHook = function (eventBus, olcModeler) {
         return false; // Deletion should never be directly done in olc modeler, will instead propagate from data modeler
     });
 
-    eventBus.on('import.parse.complete', ({context}) => {
-        context.warnings.filter(({message}) => message.startsWith('unresolved reference')).forEach(({
-                                                                                                        property,
-                                                                                                        value,
-                                                                                                        element
-                                                                                                    }) => {
-            if (property === 'olc:classRef') {
-                const dataClass = this.mediator.dataModelerHook.modeler.get('elementRegistry').get(value).businessObject;
-                if (!dataClass) {
-                    throw new Error('Could not resolve data class with id ' + value);
-                }
-                element.classRef = dataClass;
-            }
-        });
-    });
+  eventBus.on("import.parse.complete", ({ context }) => {
+    context.warnings
+      .filter(({ message }) => message.startsWith("unresolved reference"))
+      .forEach(({ property, value, element }) => {
+        if (property === "olc:classRef") {
+          const dataClass = this.mediator.dataModelerHook.modeler
+            .get("elementRegistry")
+            .get(value).businessObject;
+          if (!dataClass) {
+            throw new Error("Could not resolve data class with id " + value);
+          }
+          element.classRef = dataClass;
+        }
+      });
+  });
 
     this.locationOfElement = function (element) {
         return 'Olc ' + root(element).name;
@@ -688,6 +695,101 @@ Mediator.prototype.OlcModelerHook.$inject = [
 
 Mediator.prototype.OlcModelerHook.isHook = true;
 
+// === Resource Modeler Hook
+Mediator.prototype.ResourceModelerHook = function (eventBus, resourceModeler) {
+    CommandInterceptor.call(this, eventBus);
+    AbstractHook.call(
+        this,
+        resourceModeler,
+        "Resource Model",
+        "https://github.com/Noel-Bastubbe/for-Construction-Modeling/wiki"
+    );
+    this.mediator.resourceModelerHook = this;
+    this.eventBus = eventBus;
+
+    this.executed(["shape.create"], (event) => {
+        if (is(event.context.shape, "rem:Resource")) {
+            //this.mediator.addedClass(event.context.shape.businessObject);
+        }
+    });
+
+    this.reverted(["shape.create"], (event) => {
+        if (is(event.context.shape, "rem:Resource")) {
+            console.log(event);
+            //this.mediator.addedState(event.context.shape.businessObject);
+        }
+    });
+
+    this.executed(["shape.delete"], (event) => {
+        if (is(event.context.shape, "rem:Resource")) {
+            //this.mediator.deletedClass(event.context.shape.businessObject);
+        }
+    });
+
+    this.reverted(["shape.delete"], (event) => {
+        if (is(event.context.shape, "rem:Resource")) {
+            console.log(event);
+            //this.mediator.deletedState(event.context.shape.businessObject);
+        }
+    });
+
+    this.preExecute(["elements.delete"], (event) => {
+        event.context.elements = event.context.elements.filter(element => {
+            if (is(element, "rem:Resource")) {
+                return this.modeler.deleteResource(element);
+            } else {
+                return true;
+            }
+        });
+    });
+
+    this.executed(["element.updateLabel"], (event) => {
+        // var changedLabel = event.context.element.businessObject.labelAttribute;
+        // if (
+        //   is(event.context.element, "rem:Resource") &&
+        //   (changedLabel === "name" || !changedLabel)
+        // ) {
+        //   //this.mediator.renamedClass(event.context.element.businessObject);
+        // }
+    });
+
+    this.reverted(["element.updateLabel"], (event) => {
+        // var changedLabel = event.context.element.businessObject.labelAttribute;
+        // if (
+        //   is(event.context.element, "rem:Resource") &&
+        //   (changedLabel === "name" || !changedLabel)
+        // ) {
+        //   //this.mediator.renamedClass(event.context.element.businessObject);
+        // }
+    });
+
+    eventBus.on("import.parse.complete", ({ context }) => {
+        context.warnings
+            .filter(({ message }) => message.startsWith("unresolved reference"))
+            .forEach(({ property, value, element }) => {
+                if (property === 'rem:roles') {
+                    const role = this.mediator.roleModelerHook.modeler.get('elementRegistry').get(value).businessObject;
+                    if (!role) {
+                        throw new Error('Could not resolve role with id ' + value);
+                    }
+                    if(element.roles){
+                        element.roles.push(role);
+                    } else {
+                        element.roles = [role]
+                    }
+                }
+            });
+    });
+};
+inherits(Mediator.prototype.ResourceModelerHook, CommandInterceptor);
+
+Mediator.prototype.ResourceModelerHook.$inject = [
+    "eventBus",
+    "resourceModeler",
+];
+
+Mediator.prototype.ResourceModelerHook.isHook = true;
+
 // === Role Modeler Hook
 Mediator.prototype.RoleModelerHook = function (eventBus, roleModeler) {
     CommandInterceptor.call(this, eventBus);
diff --git a/app/lib/resourcemodeler/.eslintrc b/app/lib/resourcemodeler/.eslintrc
new file mode 100644
index 00000000..ce74caa7
--- /dev/null
+++ b/app/lib/resourcemodeler/.eslintrc
@@ -0,0 +1,8 @@
+{
+    "plugins": [
+      "import"
+    ],
+    "rules": {
+      "import/no-unresolved": "error"
+    }
+  }
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/BaseModeler.js b/app/lib/resourcemodeler/BaseModeler.js
new file mode 100644
index 00000000..cf00af19
--- /dev/null
+++ b/app/lib/resourcemodeler/BaseModeler.js
@@ -0,0 +1,74 @@
+import inherits from 'inherits';
+
+import Ids from 'ids';
+
+import BaseViewer from './BaseViewer';
+
+
+/**
+ * A base modeler for od boards.
+ *
+ * Have a look at {@link Modeler} for a bundle that includes actual features.
+ *
+ * @param {Object} [options] configuration options to pass to the viewer
+ * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
+ * @param {String|Number} [options.width] the width of the viewer
+ * @param {String|Number} [options.height] the height of the viewer
+ * @param {Object} [options.moddleExtensions] extension packages to provide
+ * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
+ * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+ */
+export default function BaseModeler(options) {
+  BaseViewer.call(this, options);
+
+  // hook ID collection into the modeler
+  this.on('import.parse.complete', function(event) {
+    if (!event.error) {
+      this._collectIds(event.definitions, event.context);
+    }
+  }, this);
+
+  this.on('diagram.destroy', function() {
+    this.get('moddle').ids.clear();
+  }, this);
+}
+
+inherits(BaseModeler, BaseViewer);
+
+
+/**
+ * Create a moddle instance, attaching ids to it.
+ *
+ * @param {Object} options
+ */
+BaseModeler.prototype._createModdle = function(options) {
+  var moddle = BaseViewer.prototype._createModdle.call(this, options);
+
+  // attach ids to moddle to be able to track
+  // and validated ids in the XML document
+  // tree
+  moddle.ids = new Ids([ 32, 36, 1 ]);
+
+  return moddle;
+};
+
+/**
+ * Collect ids processed during parsing of the
+ * definitions object.
+ *
+ * @param {ModdleElement} definitions
+ * @param {Context} context
+ */
+BaseModeler.prototype._collectIds = function(definitions, context) {
+
+  var moddle = definitions.$model,
+      ids = moddle.ids,
+      id;
+
+  // remove references from previous import
+  ids.clear();
+
+  for (id in context.elementsById) {
+    ids.claim(id, context.elementsById[id]);
+  }
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/BaseViewer.js b/app/lib/resourcemodeler/BaseViewer.js
new file mode 100644
index 00000000..1b8897f8
--- /dev/null
+++ b/app/lib/resourcemodeler/BaseViewer.js
@@ -0,0 +1,737 @@
+import {assign, find, isNumber, omit} from 'min-dash';
+
+import {domify, event as domEvent, query as domQuery, remove as domRemove} from 'min-dom';
+
+import {innerSVG} from 'tiny-svg';
+
+import Diagram from 'diagram-js';
+import Moddle from './moddle';
+
+import inherits from 'inherits';
+
+import {importOdDiagram} from './import/Importer';
+import {BPMNIO_IMG, open as openPoweredBy} from './util/PoweredByUtil';
+
+
+/**
+ * A base viewer for object diagrams.
+ *
+ * Have a look at {@link Viewer}, {@link NavigatedViewer} or {@link Modeler} for
+ * bundles that include actual features.
+ *
+ * @param {Object} [options] configuration options to pass to the viewer
+ * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
+ * @param {String|Number} [options.width] the width of the viewer
+ * @param {String|Number} [options.height] the height of the viewer
+ * @param {Object} [options.moddleExtensions] extension packages to provide
+ * @param {Array<didi.Module>} [options.modules] a list of modules to override the default modules
+ * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
+ */
+export default function BaseViewer(options) {
+
+  options = assign({}, DEFAULT_OPTIONS, options);
+
+  this._moddle = this._createModdle(options);
+
+  this._container = this._createContainer(options);
+
+  /* <project-logo> */
+
+  addProjectLogo(this._container);
+
+  /* </project-logo> */
+
+  this._init(this._container, this._moddle, options);
+}
+
+inherits(BaseViewer, Diagram);
+
+/**
+* The importXML result.
+*
+* @typedef {Object} ImportXMLResult
+*
+* @property {Array<string>} warnings
+*/
+
+/**
+* The importXML error.
+*
+* @typedef {Error} ImportXMLError
+*
+* @property {Array<string>} warnings
+*/
+
+
+/**
+ * Parse and render a OD-diagram.
+ *
+ * Once finished the viewer reports back the result to the
+ * provided callback function with (err, warnings).
+ *
+ * ## Life-Cycle Events
+ *
+ * During import the viewer will fire life-cycle events:
+ *
+ *   * import.parse.start (about to read model from xml)
+ *   * import.parse.complete (model read; may have worked or not)
+ *   * import.render.start (graphical import start)
+ *   * import.render.complete (graphical import finished)
+ *   * import.done (everything done)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {String} xml the Postit xml
+ * @param {ModdleElement<PostitRootBoard>|String} [rootBoard] Postit board or id of board to render (if not provided, the first one will be rendered)
+ *
+ * @returns {Promise<ImportXMLResult, ImportXMLError>}
+ */
+BaseViewer.prototype.importXML = function(xml, rootBoard) {
+
+  var self = this;
+
+  return new Promise(function(resolve, reject) {
+
+    // hook in pre-parse listeners +
+    // allow xml manipulation
+    xml = self._emit('import.parse.start', { xml: xml }) || xml;
+
+    self._moddle.fromXML(xml, 'rem:Definitions').then(function(result) {
+
+      var definitions = result.rootElement;
+      var references = result.references;
+      var parseWarnings = result.warnings;
+      var elementsById = result.elementsById;
+
+      var context = {
+        references: references,
+        elementsById: elementsById,
+        warnings: parseWarnings
+      };
+
+      // hook in post parse listeners +
+      // allow definitions manipulation
+      definitions = self._emit('import.parse.complete', {
+        definitions: definitions,
+        context: context
+      }) || definitions;
+
+      self.importDefinitions(definitions, rootBoard).then(function(result) {
+        var allWarnings = [].concat(parseWarnings, result.warnings || []);
+
+        self._emit('import.done', { error: null, warnings: allWarnings });
+
+        return resolve({ warnings: allWarnings });
+      }).catch(function(err) {
+        var allWarnings = [].concat(parseWarnings, err.warnings || []);
+
+        self._emit('import.done', { error: err, warnings: allWarnings });
+
+        return reject(addWarningsToError(err, allWarnings));
+      });
+    }).catch(function(err) {
+
+      self._emit('import.parse.complete', {
+        error: err
+      });
+
+      err = checkValidationError(err);
+
+      self._emit('import.done', { error: err, warnings: err.warnings });
+
+      return reject(err);
+    });
+
+  });
+};
+
+/**
+* The importDefinitions result.
+*
+* @typedef {Object} ImportDefinitionsResult
+*
+* @property {Array<string>} warnings
+*/
+
+/**
+* The importDefinitions error.
+*
+* @typedef {Error} ImportDefinitionsError
+*
+* @property {Array<string>} warnings
+*/
+
+/**
+ * Import parsed definitions and render a Postit diagram.
+ *
+ * Once finished the viewer reports back the result to the
+ * provided callback function with (err, warnings).
+ *
+ * ## Life-Cycle Events
+ *
+ * During import the viewer will fire life-cycle events:
+ *
+ *   * import.render.start (graphical import start)
+ *   * import.render.complete (graphical import finished)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {ModdleElement<Definitions>} definitions parsed Postit definitions
+ * @param {ModdleElement<ODRootBoard>|String} [rootBoard] Postit board or id of board to render (if not provided, the first one will be rendered)
+ *
+ * returns {Promise<ImportDefinitionsResult, ImportDefinitionsError>}
+ */
+BaseViewer.prototype.importDefinitions = function(definitions, rootBoard) {
+
+  var self = this;
+
+  return new Promise(function(resolve, reject) {
+
+    self._setDefinitions(definitions);
+
+    self.open(rootBoard).then(function(result) {
+
+      var warnings = result.warnings;
+
+      return resolve({ warnings: warnings });
+    }).catch(function(err) {
+
+      return reject(err);
+    });
+  });
+};
+
+/**
+ * The open result.
+ *
+ * @typedef {Object} OpenResult
+ *
+ * @property {Array<string>} warnings
+ */
+
+/**
+* The open error.
+*
+* @typedef {Error} OpenError
+*
+* @property {Array<string>} warnings
+*/
+
+/**
+ * Open board of previously imported XML.
+ *
+ * Once finished the viewer reports back the result to the
+ * provided callback function with (err, warnings).
+ *
+ * ## Life-Cycle Events
+ *
+ * During switch the viewer will fire life-cycle events:
+ *
+ *   * import.render.start (graphical import start)
+ *   * import.render.complete (graphical import finished)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {String|ModdleElement<OdRootBoard>} [rootBoardOrId] id or the diagram to open
+ *
+ * returns {Promise<OpenResult, OpenError>}
+ */
+BaseViewer.prototype.open = function(rootBoardOrId) {
+
+  var definitions = this._definitions;
+  var rootBord = rootBoardOrId;
+
+  var self = this;
+
+  return new Promise(function(resolve, reject) {
+    if (!definitions) {
+      var err1 = new Error('no XML imported');
+
+      return reject(addWarningsToError(err1, []));
+    }
+
+    if (typeof rootBoardOrId === 'string') {
+      rootBord = findRootBoard(definitions, rootBoardOrId);
+
+      if (!rootBord) {
+        var err2 = new Error('OdRootBoard <' + rootBoardOrId + '> not found');
+
+        return reject(addWarningsToError(err2, []));
+      }
+    }
+
+    // clear existing rendered diagram
+    // catch synchronous exceptions during #clear()
+    try {
+      self.clear();
+    } catch (error) {
+
+      return reject(addWarningsToError(error, []));
+    }
+
+    // perform graphical import
+    importOdDiagram(self, definitions, rootBord).then(function(result) {
+
+      var warnings = result.warnings;
+
+      return resolve({ warnings: warnings });
+    }).catch(function(err) {
+
+      return reject(err);
+    });
+  });
+};
+
+/**
+ * The saveXML result.
+ *
+ * @typedef {Object} SaveXMLResult
+ *
+ * @property {string} xml
+ */
+
+/**
+ * Export the currently displayed od diagram as
+ * a od XML document.
+ *
+ * ## Life-Cycle Events
+ *
+ * During XML saving the viewer will fire life-cycle events:
+ *
+ *   * saveXML.start (before serialization)
+ *   * saveXML.serialized (after xml generation)
+ *   * saveXML.done (everything done)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {Object} [options] export options
+ * @param {Boolean} [options.format=false] output formatted XML
+ * @param {Boolean} [options.preamble=true] output preamble
+ *
+ * returns {Promise<SaveXMLResult, Error>}
+ */
+BaseViewer.prototype.saveXML = function(options) {
+
+  options = options || {};
+
+  var self = this;
+
+  var definitions = this._definitions;
+
+  return new Promise(function(resolve, reject) {
+
+    if (!definitions) {
+      var err = new Error('no definitions loaded');
+
+      return reject(err);
+    }
+
+    // allow to fiddle around with definitions
+    definitions = self._emit('saveXML.start', {
+      definitions: definitions
+    }) || definitions;
+
+    self._moddle.toXML(definitions, options).then(function(result) {
+
+      var xml = result.xml;
+
+      try {
+        xml = self._emit('saveXML.serialized', {
+          error: null,
+          xml: xml
+        }) || xml;
+
+        self._emit('saveXML.done', {
+          error: null,
+          xml: xml
+        });
+      } catch (e) {
+        console.error('error in saveXML life-cycle listener', e);
+      }
+
+      return resolve({ xml: xml });
+    }).catch(function(err) {
+
+      return reject(err);
+    });
+  });
+};
+
+/**
+ * The saveSVG result.
+ *
+ * @typedef {Object} SaveSVGResult
+ *
+ * @property {string} svg
+ */
+
+/**
+ * Export the currently displayed ODM diagram as
+ * an SVG image.
+ *
+ * ## Life-Cycle Events
+ *
+ * During SVG saving the viewer will fire life-cycle events:
+ *
+ *   * saveSVG.start (before serialization)
+ *   * saveSVG.done (everything done)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {Object} [options]
+ *
+ * returns {Promise<SaveSVGResult, Error>}
+ */
+BaseViewer.prototype.saveSVG = function(options) {
+
+  const self = this;
+
+  return new Promise(function(resolve, reject) {
+
+    self._emit('saveSVG.start');
+
+    let svg, err;
+
+    try {
+      const canvas = self.get('canvas');
+
+      const contentNode = canvas.getActiveLayer(),
+            defsNode = domQuery('defs', canvas._svg);
+
+      const contents = innerSVG(contentNode),
+            defs = defsNode ? '<defs>' + innerSVG(defsNode) + '</defs>' : '';
+
+      const bbox = contentNode.getBBox();
+
+      svg =
+        '<?xml version="1.0" encoding="utf-8"?>\n' +
+        '<!-- created with diagram-js -->\n' +
+        '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
+        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ' +
+             'width="' + bbox.width + '" height="' + bbox.height + '" ' +
+             'viewBox="' + bbox.x + ' ' + bbox.y + ' ' + bbox.width + ' ' + bbox.height + '" version="1.1">' +
+          defs + contents +
+        '</svg>';
+    } catch (e) {
+      err = e;
+    }
+
+    self._emit('saveSVG.done', {
+      error: err,
+      svg: svg
+    });
+
+    if (!err) {
+      return resolve({ svg: svg });
+    }
+
+    return reject(err);
+  });
+};
+
+/**
+ * Get a named diagram service.
+ *
+ * @example
+ *
+ * var elementRegistry = viewer.get('elementRegistry');
+ * var startEventShape = elementRegistry.get('StartEvent_1');
+ *
+ * @param {String} name
+ *
+ * @return {Object} diagram service instance
+ *
+ * @method BaseViewer#get
+ */
+
+/**
+ * Invoke a function in the context of this viewer.
+ *
+ * @example
+ *
+ * viewer.invoke(function(elementRegistry) {
+ *   var startEventShape = elementRegistry.get('StartEvent_1');
+ * });
+ *
+ * @param {Function} fn to be invoked
+ *
+ * @return {Object} the functions return value
+ *
+ * @method BaseViewer#invoke
+ */
+
+
+BaseViewer.prototype._setDefinitions = function(definitions) {
+  this._definitions = definitions;
+};
+
+BaseViewer.prototype.getModules = function() {
+  return this._modules;
+};
+
+/**
+ * Remove all drawn elements from the viewer.
+ *
+ * After calling this method the viewer can still
+ * be reused for opening another diagram.
+ *
+ * @method BaseViewer#clear
+ */
+BaseViewer.prototype.clear = function() {
+  if (!this.getDefinitions()) {
+
+    // no diagram to clear
+    return;
+  }
+
+  // remove businessObject#di binding
+  //
+  // this is necessary, as we establish the bindings
+  // in the OdTreeWalker (and assume none are given
+  // on reimport)
+  this.get('elementRegistry').forEach(function(element) {
+    var bo = element.businessObject;
+
+    if (bo && bo.di) {
+      delete bo.di;
+    }
+  });
+
+  // remove drawn elements
+  Diagram.prototype.clear.call(this);
+};
+
+/**
+ * Destroy the viewer instance and remove all its
+ * remainders from the document tree.
+ */
+BaseViewer.prototype.destroy = function() {
+
+  // diagram destroy
+  Diagram.prototype.destroy.call(this);
+
+  // dom detach
+  domRemove(this._container);
+};
+
+/**
+ * Register an event listener
+ *
+ * Remove a previously added listener via {@link #off(event, callback)}.
+ *
+ * @param {String} event
+ * @param {Number} [priority]
+ * @param {Function} callback
+ * @param {Object} [target]
+ */
+BaseViewer.prototype.on = function(event, priority, callback, target) {
+  return this.get('eventBus').on(event, priority, callback, target);
+};
+
+/**
+ * De-register an event listener
+ *
+ * @param {String} event
+ * @param {Function} callback
+ */
+BaseViewer.prototype.off = function(event, callback) {
+  this.get('eventBus').off(event, callback);
+};
+
+BaseViewer.prototype.attachTo = function(parentNode) {
+
+  if (!parentNode) {
+    throw new Error('parentNode required');
+  }
+
+  // ensure we detach from the
+  // previous, old parent
+  this.detach();
+
+  // unwrap jQuery if provided
+  if (parentNode.get && parentNode.constructor.prototype.jquery) {
+    parentNode = parentNode.get(0);
+  }
+
+  if (typeof parentNode === 'string') {
+    parentNode = domQuery(parentNode);
+  }
+
+  parentNode.appendChild(this._container);
+
+  this._emit('attach', {});
+
+  this.get('canvas').resized();
+};
+
+BaseViewer.prototype.getDefinitions = function() {
+  return this._definitions;
+};
+
+BaseViewer.prototype.detach = function() {
+
+  var container = this._container,
+      parentNode = container.parentNode;
+
+  if (!parentNode) {
+    return;
+  }
+
+  this._emit('detach', {});
+
+  parentNode.removeChild(container);
+};
+
+BaseViewer.prototype._init = function(container, moddle, options) {
+
+  var baseModules = options.modules || this.getModules(),
+      additionalModules = options.additionalModules || [],
+      staticModules = [
+        {
+          resourceModeler: [ 'value', this ],
+          moddle: [ 'value', moddle ]
+        }
+      ];
+
+  var diagramModules = [].concat(staticModules, baseModules, additionalModules);
+
+  var diagramOptions = assign(omit(options, [ 'additionalModules' ]), {
+    canvas: assign({}, options.canvas, { container: container }),
+    modules: diagramModules
+  });
+
+  // invoke diagram constructor
+  Diagram.call(this, diagramOptions);
+
+  if (options && options.container) {
+    this.attachTo(options.container);
+  }
+};
+
+/**
+ * Emit an event on the underlying {@link EventBus}
+ *
+ * @param  {String} type
+ * @param  {Object} event
+ *
+ * @return {Object} event processing result (if any)
+ */
+BaseViewer.prototype._emit = function(type, event) {
+  return this.get('eventBus').fire(type, event);
+};
+
+BaseViewer.prototype._createContainer = function(options) {
+
+  var container = domify('<div class="pjs-container"></div>');
+
+  assign(container.style, {
+    width: ensureUnit(options.width),
+    height: ensureUnit(options.height),
+    position: options.position
+  });
+
+  return container;
+};
+
+BaseViewer.prototype._createModdle = function(options) {
+  var moddleOptions = assign({}, this._moddleExtensions, options.moddleExtensions);
+
+  return new Moddle(moddleOptions);
+};
+
+BaseViewer.prototype._modules = [];
+
+BaseViewer.prototype._moddleExtensions = {};
+
+
+// helpers ///////////////
+
+function addWarningsToError(err, warningsAry) {
+  err.warnings = warningsAry;
+  return err;
+}
+
+function checkValidationError(err) {
+
+  // check if we can help the user by indicating wrong odm xml
+  // (in case he or the exporting tool did not get that right)
+
+  var pattern = /unparsable content <([^>]+)> detected([\s\S]*)$/;
+  var match = pattern.exec(err.message);
+
+  if (match) {
+    err.message =
+      'unparsable content <' + match[1] + '> detected; ' +
+      'this may indicate an invalid Od board file' + match[2];
+  }
+
+  return err;
+}
+
+var DEFAULT_OPTIONS = {
+  width: '100%',
+  height: '100%',
+  position: 'relative'
+};
+
+
+/**
+ * Ensure the passed argument is a proper unit (defaulting to px)
+ */
+function ensureUnit(val) {
+  return val + (isNumber(val) ? 'px' : '');
+}
+
+
+/**
+ * Find RootBoard in definitions by ID
+ *
+ * @param {ModdleElement<Definitions>} definitions
+ * @param {String} boardId
+ *
+ * @return {ModdleElement<PostitRootBoard>|null}
+ */
+function findRootBoard(definitions, boardId) {
+  if (!boardId) {
+    return null;
+  }
+
+  return find(definitions.rootBoards, function(element) {
+    return element.id === boardId;
+  }) || null;
+}
+
+/* <project-logo> */
+
+/**
+ * Adds the project logo to the diagram container as
+ * required by the bpmn.io license.
+ *
+ * @see http://bpmn.io/license
+ *
+ * @param {Element} container
+ */
+function addProjectLogo(container) {
+  var img = BPMNIO_IMG;
+
+  var linkMarkup =
+    '<a href="http://bpmn.io" ' +
+    'target="_blank" ' +
+    'class="bjs-powered-by" ' +
+    'title="Powered by bpmn.io" ' +
+    'style="position: absolute; bottom: 15px; right: 15px; z-index: 100">' +
+    img +
+    '</a>';
+
+  var linkElement = domify(linkMarkup);
+
+  container.appendChild(linkElement);
+
+  domEvent.bind(linkElement, 'click', function(event) {
+    openPoweredBy();
+
+    event.preventDefault();
+  });
+}
+
+/* </project-logo> */
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/NavigatedViewer.js b/app/lib/resourcemodeler/NavigatedViewer.js
new file mode 100644
index 00000000..982d3aa6
--- /dev/null
+++ b/app/lib/resourcemodeler/NavigatedViewer.js
@@ -0,0 +1,31 @@
+import inherits from 'inherits';
+
+import Viewer from './Viewer';
+
+import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
+import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
+
+
+/**
+ * A viewer that includes mouse navigation facilities
+ *
+ * @param {Resource} options
+ */
+export default function NavigatedViewer(options) {
+  Viewer.call(this, options);
+}
+
+inherits(NavigatedViewer, Viewer);
+
+
+NavigatedViewer.prototype._navigationModules = [
+  KeyboardMoveModule,
+  MoveCanvasModule,
+  ZoomScrollModule
+];
+
+NavigatedViewer.prototype._modules = [].concat(
+  Viewer.prototype._modules,
+  NavigatedViewer.prototype._navigationModules
+);
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/RemModeler.js b/app/lib/resourcemodeler/RemModeler.js
new file mode 100644
index 00000000..f43bad19
--- /dev/null
+++ b/app/lib/resourcemodeler/RemModeler.js
@@ -0,0 +1,173 @@
+import inherits from 'inherits';
+
+import BaseModeler from './BaseModeler';
+
+import Viewer from './Viewer';
+import NavigatedViewer from './NavigatedViewer';
+
+import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
+import TouchModule from 'diagram-js/lib/navigation/touch';
+import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
+
+import AlignElementsModule from 'diagram-js/lib/features/align-elements';
+import AutoplaceModule from './features/auto-place';
+import AutoScrollModule from 'diagram-js/lib/features/auto-scroll';
+import BendpointsModule from 'diagram-js/lib/features/bendpoints';
+import ConnectionPreviewModule from 'diagram-js/lib/features/connection-preview';
+import ConnectModule from 'diagram-js/lib/features/connect';
+import ContextPadModule from './features/context-pad';
+import CopyPasteModule from './features/copy-paste';
+import CreateModule from 'diagram-js/lib/features/create';
+import EditorActionsModule from '../common/editor-actions';
+import GridSnappingModule from './features/grid-snapping';
+import KeyboardModule from '../common/keyboard';
+import KeyboardMoveSelectionModule from 'diagram-js/lib/features/keyboard-move-selection';
+import LabelEditingModule from './features/label-editing';
+import ModelingModule from './features/modeling';
+import MoveModule from 'diagram-js/lib/features/move';
+import PaletteModule from './features/palette';
+import ResizeModule from 'diagram-js/lib/features/resize';
+import SnappingModule from './features/snapping';
+import {is} from "bpmn-js/lib/util/ModelUtil";
+import taskLabelHandling from "./resourceLabelHandling";
+import RoleModeler from "../rolemodeler/RoleModeler";
+import FragmentModeler from "../fragmentmodeler/FragmentModeler";
+
+var initialDiagram =
+    `<?xml version="1.0" encoding="UTF-8"?>
+<rem:definitions xmlns:rem="http://tk/schema/od" xmlns:odDi="http://tk/schema/odDi">
+    <rem:odBoard id="Board" />
+    <odDi:odRootBoard id="StartBoard">
+        <odDi:odPlane id="Plane" boardElement="Board" />
+    </odDi:odRootBoard>
+</rem:definitions>`;
+
+export default function RemModeler(options) {
+    BaseModeler.call(this, options);
+}
+
+inherits(RemModeler, BaseModeler);
+
+
+RemModeler.Viewer = Viewer;
+RemModeler.NavigatedViewer = NavigatedViewer;
+
+/**
+ * The createDiagram result.
+ *
+ * @typedef {Resource} CreateDiagramResult
+ *
+ * @property {Array<string>} warnings
+ */
+
+/**
+ * The createDiagram error.
+ *
+ * @typedef {Error} CreateDiagramError
+ *
+ * @property {Array<string>} warnings
+ */
+
+/**
+ * Create a new diagram to start modeling.
+ *
+ * @returns {Promise<CreateDiagramResult, CreateDiagramError>}
+ *
+ */
+RemModeler.prototype.createDiagram = function () {
+    return this.importXML(initialDiagram);
+};
+
+RemModeler.prototype._interactionModules = [
+
+    // non-modeling components
+    KeyboardMoveModule,
+    MoveCanvasModule,
+    // RemButtonBarModule,
+    TouchModule,
+    ZoomScrollModule
+];
+
+RemModeler.prototype._modelingModules = [
+
+    // modeling components
+    AutoplaceModule,
+    AlignElementsModule,
+    AutoScrollModule,
+    BendpointsModule,
+    ConnectModule,
+    ConnectionPreviewModule,
+    ContextPadModule,
+    CopyPasteModule,
+    CreateModule,
+    EditorActionsModule,
+    GridSnappingModule,
+    KeyboardModule,
+    KeyboardMoveSelectionModule,
+    LabelEditingModule,
+    ModelingModule,
+    MoveModule,
+    PaletteModule,
+    ResizeModule,
+    SnappingModule,
+    taskLabelHandling,
+    // SpaceToolBehaviorModule
+];
+
+
+// modules the modeler is composed of
+//
+// - viewer modules
+// - interaction modules
+// - modeling modules
+
+RemModeler.prototype._modules = [].concat(
+    Viewer.prototype._modules,
+    RemModeler.prototype._interactionModules,
+    RemModeler.prototype._modelingModules
+);
+
+RemModeler.prototype.id = "REM";
+RoleModeler.prototype.rank = 10;
+
+RemModeler.prototype.name = function (constructionMode) {
+    if (constructionMode) {
+        return "Resource Model";
+    } else {
+        return "Resource Model";
+    }
+}
+
+RemModeler.prototype.deleteResource = function (resource) {
+    this.get('modeling').removeShape(resource);
+}
+
+RemModeler.prototype.handleRoleListChanged = function (roles, dryRun=false) {
+    this._roles = roles;
+}
+
+RemModeler.prototype.handleRoleRenamed = function (role) {
+    this.getResourcesWithRole(role).forEach(element => {
+        this.get('eventBus').fire('element.changed', {
+            element
+        })
+    });
+}
+
+RemModeler.prototype.handleRoleDeleted = function (role) {
+    this.getTasksWithRole(role).forEach((element, gfx) => {
+        element.businessObject.roles.pop(role);
+        this.get('eventBus').fire('element.changed', {
+            element
+        });
+    });
+}
+
+RemModeler.prototype.getResourcesWithRole = function (role) {
+    return this.get('elementRegistry').filter(element =>
+        is(element, 'rem:Resource') &&
+        role.id &&
+        element.businessObject.roles?.find(ele => ele.id === role.id)
+    );
+}
diff --git a/app/lib/resourcemodeler/Viewer.js b/app/lib/resourcemodeler/Viewer.js
new file mode 100644
index 00000000..72309729
--- /dev/null
+++ b/app/lib/resourcemodeler/Viewer.js
@@ -0,0 +1,25 @@
+import inherits from 'inherits';
+
+import CoreModule from './core';
+import TranslateModule from 'diagram-js/lib/i18n/translate';
+import SelectionModule from 'diagram-js/lib/features/selection';
+import OverlaysModule from 'diagram-js/lib/features/overlays';
+
+import BaseViewer from './BaseViewer';
+
+export default function Viewer(options) {
+  BaseViewer.call(this, options);
+}
+
+inherits(Viewer, BaseViewer);
+
+// modules the viewer is composed of
+Viewer.prototype._modules = [
+  CoreModule,
+  TranslateModule,
+  SelectionModule,
+  OverlaysModule
+];
+
+// default moddle extensions the viewer is composed of
+Viewer.prototype._moddleExtensions = {};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/core/index.js b/app/lib/resourcemodeler/core/index.js
new file mode 100644
index 00000000..a90e6471
--- /dev/null
+++ b/app/lib/resourcemodeler/core/index.js
@@ -0,0 +1,9 @@
+import DrawModule from '../draw';
+import ImportModule from '../import';
+
+export default {
+  __depends__: [
+    DrawModule,
+    ImportModule
+  ]
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/draw/REMRenderer.js b/app/lib/resourcemodeler/draw/REMRenderer.js
new file mode 100644
index 00000000..9c001a7d
--- /dev/null
+++ b/app/lib/resourcemodeler/draw/REMRenderer.js
@@ -0,0 +1,376 @@
+import inherits from 'inherits';
+
+import { assign, isObject } from 'min-dash';
+
+import { append as svgAppend, attr as svgAttr, classes as svgClasses, create as svgCreate } from 'tiny-svg';
+
+import { createLine } from 'diagram-js/lib/util/RenderUtil';
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
+
+import { getLabel } from '../features/label-editing/LabelUtil';
+
+import { getBusinessObject, is } from '../util/ModelUtil';
+import {
+  query as domQuery
+} from 'min-dom';
+
+import { getFillColor, getRectPath, getSemantic, getStrokeColor } from './REMRendererUtil';
+import Ids from 'ids';
+
+var RENDERER_IDS = new Ids();
+
+var HIGH_FILL_OPACITY = .35;
+
+var DEFAULT_TEXT_SIZE = 16;
+var markers = {};
+
+export default function REMRenderer(
+    config, eventBus, styles,
+    canvas, textRenderer, priority) {
+
+  BaseRenderer.call(this, eventBus, priority);
+
+  var defaultFillColor = config && config.defaultFillColor,
+      defaultStrokeColor = config && config.defaultStrokeColor;
+
+  var rendererId = RENDERER_IDS.next();
+
+  var computeStyle = styles.computeStyle;
+
+  function drawRect(parentGfx, width, height, r, offset, attrs) {
+
+    if (isObject(offset)) {
+      attrs = offset;
+      offset = 0;
+    }
+
+    offset = offset || 0;
+
+    attrs = computeStyle(attrs, {
+      stroke: 'black',
+      strokeWidth: 2,
+      fill: 'white'
+    });
+
+    var rect = svgCreate('rect');
+    svgAttr(rect, {
+      x: offset,
+      y: offset,
+      width: width - offset * 2,
+      height: height - offset * 2,
+      rx: r,
+      ry: r
+    });
+    svgAttr(rect, attrs);
+
+    svgAppend(parentGfx, rect);
+
+    return rect;
+  }
+
+  function drawPath(parentGfx, d, attrs) {
+
+    attrs = computeStyle(attrs, [ 'no-fill' ], {
+      strokeWidth: 2,
+      stroke: 'black'
+    });
+
+    var path = svgCreate('path');
+    svgAttr(path, { d: d });
+    svgAttr(path, attrs);
+
+    svgAppend(parentGfx, path);
+
+    return path;
+  }
+
+  function renderLabel(parentGfx, label, options) {
+
+    options = assign({
+      size: {
+        width: 100
+      }
+    }, options);
+
+    var text = textRenderer.createText(label || '', options);
+
+    svgClasses(text).add('djs-label');
+
+    svgAppend(parentGfx, text);
+
+    return text;
+  }
+
+  function renderEmbeddedLabel(parentGfx, element, align, fontSize) {
+    var semantic = getSemantic(element);
+
+    return renderLabel(parentGfx, semantic.name, {
+      box: element,
+      align: align,
+      padding: 5,
+      style: {
+        fill: getColor(element) === 'black' ? 'white' : 'black',
+        fontSize: fontSize || DEFAULT_TEXT_SIZE
+      },
+    });
+  }
+
+  function renderExternalLabel(parentGfx, element) {
+
+    var box = {
+      width: 90,
+      height: 30,
+      x: element.width / 2 + element.x,
+      y: element.height / 2 + element.y
+    };
+
+    return renderLabel(parentGfx, getLabel(element), {
+      box: box,
+      fitBox: true,
+      style: assign(
+        {},
+        textRenderer.getExternalStyle(),
+        {
+          fill: 'black'
+        }
+      )
+    });
+  }
+
+  function renderAttributes(parentGfx, element) {
+    let semantic = getSemantic(element);
+    let text = '';
+    text += 'Capacity: ';
+    if (semantic.capacity) {
+      text += semantic.capacity;
+    }
+    text += '\nAvailability: ';
+    if (semantic.availabilityStart && semantic.availabilityEnd) {
+      text += semantic.availabilityStart + " - " + semantic.availabilityEnd;
+    }
+    text += '\nRoles: ';
+    if (semantic.roles) {
+      text += semantic.roles.map(role => role.name).join(", ")
+    }
+      renderLabel(parentGfx, text, {
+        box: {
+          height: element.height + 30,
+          width: element.width
+        },
+        padding: 5,
+        align: 'left-middle',
+        style: {
+          fill: defaultStrokeColor
+        }
+      });
+  }
+
+  function addDivider(parentGfx, element) {
+    drawLine(parentGfx, [
+      { x: 0, y: 30 },
+      { x: element.width, y: 30 }
+    ], {
+      stroke: getStrokeColor(element, defaultStrokeColor)
+    });
+  }
+
+  function drawLine(parentGfx, waypoints, attrs) {
+    attrs = computeStyle(attrs, [ 'no-fill' ], {
+      stroke: 'black',
+      strokeWidth: 2,
+      fill: 'none'
+    });
+
+    var line = createLine(waypoints, attrs);
+
+    svgAppend(parentGfx, line);
+
+    return line;
+  }
+
+  function renderTitelLabel(parentGfx, element) {
+    let semantic = getSemantic(element);
+    let text = '';
+    if (semantic.name) {
+      text = semantic.name;
+    }
+    renderLabel(parentGfx, text, {
+      box: {
+        height: 30,
+        width: element.width
+      },
+      padding: 5,
+      align: 'center-middle',
+      style: {
+        fill: defaultStrokeColor
+      }
+    });
+  }
+
+  function createPathFromConnection(connection) {
+    var waypoints = connection.waypoints;
+
+    var pathData = 'm  ' + waypoints[0].x + ',' + waypoints[0].y;
+    for (var i = 1; i < waypoints.length; i++) {
+      pathData += 'L' + waypoints[i].x + ',' + waypoints[i].y + ' ';
+    }
+    return pathData;
+  }
+
+  function marker(fill, stroke) {
+    var id = '-' + colorEscape(fill) + '-' + colorEscape(stroke) + '-' + rendererId;
+
+    if (!markers[id]) {
+      createMarker(id, fill, stroke);
+    }
+
+    return 'url(#' + id + ')';
+  }
+
+  function addMarker(id, options) {
+    var attrs = assign({
+      fill: 'black',
+      strokeWidth: 1,
+      strokeLinecap: 'round',
+      strokeDasharray: 'none'
+    }, options.attrs);
+
+    var ref = options.ref || { x: 0, y: 0 };
+
+    var scale = options.scale || 1;
+
+    // fix for safari / chrome / firefox bug not correctly
+    // resetting stroke dash array
+    if (attrs.strokeDasharray === 'none') {
+      attrs.strokeDasharray = [ 10000, 1 ];
+    }
+
+    var marker = svgCreate('marker');
+
+    svgAttr(options.element, attrs);
+
+    svgAppend(marker, options.element);
+
+    svgAttr(marker, {
+      id: id,
+      viewBox: '0 0 20 20',
+      refX: ref.x,
+      refY: ref.y,
+      markerWidth: 20 * scale,
+      markerHeight: 20 * scale,
+      orient: 'auto'
+    });
+
+    var defs = domQuery('defs', canvas._svg);
+
+    if (!defs) {
+      defs = svgCreate('defs');
+
+      svgAppend(canvas._svg, defs);
+    }
+
+    svgAppend(defs, marker);
+
+    markers[id] = marker;
+  }
+
+  function colorEscape(str) {
+
+    // only allow characters and numbers
+    return str.replace(/[^0-9a-zA-z]+/g, '_');
+  }
+
+  function createMarker(id, type, fill, stroke) {
+    var linkEnd = svgCreate('path');
+    svgAttr(linkEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });
+
+    addMarker(id, {
+      element: linkEnd,
+      ref: { x: 11, y: 10 },
+      scale: 0.5,
+      attrs: {
+        fill: stroke,
+        stroke: stroke
+      }
+    });
+  }
+
+  this.handlers = {
+    'rem:Resource': function(parentGfx, element, attrs) {
+      var rect = drawRect(parentGfx, element.width, element.height, 0, assign({
+        fill: getFillColor(element, defaultFillColor),
+        fillOpacity: HIGH_FILL_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      }, attrs));
+
+      addDivider(parentGfx, element);
+
+      renderTitelLabel(parentGfx, element);
+
+      renderAttributes(parentGfx, element);
+
+      return rect;
+    },
+    'rem:Link': function(parentGfx, element) {
+      var pathData = createPathFromConnection(element);
+
+      var fill = getFillColor(element, defaultFillColor),
+          stroke = getStrokeColor(element, defaultStrokeColor);
+
+      var attrs = {
+        strokeLinejoin: 'round',
+        markerEnd: marker(fill, stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      };
+      return drawPath(parentGfx, pathData, attrs);
+    },
+    'label': function(parentGfx, element) {
+      return renderExternalLabel(parentGfx, element);
+    }
+  };
+}
+
+
+inherits(REMRenderer, BaseRenderer);
+
+REMRenderer.$inject = [
+  'config.odm',
+  'eventBus',
+  'styles',
+  'canvas',
+  'textRenderer'
+];
+
+
+REMRenderer.prototype.canRender = function(element) {
+  return is(element, 'rem:BoardElement');
+};
+
+REMRenderer.prototype.drawShape = function(parentGfx, element) {
+  var type = element.type;
+  var h = this.handlers[type];
+
+  /* jshint -W040 */
+  return h(parentGfx, element);
+};
+
+REMRenderer.prototype.drawConnection = function(parentGfx, element) {
+  var type = element.type;
+  var h = this.handlers[type];
+
+  /* jshint -W040 */
+  return h(parentGfx, element);
+};
+
+REMRenderer.prototype.getShapePath = function(element) {
+
+  return getRectPath(element);
+};
+
+// helpers //////////
+
+function getColor(element) {
+  var bo = getBusinessObject(element);
+
+  return bo.color || element.color;
+}
diff --git a/app/lib/resourcemodeler/draw/REMRendererUtil.js b/app/lib/resourcemodeler/draw/REMRendererUtil.js
new file mode 100644
index 00000000..a7416891
--- /dev/null
+++ b/app/lib/resourcemodeler/draw/REMRendererUtil.js
@@ -0,0 +1,67 @@
+import {
+  componentsToPath
+} from 'diagram-js/lib/util/RenderUtil';
+
+import {
+  getBusinessObject
+} from '../util/ModelUtil';
+
+
+// element utils //////////////////////
+
+export function getDi(element) {
+  return element.businessObject.di;
+}
+
+export function getSemantic(element) {
+  return element.businessObject;
+}
+
+
+// color access //////////////////////
+
+export function getFillColor(element, defaultColor) {
+  return (
+    getColor(element) ||
+    getDi(element).get('bioc:fill') ||
+    defaultColor ||
+    'white'
+  );
+}
+
+export function getStrokeColor(element, defaultColor) {
+  return (
+    getColor(element) ||
+    getDi(element).get('bioc:stroke') ||
+    defaultColor ||
+    'black'
+  );
+}
+
+
+// cropping path customizations //////////////////////
+
+export function getRectPath(shape) {
+  var x = shape.x,
+      y = shape.y,
+      width = shape.width,
+      height = shape.height;
+
+  var rectPath = [
+    [ 'M', x, y ],
+    [ 'l', width, 0 ],
+    [ 'l', 0, height ],
+    [ 'l', -width, 0 ],
+    [ 'z' ]
+  ];
+
+  return componentsToPath(rectPath);
+}
+
+// helpers //////////
+
+function getColor(element) {
+  var bo = getBusinessObject(element);
+
+  return bo.color || element.color;
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/draw/TextRenderer.js b/app/lib/resourcemodeler/draw/TextRenderer.js
new file mode 100644
index 00000000..5e0ce3f5
--- /dev/null
+++ b/app/lib/resourcemodeler/draw/TextRenderer.js
@@ -0,0 +1,89 @@
+import {assign} from 'min-dash';
+
+import TextUtil from 'diagram-js/lib/util/Text';
+
+var DEFAULT_FONT_SIZE = 16;
+var LINE_HEIGHT_RATIO = 1.2;
+
+
+export default function TextRenderer(config) {
+
+  var defaultStyle = assign({
+    fontFamily: 'IBM Plex, sans-serif',
+    fontSize: DEFAULT_FONT_SIZE,
+    fontWeight: 'normal',
+    lineHeight: LINE_HEIGHT_RATIO
+  }, config && config.defaultStyle || {});
+
+  var fontSize = parseInt(defaultStyle.fontSize, 10) - 1;
+
+  var externalStyle = assign({}, defaultStyle, {
+    fontSize: fontSize
+  }, config && config.externalStyle || {});
+
+  var textUtil = new TextUtil({
+    style: defaultStyle
+  });
+
+  /**
+   * Get the new bounds of an externally rendered,
+   * layouted label.
+   *
+   * @param  {Bounds} bounds
+   * @param  {String} text
+   *
+   * @return {Bounds}
+   */
+  this.getExternalLabelBounds = function(bounds, text) {
+
+    var layoutedDimensions = textUtil.getDimensions(text, {
+      box: {
+        width: 90,
+        height: 30,
+        x: bounds.width / 2 + bounds.x,
+        y: bounds.height / 2 + bounds.y
+      },
+      style: externalStyle
+    });
+
+    // resize label shape to fit label text
+    return {
+      x: Math.round(bounds.x + bounds.width / 2 - layoutedDimensions.width / 2),
+      y: Math.round(bounds.y),
+      width: Math.ceil(layoutedDimensions.width),
+      height: Math.ceil(layoutedDimensions.height)
+    };
+
+  };
+
+  /**
+   * Create a layouted text element.
+   *
+   * @param {String} text
+   * @param {Object} [options]
+   *
+   * @return {SVGElement} rendered text
+   */
+  this.createText = function(text, options) {
+    return textUtil.createText(text, options || {});
+  };
+
+  /**
+   * Get default text style.
+   */
+  this.getDefaultStyle = function() {
+    return defaultStyle;
+  };
+
+  /**
+   * Get the external text style.
+   */
+  this.getExternalStyle = function() {
+    return externalStyle;
+  };
+
+}
+
+TextRenderer.$inject = [
+  'config.textRenderer'
+];
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/draw/index.js b/app/lib/resourcemodeler/draw/index.js
new file mode 100644
index 00000000..c39cc166
--- /dev/null
+++ b/app/lib/resourcemodeler/draw/index.js
@@ -0,0 +1,8 @@
+import REMRenderer from './REMRenderer';
+import TextRenderer from './TextRenderer';
+
+export default {
+  __init__: [ 'remRenderer' ],
+  remRenderer: [ 'type', REMRenderer ],
+  textRenderer: [ 'type', TextRenderer ],
+};
diff --git a/app/lib/resourcemodeler/features/auto-place/ODAutoPlace.js b/app/lib/resourcemodeler/features/auto-place/ODAutoPlace.js
new file mode 100644
index 00000000..d4278af0
--- /dev/null
+++ b/app/lib/resourcemodeler/features/auto-place/ODAutoPlace.js
@@ -0,0 +1,18 @@
+import {getNewShapePosition} from './ODAutoPlaceUtil';
+
+
+/**
+ * BPMN auto-place behavior.
+ *
+ * @param {EventBus} eventBus
+ */
+export default function AutoPlace(eventBus) {
+  eventBus.on('autoPlace', function(context) {
+    var shape = context.shape,
+        source = context.source;
+
+    return getNewShapePosition(source, shape);
+  });
+}
+
+AutoPlace.$inject = [ 'eventBus' ];
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/auto-place/ODAutoPlaceUtil.js b/app/lib/resourcemodeler/features/auto-place/ODAutoPlaceUtil.js
new file mode 100644
index 00000000..ad73e17a
--- /dev/null
+++ b/app/lib/resourcemodeler/features/auto-place/ODAutoPlaceUtil.js
@@ -0,0 +1,71 @@
+import {is} from '../../util/ModelUtil';
+
+import {asTRBL, getMid,} from 'diagram-js/lib/layout/LayoutUtil';
+
+import {
+    findFreePosition,
+    generateGetNextPosition,
+    getConnectedDistance
+} from 'diagram-js/lib/features/auto-place/AutoPlaceUtil';
+
+
+/**
+ * Find the new position for the target element to
+ * connect to source.
+ *
+ * @param  {djs.model.Shape} source
+ * @param  {djs.model.Shape} element
+ *
+ * @return {Point}
+ */
+export function getNewShapePosition(source, element) {
+
+  if (is(element, 'rem:Resource')) {
+    return getFlowNodePosition(source, element);
+  }
+}
+
+/**
+ * Always try to place element right of source;
+ * compute actual distance from previous nodes in flow.
+ */
+export function getFlowNodePosition(source, element) {
+
+  var sourceTrbl = asTRBL(source);
+  var sourceMid = getMid(source);
+
+  var horizontalDistance = getConnectedDistance(source, {
+    filter: function(connection) {
+      return is(connection, 'rem:Link');
+    }
+  });
+
+  var margin = 30,
+      minDistance = 80,
+      orientation = 'left';
+
+  var position = {
+    x: sourceTrbl.right + horizontalDistance + element.width / 2,
+    y: sourceMid.y + getVerticalDistance(orientation, minDistance)
+  };
+
+  var nextPositionDirection = {
+    y: {
+      margin: margin,
+      minDistance: minDistance
+    }
+  };
+
+  return findFreePosition(source, element, position, generateGetNextPosition(nextPositionDirection));
+}
+
+
+function getVerticalDistance(orientation, minDistance) {
+  if (orientation.indexOf('top') != -1) {
+    return -1 * minDistance;
+  } else if (orientation.indexOf('bottom') != -1) {
+    return minDistance;
+  } else {
+    return 0;
+  }
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/auto-place/index.js b/app/lib/resourcemodeler/features/auto-place/index.js
new file mode 100644
index 00000000..23640fd0
--- /dev/null
+++ b/app/lib/resourcemodeler/features/auto-place/index.js
@@ -0,0 +1,9 @@
+import AutoPlaceModule from 'diagram-js/lib/features/auto-place';
+
+import ODAutoPlace from './ODAutoPlace';
+
+export default {
+  __depends__: [ AutoPlaceModule ],
+  __init__: [ 'odAutoPlace' ],
+  odAutoPlace: [ 'type', ODAutoPlace ]
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/context-pad/ContextPadProvider.js b/app/lib/resourcemodeler/features/context-pad/ContextPadProvider.js
new file mode 100644
index 00000000..f1345454
--- /dev/null
+++ b/app/lib/resourcemodeler/features/context-pad/ContextPadProvider.js
@@ -0,0 +1,194 @@
+import {assign, isArray,} from 'min-dash';
+
+import {hasPrimaryModifier} from 'diagram-js/lib/util/Mouse';
+
+import { is } from '../../util/ModelUtil';
+
+
+/**
+ * A provider for od elements context pad.
+ */
+export default function ContextPadProvider(
+    config, injector, eventBus, connect, create,
+    elementFactory, elementRegistry, contextPad, modeling, rules,
+    translate) {
+
+  config = config || {};
+
+  contextPad.registerProvider(this);
+
+  this._connect = connect;
+  this._create = create;
+  this._elementFactory = elementFactory;
+  this._elementRegistry = elementRegistry;
+  this._contextPad = contextPad;
+
+  this._modeling = modeling;
+
+  this._rules = rules;
+  this._translate = translate;
+
+  if (config.autoPlace !== false) {
+    this._autoPlace = injector.get('autoPlace', false);
+  }
+
+  eventBus.on('create.end', 250, function(event) {
+    let context = event.context,
+        shape = context.shape;
+
+    if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
+      return;
+    }
+
+    let entries = contextPad.getEntries(shape);
+
+    if (entries.replace) {
+      entries.replace.action.click(event, shape);
+    }
+  });
+}
+
+ContextPadProvider.$inject = [
+  'config.contextPad',
+  'injector',
+  'eventBus',
+  'connect',
+  'create',
+  'elementFactory',
+  'elementRegistry',
+  'contextPad',
+  'modeling',
+  'rules',
+  'translate'
+];
+
+
+ContextPadProvider.prototype.getContextPadEntries = function(element) {
+
+  const {
+    _rules: rules,
+    _modeling: modeling,
+    _translate: translate,
+    _connect: connect,
+    _elementFactory: elementFactory,
+    _elementRegistry: elementRegistry,
+    _autoPlace: autoPlace,
+    _create: create
+  } = this;
+
+  let actions = {};
+
+  if (element.type === 'label') {
+    return actions;
+  }
+
+  createDeleteEntry(actions);
+
+  if (element.type === 'rem:Resource') {
+    createLinkObjectsEntry(actions);
+    createLinkNewObjectEntry(actions);
+  }
+
+  return actions;
+
+  function removeElement() {
+    modeling.removeElements([ element ]);
+  }
+
+  function createDeleteEntry(actions) {
+
+    // delete element entry, only show if allowed by rules
+    let deleteAllowed = rules.allowed('elements.delete', { elements: [ element ] });
+
+    if (isArray(deleteAllowed)) {
+
+      // was the element returned as a deletion candidate?
+      deleteAllowed = deleteAllowed[0] === element;
+    }
+
+    if (deleteAllowed) {
+      assign(actions, {
+        'delete': {
+          group: 'edit',
+          className: 'bpmn-icon-trash',
+          title: translate('Remove'),
+          action: {
+            click: removeElement
+          }
+        }
+      });
+    }
+  }
+
+  function startConnect(event, element) {
+    connect.start(event, element);
+  }
+
+  function createLinkObjectsEntry(actions) {
+    assign(actions, {
+      'connect': {
+        group: 'connect',
+        className: 'bpmn-icon-connection',
+        title: 'Link object to other objects',
+        action: {
+          click: startConnect,
+          dragstart: startConnect,
+        },
+      },
+    });
+  }
+
+  function createLinkNewObjectEntry(actions) {
+    assign(actions, {
+      'append.append-task': appendAction(
+        'rem:Resource',
+        'bpmn-icon-od-class',
+        translate('Link with new object')
+      ),
+    });
+  }
+
+  /**
+   * Create an append action
+   *
+   * @param {string} type
+   * @param {string} className
+   * @param {string} [title]
+   * @param {Object} [options]
+   *
+   * @return {Object} descriptor
+   */
+  function appendAction(type, className, title, options) {
+
+    if (typeof title !== 'string') {
+      options = title;
+      title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
+    }
+
+    function appendStart(event, element) {
+
+      var shape = elementFactory.createShape(assign({ type: type }, options));
+      create.start(event, shape, {
+        source: element
+      });
+    }
+
+
+    var append = autoPlace ? function(event, element) {
+      var shape = elementFactory.createShape(assign({ type: type }, options));
+
+      autoPlace.append(element, shape);
+    } : appendStart;
+
+
+    return {
+      group: 'model',
+      className: className,
+      title: title,
+      action: {
+        dragstart: appendStart,
+        click: append
+      }
+    };
+  }
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/context-pad/index.js b/app/lib/resourcemodeler/features/context-pad/index.js
new file mode 100644
index 00000000..389e4d66
--- /dev/null
+++ b/app/lib/resourcemodeler/features/context-pad/index.js
@@ -0,0 +1,19 @@
+import DirectEditingModule from 'diagram-js-direct-editing';
+import ContextPadModule from 'diagram-js/lib/features/context-pad';
+import SelectionModule from 'diagram-js/lib/features/selection';
+import ConnectModule from 'diagram-js/lib/features/connect';
+import CreateModule from 'diagram-js/lib/features/create';
+
+import ContextPadProvider from './ContextPadProvider';
+
+export default {
+  __depends__: [
+    DirectEditingModule,
+    ContextPadModule,
+    SelectionModule,
+    ConnectModule,
+    CreateModule,
+  ],
+  __init__: [ 'contextPadProvider' ],
+  contextPadProvider: [ 'type', ContextPadProvider ]
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/copy-paste/ModdleCopy.js b/app/lib/resourcemodeler/features/copy-paste/ModdleCopy.js
new file mode 100644
index 00000000..882fe4a3
--- /dev/null
+++ b/app/lib/resourcemodeler/features/copy-paste/ModdleCopy.js
@@ -0,0 +1,244 @@
+import {find, forEach, has, isArray, isDefined, isObject, matchPattern, reduce, sortBy} from 'min-dash';
+
+var DISALLOWED_PROPERTIES = [
+  'boardElements'
+];
+
+/**
+ * @typedef {Function} <moddleCopy.canCopyProperties> listener
+ *
+ * @param {Object} context
+ * @param {Array<string>} context.propertyNames
+ * @param {ModdleElement} context.sourceElement
+ * @param {ModdleElement} context.targetElement
+ *
+ * @returns {Array<string>|boolean} - Return properties to be copied or false to disallow
+ * copying.
+ */
+
+/**
+ * @typedef {Function} <moddleCopy.canCopyProperty> listener
+ *
+ * @param {Object} context
+ * @param {ModdleElement} context.parent
+ * @param {*} context.property
+ * @param {string} context.propertyName
+ *
+ * @returns {*|boolean} - Return copied property or false to disallow
+ * copying.
+ */
+
+/**
+ * @typedef {Function} <moddleCopy.canSetCopiedProperty> listener
+ *
+ * @param {Object} context
+ * @param {ModdleElement} context.parent
+ * @param {*} context.property
+ * @param {string} context.propertyName
+ *
+ * @returns {boolean} - Return false to disallow
+ * setting copied property.
+ */
+
+/**
+ * Utility for copying model properties from source element to target element.
+ *
+ * @param {EventBus} eventBus
+ * @param {ODFactory} odFactory
+ * @param {PostitModdle} moddle
+ */
+export default function ModdleCopy(eventBus, odFactory, moddle) {
+  this._odFactory = odFactory;
+  this._eventBus = eventBus;
+  this._moddle = moddle;
+
+  // copy extension elements last
+  eventBus.on('moddleCopy.canCopyProperties', function(context) {
+    var propertyNames = context.propertyNames;
+
+    if (!propertyNames || !propertyNames.length) {
+      return;
+    }
+
+    return sortBy(propertyNames, function(propertyName) {
+      return propertyName === 'extensionElements';
+    });
+  });
+
+  // default check whether property can be copied
+  eventBus.on('moddleCopy.canCopyProperty', function(context) {
+    var parent = context.parent,
+        parentDescriptor = isObject(parent) && parent.$descriptor,
+        propertyName = context.propertyName;
+
+    if (propertyName && DISALLOWED_PROPERTIES.indexOf(propertyName) !== -1) {
+
+      // disallow copying property
+      return false;
+    }
+
+    if (propertyName &&
+      parentDescriptor &&
+      !find(parentDescriptor.properties, matchPattern({ name: propertyName }))) {
+
+      // disallow copying property
+      return false;
+    }
+  });
+}
+
+ModdleCopy.$inject = [
+  'eventBus',
+  'odFactory',
+  'moddle'
+];
+
+/**
+ * Copy model properties of source element to target element.
+ *
+ * @param {ModdleElement} sourceElement
+ * @param {ModdleElement} targetElement
+ * @param {Array<string>} [propertyNames]
+ *
+ * @param {ModdleElement}
+ */
+ModdleCopy.prototype.copyElement = function(sourceElement, targetElement, propertyNames) {
+  var self = this;
+
+  if (propertyNames && !isArray(propertyNames)) {
+    propertyNames = [ propertyNames ];
+  }
+
+  propertyNames = propertyNames || getPropertyNames(sourceElement.$descriptor);
+
+  var canCopyProperties = this._eventBus.fire('moddleCopy.canCopyProperties', {
+    propertyNames: propertyNames,
+    sourceElement: sourceElement,
+    targetElement: targetElement
+  });
+
+  if (canCopyProperties === false) {
+    return targetElement;
+  }
+
+  if (isArray(canCopyProperties)) {
+    propertyNames = canCopyProperties;
+  }
+
+  // copy properties
+  forEach(propertyNames, function(propertyName) {
+    var sourceProperty;
+
+    if (has(sourceElement, propertyName)) {
+      sourceProperty = sourceElement.get(propertyName);
+    }
+
+    var copiedProperty = self.copyProperty(sourceProperty, targetElement, propertyName);
+
+    var canSetProperty = self._eventBus.fire('moddleCopy.canSetCopiedProperty', {
+      parent: targetElement,
+      property: copiedProperty,
+      propertyName: propertyName
+    });
+
+    if (canSetProperty === false) {
+      return;
+    }
+
+    if (isDefined(copiedProperty)) {
+      targetElement.set(propertyName, copiedProperty);
+    }
+  });
+
+  return targetElement;
+};
+
+/**
+ * Copy model property.
+ *
+ * @param {*} property
+ * @param {ModdleElement} parent
+ * @param {string} propertyName
+ *
+ * @returns {*}
+ */
+ModdleCopy.prototype.copyProperty = function(property, parent, propertyName) {
+  var self = this;
+
+  // allow others to copy property
+  var copiedProperty = this._eventBus.fire('moddleCopy.canCopyProperty', {
+    parent: parent,
+    property: property,
+    propertyName: propertyName
+  });
+
+  // return if copying is NOT allowed
+  if (copiedProperty === false) {
+    return;
+  }
+
+  if (copiedProperty) {
+    if (isObject(copiedProperty) && copiedProperty.$type && !copiedProperty.$parent) {
+      copiedProperty.$parent = parent;
+    }
+
+    return copiedProperty;
+  }
+
+  var propertyDescriptor = this._moddle.getPropertyDescriptor(parent, propertyName);
+
+  // do NOT copy Ids and references
+  if (propertyDescriptor.isId || propertyDescriptor.isReference) {
+    return;
+  }
+
+  // copy arrays
+  if (isArray(property)) {
+    return reduce(property, function(childProperties, childProperty) {
+
+      // recursion
+      copiedProperty = self.copyProperty(childProperty, parent, propertyName);
+
+      // copying might NOT be allowed
+      if (copiedProperty) {
+        copiedProperty.$parent = parent;
+
+        return childProperties.concat(copiedProperty);
+      }
+
+      return childProperties;
+    }, []);
+  }
+
+  // copy model elements
+  if (isObject(property) && property.$type) {
+    if (this._moddle.getElementDescriptor(property).isGeneric) {
+      return;
+    }
+
+    copiedProperty = self._odFactory.create(property.$type);
+
+    copiedProperty.$parent = parent;
+
+    // recursion
+    copiedProperty = self.copyElement(property, copiedProperty);
+
+    return copiedProperty;
+  }
+
+  // copy primitive properties
+  return property;
+};
+
+// helpers //////////
+
+export function getPropertyNames(descriptor, keepDefaultProperties) {
+  return reduce(descriptor.properties, function(properties, property) {
+
+    if (keepDefaultProperties && property.default) {
+      return properties;
+    }
+
+    return properties.concat(property.name);
+  }, []);
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/copy-paste/ODCopyPaste.js b/app/lib/resourcemodeler/features/copy-paste/ODCopyPaste.js
new file mode 100644
index 00000000..11d7dd89
--- /dev/null
+++ b/app/lib/resourcemodeler/features/copy-paste/ODCopyPaste.js
@@ -0,0 +1,132 @@
+import {getBusinessObject} from '../../util/ModelUtil';
+
+import {forEach, isArray, isUndefined, omit, reduce} from 'min-dash';
+
+function copyProperties(source, target, properties) {
+  if (!isArray(properties)) {
+    properties = [ properties ];
+  }
+
+  forEach(properties, function(property) {
+    if (!isUndefined(source[property])) {
+      target[property] = source[property];
+    }
+  });
+}
+
+function removeProperties(element, properties) {
+  if (!isArray(properties)) {
+    properties = [ properties ];
+  }
+
+  forEach(properties, function(property) {
+    if (element[property]) {
+      delete element[property];
+    }
+  });
+}
+
+var LOW_PRIORITY = 750;
+
+
+export default function ODCopyPaste(odFactory, eventBus, moddleCopy) {
+
+  eventBus.on('copyPaste.copyElement', LOW_PRIORITY, function(context) {
+    var descriptor = context.descriptor,
+        element = context.element;
+
+    var businessObject = descriptor.oldBusinessObject = getBusinessObject(element);
+
+    descriptor.type = element.type;
+
+    copyProperties(businessObject, descriptor, ['classRef','instance','state']);
+
+    descriptor.di = {};
+
+    // fill and stroke will be set to DI
+    copyProperties(businessObject.di, descriptor.di, [
+      'fill',
+      'stroke'
+    ]);
+
+    if (isLabel(descriptor)) {
+      return descriptor;
+    }
+
+  });
+
+  var references;
+
+  function resolveReferences(descriptor, cache) {
+    var businessObject = getBusinessObject(descriptor);
+
+    // default sequence flows
+    if (descriptor.default) {
+
+      // relationship cannot be resolved immediately
+      references[ descriptor.default ] = {
+        element: businessObject,
+        property: 'default'
+      };
+    }
+
+    references = omit(references, reduce(references, function(array, reference, key) {
+      var element = reference.element,
+          property = reference.property;
+
+      if (key === descriptor.id) {
+        element[ property ] = businessObject;
+
+        array.push(descriptor.id);
+      }
+
+      return array;
+    }, []));
+  }
+
+  eventBus.on('copyPaste.pasteElements', function() {
+    references = {};
+  });
+
+  eventBus.on('copyPaste.pasteElement', function(context) {
+    var cache = context.cache,
+        descriptor = context.descriptor,
+        oldBusinessObject = descriptor.oldBusinessObject,
+        newBusinessObject;
+
+    // do NOT copy business object if external label
+    if (isLabel(descriptor)) {
+      descriptor.businessObject = getBusinessObject(cache[ descriptor.labelTarget ]);
+
+      return;
+    }
+
+    newBusinessObject = odFactory.create(oldBusinessObject.$type);
+
+    descriptor.businessObject = moddleCopy.copyElement(
+      oldBusinessObject,
+      newBusinessObject
+    );
+
+    // resolve references e.g. default sequence flow
+    resolveReferences(descriptor, cache);
+
+    copyProperties(descriptor, newBusinessObject, ['classRef','instance','state']);
+
+    removeProperties(descriptor, 'oldBusinessObject');
+  });
+
+}
+
+
+ODCopyPaste.$inject = [
+  'odFactory',
+  'eventBus',
+  'moddleCopy'
+];
+
+// helpers //////////
+
+function isLabel(element) {
+  return !!element.labelTarget;
+}
diff --git a/app/lib/resourcemodeler/features/copy-paste/index.js b/app/lib/resourcemodeler/features/copy-paste/index.js
new file mode 100644
index 00000000..05d2d13f
--- /dev/null
+++ b/app/lib/resourcemodeler/features/copy-paste/index.js
@@ -0,0 +1,13 @@
+import CopyPasteModule from 'diagram-js/lib/features/copy-paste';
+
+import ODCopyPaste from './ODCopyPaste';
+import ModdleCopy from './ModdleCopy';
+
+export default {
+  __depends__: [
+    CopyPasteModule
+  ],
+  __init__: [ 'odCopyPaste', 'moddleCopy' ],
+  odCopyPaste: [ 'type', ODCopyPaste ],
+  moddleCopy: [ 'type', ModdleCopy ]
+};
diff --git a/app/lib/resourcemodeler/features/di-ordering/ODDiOrdering.js b/app/lib/resourcemodeler/features/di-ordering/ODDiOrdering.js
new file mode 100644
index 00000000..45f11704
--- /dev/null
+++ b/app/lib/resourcemodeler/features/di-ordering/ODDiOrdering.js
@@ -0,0 +1,34 @@
+import {getBusinessObject} from '../../util/ModelUtil';
+
+import {filter, map} from 'min-dash';
+
+import {selfAndAllChildren} from 'diagram-js/lib/util/Elements';
+import {getDi} from "../../draw/REMRendererUtil";
+
+
+var HIGH_PRIORITY = 2000;
+
+export default function ODDiOrdering(eventBus, canvas) {
+
+  eventBus.on('saveXML.start', HIGH_PRIORITY, orderDi);
+
+  function orderDi() {
+    var root = canvas.getRootElement(),
+        rootDi = getBusinessObject(root).di,
+        elements,
+        diElements;
+
+    elements = selfAndAllChildren([ root ], false);
+
+    // only odDi:Shape can be direct children of odDi:Plane
+    elements = filter(elements, function(element) {
+      return element !== root && !element.labelTarget;
+    });
+
+    diElements = map(elements, getDi);
+
+    rootDi.set('planeElement', diElements);
+  }
+}
+
+ODDiOrdering.$inject = [ 'eventBus', 'canvas' ];
diff --git a/app/lib/resourcemodeler/features/di-ordering/index.js b/app/lib/resourcemodeler/features/di-ordering/index.js
new file mode 100644
index 00000000..59e90383
--- /dev/null
+++ b/app/lib/resourcemodeler/features/di-ordering/index.js
@@ -0,0 +1,8 @@
+import ODDiOrdering from './ODDiOrdering';
+
+export default {
+  __init__: [
+    'odDiOrdering'
+  ],
+  odDiOrdering: [ 'type', ODDiOrdering ]
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/grid-snapping/BpmnGridSnapping.js b/app/lib/resourcemodeler/features/grid-snapping/BpmnGridSnapping.js
new file mode 100644
index 00000000..7d6a994c
--- /dev/null
+++ b/app/lib/resourcemodeler/features/grid-snapping/BpmnGridSnapping.js
@@ -0,0 +1,16 @@
+export default function BpmnGridSnapping(eventBus) {
+  eventBus.on([
+    'create.init',
+    'shape.move.init'
+  ], function(event) {
+    var context = event.context;
+
+    if (!context.gridSnappingContext) {
+      context.gridSnappingContext = {};
+    }
+
+    context.gridSnappingContext.snapLocation = 'top-left';
+  });
+}
+
+BpmnGridSnapping.$inject = [ 'eventBus' ];
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/grid-snapping/behavior/AutoPlaceBehavior.js b/app/lib/resourcemodeler/features/grid-snapping/behavior/AutoPlaceBehavior.js
new file mode 100644
index 00000000..51183879
--- /dev/null
+++ b/app/lib/resourcemodeler/features/grid-snapping/behavior/AutoPlaceBehavior.js
@@ -0,0 +1,40 @@
+import {getNewShapePosition} from '../../auto-place/ODAutoPlaceUtil';
+
+import {getMid} from 'diagram-js/lib/layout/LayoutUtil';
+
+var HIGH_PRIORITY = 2000;
+
+export default function AutoPlaceBehavior(eventBus, gridSnapping) {
+  eventBus.on('autoPlace', HIGH_PRIORITY, function(context) {
+    var source = context.source,
+        sourceMid = getMid(source),
+        shape = context.shape;
+
+    var position = getNewShapePosition(source, shape);
+
+    [ 'x', 'y' ].forEach(function(axis) {
+      var options = {};
+
+      // do not snap if x/y equal
+      if (position[ axis ] === sourceMid[ axis ]) {
+        return;
+      }
+
+      if (position[ axis ] > sourceMid[ axis ]) {
+        options.min = position[ axis ];
+      } else {
+        options.max = position[ axis ];
+      }
+
+      position[ axis ] = gridSnapping.snapValue(position[ axis ], options);
+    });
+
+    // must be returned to be considered by auto place
+    return position;
+  });
+}
+
+AutoPlaceBehavior.$inject = [
+  'eventBus',
+  'gridSnapping'
+];
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/grid-snapping/behavior/LayoutConnectionBehavior.js b/app/lib/resourcemodeler/features/grid-snapping/behavior/LayoutConnectionBehavior.js
new file mode 100644
index 00000000..a6bd027e
--- /dev/null
+++ b/app/lib/resourcemodeler/features/grid-snapping/behavior/LayoutConnectionBehavior.js
@@ -0,0 +1,142 @@
+import inherits from 'inherits';
+
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+import {pointsAligned} from 'diagram-js/lib/util/Geometry';
+
+import {assign} from 'min-dash';
+
+var HIGH_PRIORITY = 3000;
+
+
+/**
+ * Snaps connections with Manhattan layout.
+ */
+export default function LayoutConnectionBehavior(eventBus, gridSnapping, modeling) {
+  CommandInterceptor.call(this, eventBus);
+
+  this._gridSnapping = gridSnapping;
+
+  var self = this;
+
+  this.postExecuted([
+    'connection.create',
+    'connection.layout'
+  ], HIGH_PRIORITY, function(event) {
+    var context = event.context,
+        connection = context.connection,
+        hints = context.hints || {},
+        waypoints = connection.waypoints;
+
+    if (hints.connectionStart || hints.connectionEnd || hints.createElementsBehavior === false) {
+      return;
+    }
+
+    if (!hasMiddleSegments(waypoints)) {
+      return;
+    }
+
+    modeling.updateWaypoints(connection, self.snapMiddleSegments(waypoints));
+  });
+}
+
+LayoutConnectionBehavior.$inject = [
+  'eventBus',
+  'gridSnapping',
+  'modeling'
+];
+
+inherits(LayoutConnectionBehavior, CommandInterceptor);
+
+/**
+ * Snap middle segments of a given connection.
+ *
+ * @param {Array<Point>} waypoints
+ *
+ * @returns {Array<Point>}
+ */
+LayoutConnectionBehavior.prototype.snapMiddleSegments = function(waypoints) {
+  var gridSnapping = this._gridSnapping,
+      snapped;
+
+  waypoints = waypoints.slice();
+
+  for (var i = 1; i < waypoints.length - 2; i++) {
+
+    snapped = snapSegment(gridSnapping, waypoints[i], waypoints[i + 1]);
+
+    waypoints[i] = snapped[0];
+    waypoints[i + 1] = snapped[1];
+  }
+
+  return waypoints;
+};
+
+
+// helpers //////////
+
+/**
+ * Check whether a connection has a middle segments.
+ *
+ * @param {Array} waypoints
+ *
+ * @returns {boolean}
+ */
+function hasMiddleSegments(waypoints) {
+  return waypoints.length > 3;
+}
+
+/**
+ * Check whether an alignment is horizontal.
+ *
+ * @param {string} aligned
+ *
+ * @returns {boolean}
+ */
+function horizontallyAligned(aligned) {
+  return aligned === 'h';
+}
+
+/**
+ * Check whether an alignment is vertical.
+ *
+ * @param {string} aligned
+ *
+ * @returns {boolean}
+ */
+function verticallyAligned(aligned) {
+  return aligned === 'v';
+}
+
+/**
+ * Get middle segments from a given connection.
+ *
+ * @param {Array} waypoints
+ *
+ * @returns {Array}
+ */
+function snapSegment(gridSnapping, segmentStart, segmentEnd) {
+
+  var aligned = pointsAligned(segmentStart, segmentEnd);
+
+  var snapped = {};
+
+  if (horizontallyAligned(aligned)) {
+
+    // snap horizontally
+    snapped.y = gridSnapping.snapValue(segmentStart.y);
+  }
+
+  if (verticallyAligned(aligned)) {
+
+    // snap vertically
+    snapped.x = gridSnapping.snapValue(segmentStart.x);
+  }
+
+  if ('x' in snapped || 'y' in snapped) {
+    segmentStart = assign({}, segmentStart, snapped);
+    segmentEnd = assign({}, segmentEnd, snapped);
+  }
+
+  return [ segmentStart, segmentEnd ];
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/grid-snapping/behavior/index.js b/app/lib/resourcemodeler/features/grid-snapping/behavior/index.js
new file mode 100644
index 00000000..6686381d
--- /dev/null
+++ b/app/lib/resourcemodeler/features/grid-snapping/behavior/index.js
@@ -0,0 +1,11 @@
+import AutoPlaceBehavior from './AutoPlaceBehavior';
+import LayoutConnectionBehavior from './LayoutConnectionBehavior';
+
+export default {
+  __init__: [
+    'gridSnappingAutoPlaceBehavior',
+    'gridSnappingLayoutConnectionBehavior',
+  ],
+  gridSnappingAutoPlaceBehavior: [ 'type', AutoPlaceBehavior ],
+  gridSnappingLayoutConnectionBehavior: [ 'type', LayoutConnectionBehavior ]
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/grid-snapping/index.js b/app/lib/resourcemodeler/features/grid-snapping/index.js
new file mode 100644
index 00000000..bdb7460c
--- /dev/null
+++ b/app/lib/resourcemodeler/features/grid-snapping/index.js
@@ -0,0 +1,13 @@
+import BpmnGridSnapping from './BpmnGridSnapping';
+import GridSnappingModule from 'diagram-js/lib/features/grid-snapping';
+
+import GridSnappingBehaviorModule from './behavior';
+
+export default {
+  __depends__: [
+    GridSnappingModule,
+    GridSnappingBehaviorModule
+  ],
+  __init__: [ 'bpmnGridSnapping' ],
+  bpmnGridSnapping: [ 'type', BpmnGridSnapping ]
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/label-editing/LabelEditingPreview.js b/app/lib/resourcemodeler/features/label-editing/LabelEditingPreview.js
new file mode 100644
index 00000000..12013198
--- /dev/null
+++ b/app/lib/resourcemodeler/features/label-editing/LabelEditingPreview.js
@@ -0,0 +1,44 @@
+import {remove as svgRemove} from 'tiny-svg';
+
+var MARKER_HIDDEN = 'djs-element-hidden';
+
+
+export default function LabelEditingPreview(
+    eventBus, canvas) {
+
+
+  var element, gfx;
+
+  eventBus.on('directEditing.activate', function(context) {
+    var activeProvider = context.active;
+
+    element = activeProvider.element.label || activeProvider.element;
+
+
+    if (element.labelTarget) {
+      canvas.addMarker(element, MARKER_HIDDEN);
+    }
+  });
+
+
+  eventBus.on([ 'directEditing.complete', 'directEditing.cancel' ], function(context) {
+    var activeProvider = context.active;
+
+    if (activeProvider) {
+      canvas.removeMarker(activeProvider.element.label || activeProvider.element, MARKER_HIDDEN);
+    }
+
+    element = undefined;
+
+    if (gfx) {
+      svgRemove(gfx);
+
+      gfx = undefined;
+    }
+  });
+}
+
+LabelEditingPreview.$inject = [
+  'eventBus',
+  'canvas'
+];
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/label-editing/LabelEditingProvider.js b/app/lib/resourcemodeler/features/label-editing/LabelEditingProvider.js
new file mode 100644
index 00000000..4a5da7c5
--- /dev/null
+++ b/app/lib/resourcemodeler/features/label-editing/LabelEditingProvider.js
@@ -0,0 +1,315 @@
+import {
+  assign
+} from 'min-dash';
+
+import {
+  getLabel
+} from './LabelUtil';
+
+import { isAny } from '../modeling/util/ModelingUtil';
+
+import {
+  getExternalLabelMid,
+  isLabelExternal,
+  hasExternalLabel,
+  isLabel
+} from '../../util/LabelUtil';
+
+
+export default function LabelEditingProvider(
+    eventBus, odFactory, canvas, directEditing,
+    modeling, resizeHandles, textRenderer) {
+
+  this._odFactory = odFactory;
+  this._canvas = canvas;
+  this._modeling = modeling;
+  this._textRenderer = textRenderer;
+
+  directEditing.registerProvider(this);
+
+  function decideIfTitelOrAttributesClicked(event) {
+    var zoom = canvas.zoom();
+    var titel_attribute_divider_y_coordinate = (event.element.y + 30 - canvas._cachedViewbox.y) * zoom;
+    var click_y_coordinate = event.originalEvent.offsetY;
+    if (click_y_coordinate >= titel_attribute_divider_y_coordinate) {
+      event.element.businessObject.labelAttribute = 'state';
+    } else {
+      event.element.businessObject.labelAttribute = 'name';
+    }
+  }
+
+  // we do not need this reaction on double click anymore - it throws errors and infinite loops
+  // probably because our dropdown handles everything now
+
+  // listen to dblclick on non-root elements
+  // eventBus.on('element.dblclick', function(event) {
+  //   decideIfTitelOrAttributesClicked(event);
+  //   activateDirectEdit(event.element, true);
+  // });
+
+  // complete on followup canvas operation
+  eventBus.on([
+    'autoPlace.start',
+    'canvas.viewbox.changing',
+    'drag.init',
+    'element.mousedown',
+    'popupMenu.open'
+  ], function(event) {
+
+    if (directEditing.isActive()) {
+      directEditing.complete();
+    }
+  });
+
+  // cancel on command stack changes
+  eventBus.on([ 'commandStack.changed' ], function(e) {
+    if (directEditing.isActive()) {
+      directEditing.cancel();
+    }
+  });
+
+
+  eventBus.on('directEditing.activate', function(event) {
+    resizeHandles.removeResizers();
+  });
+
+  eventBus.on('create.end', 500, function(event) {
+
+    var context = event.context,
+        element = context.shape,
+        canExecute = event.context.canExecute,
+        isTouch = event.isTouch;
+
+    // TODO(nikku): we need to find a way to support the
+    // direct editing on mobile devices; right now this will
+    // break for desworkflowediting on mobile devices
+    // as it breaks the user interaction workflow
+
+    // TODO(nre): we should temporarily focus the edited element
+    // here and release the focused viewport after the direct edit
+    // operation is finished
+    if (isTouch) {
+      return;
+    }
+
+    if (!canExecute) {
+      return;
+    }
+
+    if (context.hints && context.hints.createElementsBehavior === false) {
+      return;
+    }
+
+    activateDirectEdit(element, false);
+  });
+
+  eventBus.on('autoPlace.end', 500, function(event) {
+    activateDirectEdit(event.shape, false);
+  });
+
+
+  function activateDirectEdit(element, force) {
+    if (force ||
+      isAny(element, [ 'rem:Resource' ])) {
+      directEditing.activate(element);
+    }
+  }
+
+}
+
+LabelEditingProvider.$inject = [
+  'eventBus',
+  'odFactory',
+  'canvas',
+  'directEditing',
+  'modeling',
+  'resizeHandles',
+  'textRenderer'
+];
+
+
+/**
+ * Activate direct editing for objects and text annotations.
+ *
+ * @param  {djs.model.Base} element
+ *
+ * @return {Object} an object with properties bounds (position and size), text and options
+ */
+LabelEditingProvider.prototype.activate = function(element) {
+
+  // text
+  var text = getLabel(element);
+
+  if (text === undefined) {
+    return;
+  }
+
+  var context = {
+    text: text
+  };
+
+  // bounds
+  var bounds = this.getEditingBBox(element);
+
+  assign(context, bounds);
+
+  var options = {};
+
+  // external labels
+  if (isLabelExternal(element)) {
+    assign(options, {
+      autoResize: true
+    });
+  }
+
+  assign(context, {
+    options: options
+  });
+
+  return context;
+};
+
+
+/**
+ * Get the editing bounding box based on the element's size and position
+ *
+ * @param  {djs.model.Base} element
+ *
+ * @return {Object} an object containing information about position
+ *                  and size (fixed or minimum and/or maximum)
+ */
+LabelEditingProvider.prototype.getEditingBBox = function(element) {
+  var canvas = this._canvas;
+
+  var target = element.label || element;
+
+  var bbox = canvas.getAbsoluteBBox(target);
+
+  var mid = {
+    x: bbox.x + bbox.width / 2,
+    y: bbox.y + bbox.height / 2
+  };
+
+  // default position
+  var bounds = { x: bbox.x, y: bbox.y };
+
+  var zoom = canvas.zoom();
+
+  var defaultStyle = this._textRenderer.getDefaultStyle(),
+      externalStyle = this._textRenderer.getExternalStyle();
+
+  // take zoom into account
+  var externalFontSize = externalStyle.fontSize * zoom,
+      externalLineHeight = externalStyle.lineHeight,
+      defaultFontSize = defaultStyle.fontSize * zoom,
+      defaultLineHeight = defaultStyle.lineHeight;
+
+  var style = {
+    fontFamily: this._textRenderer.getDefaultStyle().fontFamily,
+    fontWeight: this._textRenderer.getDefaultStyle().fontWeight
+  };
+
+
+  if (isAny(element, [ 'rem:Resource' ])) {
+
+    assign(bounds, {
+      width: bbox.width,
+      height: bbox.height
+    });
+
+    assign(style, {
+      fontSize: defaultFontSize + 'px',
+      lineHeight: defaultLineHeight,
+      paddingTop: (7 * zoom) + 'px',
+      paddingBottom: (7 * zoom) + 'px',
+      paddingLeft: (5 * zoom) + 'px',
+      paddingRight: (5 * zoom) + 'px'
+    });
+
+    if (isAny(element, [ 'rem:Resource' ])) {
+
+      // Editing attributes should be different.
+      if (element.businessObject.labelAttribute === 'state') {
+        assign(bounds, {
+          y: bbox.y + (30 * zoom),
+          height: bbox.height - (30 * zoom)
+        });
+      } else {
+        assign(bounds, {
+          height: (30 * zoom)
+        });
+      }
+    }
+  }
+
+  var width = 90 * zoom,
+      paddingTop = 7 * zoom,
+      paddingBottom = 4 * zoom;
+
+  // external labels for events, data elements, gateways, groups and connections
+  if (target.labelTarget) {
+    assign(bounds, {
+      width: width,
+      height: bbox.height + paddingTop + paddingBottom,
+      x: mid.x - width / 2,
+      y: bbox.y - paddingTop
+    });
+
+    assign(style, {
+      fontSize: externalFontSize + 'px',
+      lineHeight: externalLineHeight,
+      paddingTop: paddingTop + 'px',
+      paddingBottom: paddingBottom + 'px'
+    });
+  }
+
+  // external label not yet created
+  if (isLabelExternal(target)
+    && !hasExternalLabel(target)
+    && !isLabel(target)) {
+
+    var externalLabelMid = getExternalLabelMid(element);
+
+    var absoluteBBox = canvas.getAbsoluteBBox({
+      x: externalLabelMid.x,
+      y: externalLabelMid.y,
+      width: 0,
+      height: 0
+    });
+
+    var height = externalFontSize + paddingTop + paddingBottom;
+
+    assign(bounds, {
+      width: width,
+      height: height,
+      x: absoluteBBox.x - width / 2,
+      y: absoluteBBox.y - height / 2
+    });
+
+    assign(style, {
+      fontSize: externalFontSize + 'px',
+      lineHeight: externalLineHeight,
+      paddingTop: paddingTop + 'px',
+      paddingBottom: paddingBottom + 'px'
+    });
+  }
+
+  return { bounds: bounds, style: style };
+};
+
+
+LabelEditingProvider.prototype.update = function(element, newLabel) {
+
+  if (isEmptyText(newLabel)) {
+    newLabel = null;
+  }
+
+  this._modeling.updateLabel(element, newLabel);
+};
+
+
+// helpers //////////////////////
+
+function isEmptyText(label) {
+  return !label || !label.trim();
+}
diff --git a/app/lib/resourcemodeler/features/label-editing/LabelUtil.js b/app/lib/resourcemodeler/features/label-editing/LabelUtil.js
new file mode 100644
index 00000000..3f95db09
--- /dev/null
+++ b/app/lib/resourcemodeler/features/label-editing/LabelUtil.js
@@ -0,0 +1,31 @@
+import {isAny} from '../modeling/util/ModelingUtil';
+
+function getLabelAttr(semantic) {
+  if (semantic.labelAttribute) {
+    return semantic.labelAttribute;
+  }
+  if (isAny(semantic, [ 'rem:Link', 'rem:Resource' ])) {
+    return 'name';
+  }
+}
+
+export function getLabel(element) {
+  var semantic = element.businessObject;
+  var attr = getLabelAttr(semantic);
+
+  if (attr) {
+    return semantic[attr] || '';
+  }
+}
+
+
+export function setLabel(element, text) {
+  var semantic = element.businessObject,
+      attr = getLabelAttr(semantic);
+
+  if (attr) {
+    semantic[attr] = text;
+  }
+
+  return element;
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/label-editing/cmd/UpdateLabelHandler.js b/app/lib/resourcemodeler/features/label-editing/cmd/UpdateLabelHandler.js
new file mode 100644
index 00000000..592cf798
--- /dev/null
+++ b/app/lib/resourcemodeler/features/label-editing/cmd/UpdateLabelHandler.js
@@ -0,0 +1,125 @@
+import {getLabel, setLabel} from '../LabelUtil';
+
+import {getExternalLabelMid, hasExternalLabel, isLabel, isLabelExternal} from '../../../util/LabelUtil';
+
+var NULL_DIMENSIONS = {
+  width: 0,
+  height: 0
+};
+
+
+/**
+ * A handler that updates the text of a postit element.
+ */
+export default function UpdateLabelHandler(modeling, textRenderer) {
+
+  /**
+   * Set the label and return the changed elements.
+   *
+   * Element parameter can be label itself or connection (i.e. sequence flow).
+   *
+   * @param {djs.model.Base} element
+   * @param {String} text
+   */
+  function setText(element, text) {
+
+    // external label if present
+    var label = element.label || element;
+
+    var labelTarget = element.labelTarget || element;
+
+    setLabel(label, text, labelTarget !== label);
+
+    return [ label, labelTarget ];
+  }
+
+  function preExecute(ctx) {
+    var element = ctx.element,
+        businessObject = element.businessObject,
+        newLabel = ctx.newLabel;
+
+    if (!isLabel(element)
+        && isLabelExternal(element)
+        && !hasExternalLabel(element)
+        && !isEmptyText(newLabel)) {
+
+      // create label
+      var paddingTop = 7;
+
+      var labelCenter = getExternalLabelMid(element);
+
+      labelCenter = {
+        x: labelCenter.x,
+        y: labelCenter.y + paddingTop
+      };
+
+      modeling.createLabel(element, labelCenter, {
+        id: businessObject.id + '_label',
+        businessObject: businessObject
+      });
+    }
+  }
+
+  function execute(ctx) {
+    ctx.oldLabel = getLabel(ctx.element);
+    return setText(ctx.element, ctx.newLabel);
+  }
+
+  function revert(ctx) {
+    return setText(ctx.element, ctx.oldLabel);
+  }
+
+  function postExecute(ctx) {
+    var element = ctx.element,
+        label = element.label || element,
+        newLabel = ctx.newLabel,
+        newBounds = ctx.newBounds,
+        hints = ctx.hints || {};
+
+    // ignore internal labels for elements
+    if (!isLabel(label)) {
+      return;
+    }
+
+    if (isLabel(label) && isEmptyText(newLabel)) {
+
+      if (hints.removeShape !== false) {
+        modeling.removeShape(label, { unsetLabel: false });
+      }
+
+      return;
+    }
+
+    var text = getLabel(label);
+
+    // resize element based on label _or_ pre-defined bounds
+    if (typeof newBounds === 'undefined') {
+      newBounds = textRenderer.getExternalLabelBounds(label, text);
+    }
+
+    // setting newBounds to false or _null_ will
+    // disable the postExecute resize operation
+    if (newBounds) {
+      modeling.resizeShape(label, newBounds, NULL_DIMENSIONS);
+    }
+  }
+
+  // API
+
+  this.preExecute = preExecute;
+  this.execute = execute;
+  this.revert = revert;
+  this.postExecute = postExecute;
+}
+
+UpdateLabelHandler.$inject = [
+  'modeling',
+  'textRenderer'
+];
+
+
+// helpers ///////////////////////
+
+function isEmptyText(label) {
+  return !label || !label.trim();
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/label-editing/index.js b/app/lib/resourcemodeler/features/label-editing/index.js
new file mode 100644
index 00000000..e22cf296
--- /dev/null
+++ b/app/lib/resourcemodeler/features/label-editing/index.js
@@ -0,0 +1,21 @@
+import ChangeSupportModule from 'diagram-js/lib/features/change-support';
+import ResizeModule from 'diagram-js/lib/features/resize';
+import DirectEditingModule from 'diagram-js-direct-editing';
+
+import LabelEditingProvider from './LabelEditingProvider';
+import LabelEditingPreview from './LabelEditingPreview';
+
+
+export default {
+  __depends__: [
+    ChangeSupportModule,
+    ResizeModule,
+    DirectEditingModule
+  ],
+  __init__: [
+    'labelEditingProvider',
+    'labelEditingPreview'
+  ],
+  labelEditingProvider: [ 'type', LabelEditingProvider ],
+  labelEditingPreview: [ 'type', LabelEditingPreview ]
+};
diff --git a/app/lib/resourcemodeler/features/modeling/ElementFactory.js b/app/lib/resourcemodeler/features/modeling/ElementFactory.js
new file mode 100644
index 00000000..5101a08b
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/ElementFactory.js
@@ -0,0 +1,155 @@
+import {assign, forEach} from 'min-dash';
+
+import inherits from 'inherits';
+
+import {is} from '../../util/ModelUtil';
+
+import BaseElementFactory from 'diagram-js/lib/core/ElementFactory';
+
+import {DEFAULT_LABEL_SIZE} from '../../util/LabelUtil';
+
+
+/**
+ * A od-aware factory for diagram-js shapes
+ */
+export default function ElementFactory(odFactory, moddle, translate) {
+  BaseElementFactory.call(this);
+
+  this._odFactory = odFactory;
+  this._moddle = moddle;
+  this._translate = translate;
+}
+
+inherits(ElementFactory, BaseElementFactory);
+
+ElementFactory.$inject = [
+  'odFactory',
+  'moddle',
+  'translate'
+];
+
+ElementFactory.prototype.baseCreate = BaseElementFactory.prototype.create;
+
+ElementFactory.prototype.create = function(elementType, attrs) {
+
+  // no special magic for labels,
+  // we assume their businessObjects have already been created
+  // and wired via attrs
+  if (elementType === 'label') {
+    return this.baseCreate(elementType, assign({ type: 'label' }, DEFAULT_LABEL_SIZE, attrs));
+  }
+
+  return this.createOdElement(elementType, attrs);
+};
+
+ElementFactory.prototype.createBusinessObject = function (type, attrs) {
+  const element = this._moddle.create(type, attrs || {});
+  this._odFactory._ensureId(element);
+  return element;
+};
+
+ElementFactory.prototype.createRootBoard = function (name, objective) {
+  var rootBoard = this.createBusinessObject('odDi:OdRootBoard', {name: name, objectiveRef: objective});
+  var board = this.createBusinessObject('rem:OdBoard');
+  rootBoard.plane = this.createBusinessObject('odDi:OdPlane', {boardElement: board});
+  return [rootBoard,board];
+};
+
+
+ElementFactory.prototype.createOdElement = function(elementType, attrs) {
+  var size,
+      translate = this._translate;
+
+  attrs = attrs || {};
+
+  var businessObject = attrs.businessObject;
+
+  if (!businessObject) {
+    if (!attrs.type) {
+      throw new Error(translate('no shape type specified'));
+    }
+
+    businessObject = this._odFactory.create(attrs.type, attrs);
+  }
+
+  if (!businessObject.di) {
+    if (elementType === 'root') {
+      businessObject.di = this._odFactory.createDiPlane(businessObject, [], {
+        id: businessObject.id + '_di'
+      });
+    } else if (elementType === 'connection') {
+      businessObject.di = this._odFactory.createDiEdge(businessObject, [], {
+        id: businessObject.id + '_di'
+      });
+    } else {
+      businessObject.di = this._odFactory.createDiShape(businessObject, {}, {
+        id: businessObject.id + '_di'
+      });
+    }
+  }
+
+  if (attrs.di) {
+    assign(businessObject.di, attrs.di);
+
+    delete attrs.di;
+  }
+
+  applyAttributes(businessObject, attrs, [
+    'processRef',
+    'isInterrupting',
+    'associationDirection',
+    'isForCompensation'
+  ]);
+
+  size = this._getDefaultSize(businessObject);
+
+  attrs = assign({
+    businessObject: businessObject,
+    id: businessObject.id
+  }, size, attrs);
+
+  return this.baseCreate(elementType, attrs);
+};
+
+
+ElementFactory.prototype._getDefaultSize = function(semantic) {
+  if (is(semantic, 'rem:Resource')) {
+    return { width: 150, height: 90 };
+  }
+  return { width: 100, height: 80 };
+};
+
+
+
+// helpers //////////////////////
+
+/**
+ * Apply attributes from a map to the given element,
+ * remove attribute from the map on application.
+ *
+ * @param {Base} element
+ * @param {Object} attrs (in/out map of attributes)
+ * @param {Array<String>} attributeNames name of attributes to apply
+ */
+function applyAttributes(element, attrs, attributeNames) {
+
+  forEach(attributeNames, function(property) {
+    if (attrs[property] !== undefined) {
+      applyAttribute(element, attrs, property);
+    }
+  });
+}
+
+/**
+ * Apply named property to element and drain it from the attrs
+ * collection.
+ *
+ * @param {Base} element
+ * @param {Object} attrs (in/out map of attributes)
+ * @param {String} attributeName to apply
+ */
+function applyAttribute(element, attrs, attributeName) {
+  element[attributeName] = attrs[attributeName];
+
+  delete attrs[attributeName];
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/Modeling.js b/app/lib/resourcemodeler/features/modeling/Modeling.js
new file mode 100644
index 00000000..3bf925ac
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/Modeling.js
@@ -0,0 +1,97 @@
+import inherits from 'inherits';
+
+import BaseModeling from 'diagram-js/lib/features/modeling/Modeling';
+
+import UpdatePropertiesHandler from './cmd/UpdatePropertiesHandler';
+import UpdateCanvasRootHandler from './cmd/UpdateCanvasRootHandler';
+import IdClaimHandler from './cmd/IdClaimHandler';
+
+import UpdateLabelHandler from '../label-editing/cmd/UpdateLabelHandler';
+
+
+/**
+ * Postit modeling features activator
+ *
+ * @param {EventBus} eventBus
+ * @param {ElementFactory} elementFactory
+ * @param {CommandStack} commandStack
+ * @param {ODRules} odRules
+ */
+export default function Modeling(
+    eventBus, elementFactory, commandStack,
+    odRules) {
+
+  BaseModeling.call(this, eventBus, elementFactory, commandStack);
+
+  this._odRules = odRules;
+}
+
+inherits(Modeling, BaseModeling);
+
+Modeling.$inject = [
+  'eventBus',
+  'elementFactory',
+  'commandStack',
+  'odRules'
+];
+
+
+Modeling.prototype.getHandlers = function() {
+  var handlers = BaseModeling.prototype.getHandlers.call(this);
+
+  handlers['element.updateProperties'] = UpdatePropertiesHandler;
+  handlers['canvas.updateRoot'] = UpdateCanvasRootHandler;
+  handlers['id.updateClaim'] = IdClaimHandler;
+  handlers['element.updateLabel'] = UpdateLabelHandler;
+
+  return handlers;
+};
+
+
+Modeling.prototype.updateLabel = function(element, newLabel, newBounds, hints) {
+  this._commandStack.execute('element.updateLabel', {
+    element: element,
+    newLabel: newLabel,
+    newBounds: newBounds,
+    hints: hints || {}
+  });
+};
+
+
+Modeling.prototype.updateProperties = function(element, properties) {
+  this._commandStack.execute('element.updateProperties', {
+    element: element,
+    properties: properties
+  });
+};
+
+Modeling.prototype.claimId = function(id, moddleElement) {
+  this._commandStack.execute('id.updateClaim', {
+    id: id,
+    element: moddleElement,
+    claiming: true
+  });
+};
+
+
+Modeling.prototype.unclaimId = function(id, moddleElement) {
+  this._commandStack.execute('id.updateClaim', {
+    id: id,
+    element: moddleElement
+  });
+};
+
+Modeling.prototype.connect = function(source, target, attrs, hints) {
+
+  var odRules = this._odRules;
+
+  if (!attrs) {
+    attrs = odRules.canConnect(source, target);
+  }
+
+  if (!attrs) {
+    return;
+  }
+
+  return this.createConnection(source, target, attrs, source.parent, hints);
+};
diff --git a/app/lib/resourcemodeler/features/modeling/ODFactory.js b/app/lib/resourcemodeler/features/modeling/ODFactory.js
new file mode 100644
index 00000000..e05d6f8a
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/ODFactory.js
@@ -0,0 +1,96 @@
+import {assign, map, pick,} from 'min-dash';
+
+import {isAny} from './util/ModelingUtil';
+
+import {is} from '../../util/ModelUtil';
+
+
+export default function ODFactory(moddle) {
+  this._model = moddle;
+}
+
+ODFactory.$inject = [ 'moddle' ];
+
+
+ODFactory.prototype._needsId = function(element) {
+  return isAny(element, [
+    'rem:BoardElement', 'odDi:OdRootBoard', 'odDi:OdPlane'
+  ]);
+};
+
+ODFactory.prototype._ensureId = function(element) {
+
+  // generate semantic ids for elements
+  // rem:Object -> Object_ID
+  var prefix;
+
+  if (is(element, 'rem:Resource')) {
+    prefix = 'Object';
+  } else {
+    prefix = (element.$type || '').replace(/^[^:]*:/g, '');
+  }
+
+  prefix += '_';
+
+  if (!element.id && this._needsId(element)) {
+    element.id = this._model.ids.nextPrefixed(prefix, element);
+  }
+};
+
+
+ODFactory.prototype.create = function(type, attrs) {
+  var element = this._model.create(type, attrs || {});
+  if (type === 'rem:Resource') {
+    element.state = null;
+  }
+
+  this._ensureId(element);
+
+  return element;
+};
+
+
+ODFactory.prototype.createDiLabel = function() {
+  return this.create('odDi:OdLabel', {
+    bounds: this.createDiBounds()
+  });
+};
+
+
+ODFactory.prototype.createDiShape = function(semantic, bounds, attrs) {
+
+  return this.create('odDi:OdShape', assign({
+    boardElement: semantic,
+    bounds: this.createDiBounds(bounds)
+  }, attrs));
+};
+
+
+ODFactory.prototype.createDiBounds = function(bounds) {
+  return this.create('dc:Bounds', bounds);
+};
+
+ODFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
+  return this.create('odDi:Link', assign({
+    boardElement: semantic
+  }, attrs));
+};
+
+
+ODFactory.prototype.createDiPlane = function(semantic) {
+  return this.create('odDi:OdPlane', {
+    boardElement: semantic
+  });
+};
+
+ODFactory.prototype.createDiWaypoints = function(waypoints) {
+  var self = this;
+
+  return map(waypoints, function(pos) {
+    return self.createDiWaypoint(pos);
+  });
+};
+
+ODFactory.prototype.createDiWaypoint = function(point) {
+  return this.create('dc:Point', pick(point, [ 'x', 'y' ]));
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/ODLayouter.js b/app/lib/resourcemodeler/features/modeling/ODLayouter.js
new file mode 100644
index 00000000..6a2fd7b4
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/ODLayouter.js
@@ -0,0 +1,91 @@
+import inherits from 'inherits';
+
+import {assign} from 'min-dash';
+
+import BaseLayouter from 'diagram-js/lib/layout/BaseLayouter';
+
+import {repairConnection, withoutRedundantPoints} from 'diagram-js/lib/layout/ManhattanLayout';
+
+import {getMid, getOrientation} from 'diagram-js/lib/layout/LayoutUtil';
+
+import {is} from '../../util/ModelUtil';
+
+export default function ODLayouter() {}
+
+inherits(ODLayouter, BaseLayouter);
+
+
+ODLayouter.prototype.layoutConnection = function(connection, hints) {
+  if (!hints) {
+    hints = {};
+  }
+
+  var source = hints.source || connection.source,
+      target = hints.target || connection.target,
+      waypoints = hints.waypoints || connection.waypoints,
+      connectionStart = hints.connectionStart,
+      connectionEnd = hints.connectionEnd;
+
+  var manhattanOptions,
+      updatedWaypoints;
+
+  if (!connectionStart) {
+    connectionStart = getConnectionDocking(waypoints && waypoints[ 0 ], source);
+  }
+
+  if (!connectionEnd) {
+    connectionEnd = getConnectionDocking(waypoints && waypoints[ waypoints.length - 1 ], target);
+  }
+
+  if (is(connection, 'rem:Link')) {
+
+    // layout all connection between flow elements h:h, except for
+    if (source === target) {
+      manhattanOptions = {
+        preferredLayouts: getLoopPreferredLayout(source, connection)
+      };
+    } else {
+      manhattanOptions = {
+        preferredLayouts: [ 'h:h' ]
+      };
+    }
+  }
+
+  if (manhattanOptions) {
+    manhattanOptions = assign(manhattanOptions, hints);
+
+    updatedWaypoints = withoutRedundantPoints(repairConnection(
+      source,
+      target,
+      connectionStart,
+      connectionEnd,
+      waypoints,
+      manhattanOptions
+    ));
+  }
+
+  return updatedWaypoints || [ connectionStart, connectionEnd ];
+};
+
+
+// helpers //////////
+
+function getConnectionDocking(point, shape) {
+  return point ? (point.original || point) : getMid(shape);
+}
+
+function getLoopPreferredLayout(source, connection) {
+  var waypoints = connection.waypoints;
+
+  var orientation = waypoints && waypoints.length && getOrientation(waypoints[0], source);
+
+  if (orientation === 'top') {
+    return [ 't:r' ];
+  } else if (orientation === 'right') {
+    return [ 'r:b' ];
+  } else if (orientation === 'left') {
+    return [ 'l:t' ];
+  }
+
+  return [ 'b:l' ];
+}
diff --git a/app/lib/resourcemodeler/features/modeling/ODUpdater.js b/app/lib/resourcemodeler/features/modeling/ODUpdater.js
new file mode 100644
index 00000000..4dbb01ea
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/ODUpdater.js
@@ -0,0 +1,428 @@
+import {assign, forEach} from 'min-dash';
+
+import inherits from 'inherits';
+
+import {remove as collectionRemove} from 'diagram-js/lib/util/Collections';
+
+import {Label} from 'diagram-js/lib/model';
+
+import {getBusinessObject, is} from '../../util/ModelUtil';
+
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+/**
+ * A handler responsible for updating the underlying OD XML + DI
+ * once changes on the diagram happen
+ */
+export default function ODUpdater(
+    eventBus, odFactory, connectionDocking,
+    translate) {
+
+  CommandInterceptor.call(this, eventBus);
+
+  this._odFactory = odFactory;
+  this._translate = translate;
+
+  var self = this;
+
+  // connection cropping //////////////////////
+
+  // crop connection ends during create/update
+  function cropConnection(e) {
+    var context = e.context,
+        hints = context.hints || {},
+        connection;
+
+    if (!context.cropped && hints.createElementsBehavior !== false) {
+      connection = context.connection;
+      connection.waypoints = connectionDocking.getCroppedWaypoints(connection);
+      context.cropped = true;
+    }
+  }
+
+  this.executed([
+    'connection.layout',
+    'connection.create'
+  ], cropConnection);
+
+  this.reverted([ 'connection.layout' ], function(e) {
+    delete e.context.cropped;
+  });
+
+
+  // OD + DI update //////////////////////
+
+
+  // update parent
+  function updateParent(e) {
+    var context = e.context;
+
+    self.updateParent(context.shape || context.connection, context.oldParent);
+  }
+
+  function reverseUpdateParent(e) {
+    var context = e.context;
+
+    var element = context.shape || context.connection,
+
+        // oldParent is the (old) new parent, because we are undoing
+        oldParent = context.parent || context.newParent;
+
+    self.updateParent(element, oldParent);
+  }
+
+  this.executed([
+    'shape.move',
+    'shape.create',
+    'shape.delete',
+    'connection.create',
+    'connection.move',
+    'connection.delete'
+  ], ifOd(updateParent));
+
+  this.reverted([
+    'shape.move',
+    'shape.create',
+    'shape.delete',
+    'connection.create',
+    'connection.move',
+    'connection.delete'
+  ], ifOd(reverseUpdateParent));
+
+  /*
+     * ## Updating Parent
+     *
+     * When morphing a root element
+     * make sure that both the *semantic* and *di* parent of each element
+     * is updated.
+     *
+     */
+  function updateRoot(event) {
+    var context = event.context,
+        oldRoot = context.oldRoot,
+        children = oldRoot.children;
+
+    forEach(children, function(child) {
+      if (is(child, 'rem:BoardElement')) {
+        self.updateParent(child);
+      }
+    });
+  }
+
+  this.executed([ 'canvas.updateRoot' ], updateRoot);
+  this.reverted([ 'canvas.updateRoot' ], updateRoot);
+
+
+  // update bounds
+  function updateBounds(e) {
+    var shape = e.context.shape;
+
+    if (!is(shape, 'rem:BoardElement')) {
+      return;
+    }
+
+    self.updateBounds(shape);
+  }
+
+  this.executed([
+    'shape.move',
+    'shape.create',
+    'shape.resize'
+  ], ifOd(function(event) {
+
+    // exclude labels because they're handled separately during shape.changed
+    if (event.context.shape.type === 'label') {
+      return;
+    }
+
+    updateBounds(event);
+  }));
+
+  this.reverted([
+    'shape.move',
+    'shape.create',
+    'shape.resize'
+  ], ifOd(function(event) {
+
+    // exclude labels because they're handled separately during shape.changed
+    if (event.context.shape.type === 'label') {
+      return;
+    }
+
+    updateBounds(event);
+  }));
+
+  // Handle labels separately. This is necessary, because the label bounds have to be updated
+  // every time its shape changes, not only on move, create and resize.
+  eventBus.on('shape.changed', function(event) {
+    if (event.element.type === 'label') {
+      updateBounds({ context: { shape: event.element } });
+    }
+  });
+
+  // attach / detach connection
+  function updateConnection(e) {
+    self.updateConnection(e.context);
+  }
+
+  this.executed([
+    'connection.create',
+    'connection.move',
+    'connection.delete',
+    'connection.reconnect'
+  ], ifOd(updateConnection));
+
+  this.reverted([
+    'connection.create',
+    'connection.move',
+    'connection.delete',
+    'connection.reconnect'
+  ], ifOd(updateConnection));
+
+
+  // update waypoints
+  function updateConnectionWaypoints(e) {
+    self.updateConnectionWaypoints(e.context.connection);
+  }
+
+  this.executed([
+    'connection.layout',
+    'connection.move',
+    'connection.updateWaypoints',
+  ], ifOd(updateConnectionWaypoints));
+
+  this.reverted([
+    'connection.layout',
+    'connection.move',
+    'connection.updateWaypoints',
+  ], ifOd(updateConnectionWaypoints));
+
+  // update attachments
+  function updateAttachment(e) {
+    self.updateAttachment(e.context);
+  }
+
+  this.executed([ 'element.updateAttachment' ], ifOd(updateAttachment));
+  this.reverted([ 'element.updateAttachment' ], ifOd(updateAttachment));
+
+}
+
+
+inherits(ODUpdater, CommandInterceptor);
+
+ODUpdater.$inject = [
+  'eventBus',
+  'odFactory',
+  'connectionDocking',
+  'translate'
+];
+
+
+// implementation //////////////////////
+
+ODUpdater.prototype.updateAttachment = function(context) {
+
+  var shape = context.shape,
+      businessObject = shape.businessObject,
+      host = shape.host;
+
+  businessObject.attachedToRef = host && host.businessObject;
+};
+
+ODUpdater.prototype.updateParent = function(element, oldParent) {
+
+  // do not update label parent
+  if (element instanceof Label) {
+    return;
+  }
+
+  var parentShape = element.parent;
+
+  var businessObject = element.businessObject,
+      parentBusinessObject = parentShape && parentShape.businessObject,
+      parentDi = parentBusinessObject && parentBusinessObject.di;
+
+  this.updateSemanticParent(businessObject, parentBusinessObject);
+
+  this.updateDiParent(businessObject.di, parentDi);
+};
+
+
+ODUpdater.prototype.updateBounds = function(shape) {
+
+  var di = shape.businessObject.di;
+
+  var target = (shape instanceof Label) ? this._getLabel(di) : di;
+
+  var bounds = target.bounds;
+
+  if (!bounds) {
+    bounds = this._odFactory.createDiBounds();
+    target.set('bounds', bounds);
+  }
+
+  assign(bounds, {
+    x: shape.x,
+    y: shape.y,
+    width: shape.width,
+    height: shape.height
+  });
+};
+
+
+ODUpdater.prototype.updateDiParent = function(di, parentDi) {
+
+  if (parentDi && !is(parentDi, 'odDi:OdPlane')) {
+    parentDi = parentDi.$parent;
+  }
+
+  if (di.$parent === parentDi) {
+    return;
+  }
+
+  var planeElements = (parentDi || di.$parent).get('planeElement');
+
+  if (parentDi) {
+    planeElements.push(di);
+    di.$parent = parentDi;
+  } else {
+    collectionRemove(planeElements, di);
+    di.$parent = null;
+  }
+};
+
+
+ODUpdater.prototype.updateSemanticParent = function(businessObject, newParent, visualParent) {
+
+  var containment,
+      translate = this._translate;
+
+  if (businessObject.$parent === newParent) {
+    return;
+  }
+
+
+  if (is(businessObject, 'rem:BoardElement')) {
+    containment = 'boardElements';
+  }
+
+  if (!containment) {
+    throw new Error(translate(
+      'no parent for {element} in {parent}',
+      {
+        element: businessObject.id,
+        parent: newParent.id
+      }
+    ));
+  }
+
+  var children;
+
+  if (businessObject.$parent) {
+
+    // remove from old parent
+    children = businessObject.$parent.get(containment);
+    collectionRemove(children, businessObject);
+  }
+
+  if (!newParent) {
+    businessObject.$parent = null;
+  } else {
+
+    // add to new parent
+    children = newParent.get(containment);
+    children.push(businessObject);
+    businessObject.$parent = newParent;
+  }
+
+  if (visualParent) {
+    var diChildren = visualParent.get(containment);
+
+    collectionRemove(children, businessObject);
+
+    if (newParent) {
+
+      if (!diChildren) {
+        diChildren = [];
+        newParent.set(containment, diChildren);
+      }
+
+      diChildren.push(businessObject);
+    }
+  }
+};
+
+ODUpdater.prototype.updateConnection = function(context) {
+
+  var connection = context.connection,
+      businessObject = getBusinessObject(connection),
+      newSource = getBusinessObject(connection.source),
+      newTarget = getBusinessObject(connection.target);
+
+  var inverseSet = is(businessObject, 'rem:Link');
+
+  if (businessObject.sourceRef !== newSource) {
+    if (inverseSet) {
+      collectionRemove(businessObject.sourceRef && businessObject.sourceRef.get('links'), businessObject);
+
+      if (newSource && newSource.get('links')) {
+        newSource.get('links').push(businessObject);
+      }
+    }
+
+    businessObject.sourceRef = newSource;
+  }
+  if (businessObject.targetRef !== newTarget) {
+    businessObject.targetRef = newTarget;
+  }
+
+  this.updateConnectionWaypoints(connection);
+  this.updateDiConnection(businessObject.di, newSource, newTarget);
+};
+ODUpdater.prototype.updateConnectionWaypoints = function(connection) {
+  connection.businessObject.di.set('waypoint', this._odFactory.createDiWaypoints(connection.waypoints));
+};
+
+// update existing sourceElement and targetElement di information
+ODUpdater.prototype.updateDiConnection = function(di, newSource, newTarget) {
+
+  if (di.sourceElement && di.sourceElement.boardElement !== newSource) {
+    di.sourceElement = newSource && newSource.di;
+  }
+
+  if (di.targetElement && di.targetElement.boardElement !== newTarget) {
+    di.targetElement = newTarget && newTarget.di;
+  }
+
+};
+
+// helpers //////////////////////
+
+ODUpdater.prototype._getLabel = function(di) {
+  if (!di.label) {
+    di.label = this._odFactory.createDiLabel();
+  }
+
+  return di.label;
+};
+
+
+/**
+ * Make sure the event listener is only called
+ * if the touched element is a od element.
+ *
+ * @param  {Function} fn
+ * @return {Function} guarded function
+ */
+function ifOd(fn) {
+
+  return function(event) {
+
+    var context = event.context,
+        element = context.shape || context.connection;
+
+    if (is(element, 'rem:BoardElement')) {
+      fn(event);
+    }
+  };
+}
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/AdaptiveLabelPositioningBehavior.js b/app/lib/resourcemodeler/features/modeling/behavior/AdaptiveLabelPositioningBehavior.js
new file mode 100644
index 00000000..2db65391
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/AdaptiveLabelPositioningBehavior.js
@@ -0,0 +1,266 @@
+import inherits from 'inherits';
+
+import {asTRBL, getMid, getOrientation} from 'diagram-js/lib/layout/LayoutUtil';
+
+import {substract} from 'diagram-js/lib/util/Math';
+
+import {hasExternalLabel} from '../../../util/LabelUtil';
+
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+var ALIGNMENTS = [
+  'top',
+  'bottom',
+  'left',
+  'right'
+];
+
+var ELEMENT_LABEL_DISTANCE = 10;
+
+/**
+ * A component that makes sure that external labels are added
+ * together with respective elements and properly updated (DI wise)
+ * during move.
+ *
+ * @param {EventBus} eventBus
+ * @param {Modeling} modeling
+ */
+export default function AdaptiveLabelPositioningBehavior(eventBus, modeling) {
+
+  CommandInterceptor.call(this, eventBus);
+
+  this.postExecuted([
+    'connection.create',
+    'connection.layout',
+    'connection.updateWaypoints'
+  ], function(event) {
+    var context = event.context,
+        connection = context.connection,
+        source = connection.source,
+        target = connection.target,
+        hints = context.hints || {};
+
+    if (hints.createElementsBehavior !== false) {
+      checkLabelAdjustment(source);
+      checkLabelAdjustment(target);
+    }
+  });
+
+
+  this.postExecuted([
+    'label.create'
+  ], function(event) {
+    var context = event.context,
+        shape = context.shape,
+        hints = context.hints || {};
+
+    if (hints.createElementsBehavior !== false) {
+      checkLabelAdjustment(shape.labelTarget);
+    }
+  });
+
+
+  this.postExecuted([
+    'elements.create'
+  ], function(event) {
+    var context = event.context,
+        elements = context.elements,
+        hints = context.hints || {};
+
+    if (hints.createElementsBehavior !== false) {
+      elements.forEach(function(element) {
+        checkLabelAdjustment(element);
+      });
+    }
+  });
+
+  function checkLabelAdjustment(element) {
+
+    // skip non-existing labels
+    if (!hasExternalLabel(element)) {
+      return;
+    }
+
+    var optimalPosition = getOptimalPosition(element);
+
+    // no optimal position found
+    if (!optimalPosition) {
+      return;
+    }
+
+    adjustLabelPosition(element, optimalPosition);
+  }
+
+  function adjustLabelPosition(element, orientation) {
+
+    var elementMid = getMid(element),
+        label = element.label,
+        labelMid = getMid(label);
+
+    // ignore labels that are being created
+    if (!label.parent) {
+      return;
+    }
+
+    var elementTrbl = asTRBL(element);
+
+    var newLabelMid;
+
+    switch (orientation) {
+    case 'top':
+      newLabelMid = {
+        x: elementMid.x,
+        y: elementTrbl.top - ELEMENT_LABEL_DISTANCE - label.height / 2
+      };
+
+      break;
+
+    case 'left':
+
+      newLabelMid = {
+        x: elementTrbl.left - ELEMENT_LABEL_DISTANCE - label.width / 2,
+        y: elementMid.y
+      };
+
+      break;
+
+    case 'bottom':
+
+      newLabelMid = {
+        x: elementMid.x,
+        y: elementTrbl.bottom + ELEMENT_LABEL_DISTANCE + label.height / 2
+      };
+
+      break;
+
+    case 'right':
+
+      newLabelMid = {
+        x: elementTrbl.right + ELEMENT_LABEL_DISTANCE + label.width / 2,
+        y: elementMid.y
+      };
+
+      break;
+    }
+
+    var delta = substract(newLabelMid, labelMid);
+
+    modeling.moveShape(label, delta);
+  }
+
+}
+
+inherits(AdaptiveLabelPositioningBehavior, CommandInterceptor);
+
+AdaptiveLabelPositioningBehavior.$inject = [
+  'eventBus',
+  'modeling'
+];
+
+
+// helpers //////////////////////
+
+/**
+ * Return alignments which are taken by a boundary's host element
+ *
+ * @param {Shape} element
+ *
+ * @return {Array<String>}
+ */
+function getTakenHostAlignments(element) {
+
+  var hostElement = element.host,
+      elementMid = getMid(element),
+      hostOrientation = getOrientation(elementMid, hostElement);
+
+  var freeAlignments;
+
+  // check whether there is a multi-orientation, e.g. 'top-left'
+  if (hostOrientation.indexOf('-') >= 0) {
+    freeAlignments = hostOrientation.split('-');
+  } else {
+    freeAlignments = [ hostOrientation ];
+  }
+
+  var takenAlignments = ALIGNMENTS.filter(function(alignment) {
+
+    return freeAlignments.indexOf(alignment) === -1;
+  });
+
+  return takenAlignments;
+
+}
+
+/**
+ * Return alignments which are taken by related connections
+ *
+ * @param {Shape} element
+ *
+ * @return {Array<String>}
+ */
+function getTakenConnectionAlignments(element) {
+
+  var elementMid = getMid(element);
+
+  var takenAlignments = [].concat(
+    element.incoming.map(function(c) {
+      return c.waypoints[c.waypoints.length - 2 ];
+    }),
+    element.outgoing.map(function(c) {
+      return c.waypoints[1];
+    })
+  ).map(function(point) {
+    return getApproximateOrientation(elementMid, point);
+  });
+
+  return takenAlignments;
+}
+
+/**
+ * Return the optimal label position around an element
+ * or _undefined_, if none was found.
+ *
+ * @param  {Shape} element
+ *
+ * @return {String} positioning identifier
+ */
+function getOptimalPosition(element) {
+
+  var labelMid = getMid(element.label);
+
+  var elementMid = getMid(element);
+
+  var labelOrientation = getApproximateOrientation(elementMid, labelMid);
+
+  if (!isAligned(labelOrientation)) {
+    return;
+  }
+
+  var takenAlignments = getTakenConnectionAlignments(element);
+
+  if (element.host) {
+    var takenHostAlignments = getTakenHostAlignments(element);
+
+    takenAlignments = takenAlignments.concat(takenHostAlignments);
+  }
+
+  var freeAlignments = ALIGNMENTS.filter(function(alignment) {
+
+    return takenAlignments.indexOf(alignment) === -1;
+  });
+
+  // NOTHING TO DO; label already aligned a.O.K.
+  if (freeAlignments.indexOf(labelOrientation) !== -1) {
+    return;
+  }
+
+  return freeAlignments[0];
+}
+
+function getApproximateOrientation(p0, p1) {
+  return getOrientation(p1, p0, 5);
+}
+
+function isAligned(orientation) {
+  return ALIGNMENTS.indexOf(orientation) !== -1;
+}
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/AppendBehavior.js b/app/lib/resourcemodeler/features/modeling/behavior/AppendBehavior.js
new file mode 100644
index 00000000..19a70faa
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/AppendBehavior.js
@@ -0,0 +1,32 @@
+import inherits from 'inherits';
+
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+
+export default function AppendBehavior(eventBus) {
+
+  CommandInterceptor.call(this, eventBus);
+
+  // assign correct shape position unless already set
+
+  this.preExecute('shape.append', function(context) {
+
+    var source = context.source,
+        shape = context.shape;
+
+    if (!context.position) {
+
+      context.position = {
+        x: source.x + source.width + 80 + shape.width / 2,
+        y: source.y + source.height / 2
+      };
+
+    }
+  }, true);
+}
+
+inherits(AppendBehavior, CommandInterceptor);
+
+AppendBehavior.$inject = [
+  'eventBus'
+];
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/FixHoverBehavior.js b/app/lib/resourcemodeler/features/modeling/behavior/FixHoverBehavior.js
new file mode 100644
index 00000000..9f837a74
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/FixHoverBehavior.js
@@ -0,0 +1,40 @@
+var HIGH_PRIORITY = 1500;
+
+
+/**
+ * Correct hover targets in certain situations to improve diagram interaction.
+ *
+ * @param {ElementRegistry} elementRegistry
+ * @param {EventBus} eventBus
+ * @param {Canvas} canvas
+ */
+export default function FixHoverBehavior(elementRegistry, eventBus, canvas) {
+
+  eventBus.on([
+    'create.hover',
+    'create.move',
+    'create.end',
+    'shape.move.hover',
+    'shape.move.move',
+    'shape.move.end'
+  ], HIGH_PRIORITY, function(event) {
+    var context = event.context,
+        shape = context.shape || event.shape,
+        hover = event.hover;
+
+    var rootElement = canvas.getRootElement();
+
+    // ensure group & label elements are dropped always onto the root
+    if (hover !== rootElement && shape.labelTarget) {
+      event.hover = rootElement;
+      event.hoverGfx = elementRegistry.getGraphics(event.hover);
+    }
+  });
+
+}
+
+FixHoverBehavior.$inject = [
+  'elementRegistry',
+  'eventBus',
+  'canvas'
+];
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/ImportDockingFix.js b/app/lib/resourcemodeler/features/modeling/behavior/ImportDockingFix.js
new file mode 100644
index 00000000..e0ed76e9
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/ImportDockingFix.js
@@ -0,0 +1,79 @@
+import {getMid} from 'diagram-js/lib/layout/LayoutUtil';
+
+import lineIntersect from './util/LineIntersect';
+
+
+/**
+ * Fix broken dockings after DI imports.
+ *
+ * @param {EventBus} eventBus
+ */
+export default function ImportDockingFix(eventBus) {
+
+  function adjustDocking(startPoint, nextPoint, elementMid) {
+
+    var elementTop = {
+      x: elementMid.x,
+      y: elementMid.y - 50
+    };
+
+    var elementLeft = {
+      x: elementMid.x - 50,
+      y: elementMid.y
+    };
+
+    var verticalIntersect = lineIntersect(startPoint, nextPoint, elementMid, elementTop),
+        horizontalIntersect = lineIntersect(startPoint, nextPoint, elementMid, elementLeft);
+
+    // original is horizontal or vertical center cross intersection
+    var centerIntersect;
+
+    if (verticalIntersect && horizontalIntersect) {
+      if (getDistance(verticalIntersect, elementMid) > getDistance(horizontalIntersect, elementMid)) {
+        centerIntersect = horizontalIntersect;
+      } else {
+        centerIntersect = verticalIntersect;
+      }
+    } else {
+      centerIntersect = verticalIntersect || horizontalIntersect;
+    }
+
+    startPoint.original = centerIntersect;
+  }
+
+  function fixDockings(connection) {
+    var waypoints = connection.waypoints;
+
+    adjustDocking(
+      waypoints[0],
+      waypoints[1],
+      getMid(connection.source)
+    );
+
+    adjustDocking(
+      waypoints[waypoints.length - 1],
+      waypoints[waypoints.length - 2],
+      getMid(connection.target)
+    );
+  }
+
+  eventBus.on('boardElement.added', function(e) {
+
+    var element = e.element;
+
+    if (element.waypoints) {
+      fixDockings(element);
+    }
+  });
+}
+
+ImportDockingFix.$inject = [
+  'eventBus'
+];
+
+
+// helpers //////////////////////
+
+function getDistance(p1, p2) {
+  return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/LabelBehavior.js b/app/lib/resourcemodeler/features/modeling/behavior/LabelBehavior.js
new file mode 100644
index 00000000..05257c73
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/LabelBehavior.js
@@ -0,0 +1,357 @@
+import {assign, sortBy} from 'min-dash';
+
+import inherits from 'inherits';
+
+import {getBusinessObject, is} from '../../../util/ModelUtil';
+
+import {getExternalLabelMid, hasExternalLabel, isLabel, isLabelExternal} from '../../../util/LabelUtil';
+
+import {getLabel} from '../../label-editing/LabelUtil';
+
+import {getLabelAdjustment} from './util/LabelLayoutUtil';
+
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+import {getNewAttachPoint} from 'diagram-js/lib/util/AttachUtil';
+
+import {getMid, roundPoint} from 'diagram-js/lib/layout/LayoutUtil';
+
+import {delta} from 'diagram-js/lib/util/PositionUtil';
+
+import {getDistancePointLine, perpendicularFoot} from './util/GeometricUtil';
+
+var DEFAULT_LABEL_DIMENSIONS = {
+  width: 90,
+  height: 20
+};
+
+var NAME_PROPERTY = 'name';
+
+/**
+ * A component that makes sure that external labels are added
+ * together with respective elements and properly updated (DI wise)
+ * during move.
+ *
+ * @param {EventBus} eventBus
+ * @param {Modeling} modeling
+ * @param {ODFactory} odFactory
+ * @param {TextRenderer} textRenderer
+ */
+export default function LabelBehavior(
+    eventBus, modeling, odFactory,
+    textRenderer) {
+
+  CommandInterceptor.call(this, eventBus);
+
+  // update label if name property was updated
+  this.postExecute('element.updateProperties', function(e) {
+    var context = e.context,
+        element = context.element,
+        properties = context.properties;
+
+    if (NAME_PROPERTY in properties) {
+      modeling.updateLabel(element, properties[NAME_PROPERTY]);
+    }
+  });
+
+  // create label shape after shape/connection was created
+  this.postExecute([ 'shape.create', 'connection.create' ], function(e) {
+    var context = e.context,
+        hints = context.hints || {};
+
+    if (hints.createElementsBehavior === false) {
+      return;
+    }
+
+    var element = context.shape || context.connection,
+        businessObject = element.businessObject;
+
+    if (isLabel(element) || !isLabelExternal(element)) {
+      return;
+    }
+
+    // only create label if attribute available
+    if (!getLabel(element)) {
+      return;
+    }
+
+    var labelCenter = getExternalLabelMid(element);
+
+    // we don't care about x and y
+    var labelDimensions = textRenderer.getExternalLabelBounds(
+      DEFAULT_LABEL_DIMENSIONS,
+      getLabel(element)
+    );
+
+    modeling.createLabel(element, labelCenter, {
+      id: businessObject.id + '_label',
+      businessObject: businessObject,
+      width: labelDimensions.width,
+      height: labelDimensions.height
+    });
+  });
+
+  // update label after label shape was deleted
+  this.postExecute('shape.delete', function(event) {
+    var context = event.context,
+        labelTarget = context.labelTarget,
+        hints = context.hints || {};
+
+    // check if label
+    if (labelTarget && hints.unsetLabel !== false) {
+      modeling.updateLabel(labelTarget, null, null, { removeShape: false });
+    }
+  });
+
+  // update di information on label creation
+  this.postExecute([ 'label.create' ], function(event) {
+
+    var context = event.context,
+        element = context.shape,
+        businessObject,
+        di;
+
+    // we want to trigger on real labels only
+    if (!element.labelTarget) {
+      return;
+    }
+
+    // we want to trigger on board elements only
+    if (!is(element.labelTarget || element, 'rem:BoardElement')) {
+      return;
+    }
+
+    businessObject = element.businessObject,
+    di = businessObject.di;
+
+
+    if (!di.label) {
+      di.label = odFactory.create('odDi:OdLabel', {
+        bounds: odFactory.create('dc:Bounds')
+      });
+    }
+
+    assign(di.label.bounds, {
+      x: element.x,
+      y: element.y,
+      width: element.width,
+      height: element.height
+    });
+  });
+
+  function getVisibleLabelAdjustment(event) {
+
+    var context = event.context,
+        connection = context.connection,
+        label = connection.label,
+        hints = assign({}, context.hints),
+        newWaypoints = context.newWaypoints || connection.waypoints,
+        oldWaypoints = context.oldWaypoints;
+
+
+    if (typeof hints.startChanged === 'undefined') {
+      hints.startChanged = !!hints.connectionStart;
+    }
+
+    if (typeof hints.endChanged === 'undefined') {
+      hints.endChanged = !!hints.connectionEnd;
+    }
+
+    return getLabelAdjustment(label, newWaypoints, oldWaypoints, hints);
+  }
+
+  this.postExecute([
+    'connection.layout',
+    'connection.updateWaypoints'
+  ], function(event) {
+    var context = event.context,
+        hints = context.hints || {};
+
+    if (hints.labelBehavior === false) {
+      return;
+    }
+
+    var connection = context.connection,
+        label = connection.label,
+        labelAdjustment;
+
+    // handle missing label as well as the case
+    // that the label parent does not exist (yet),
+    // because it is being pasted / created via multi element create
+    //
+    // Cf. https://github.com/bpmn-io/bpmn-js/pull/1227
+    if (!label || !label.parent) {
+      return;
+    }
+
+    labelAdjustment = getVisibleLabelAdjustment(event);
+
+    modeling.moveShape(label, labelAdjustment);
+  });
+
+
+  // keep label position on shape replace
+  this.postExecute([ 'shape.replace' ], function(event) {
+    var context = event.context,
+        newShape = context.newShape,
+        oldShape = context.oldShape;
+
+    var businessObject = getBusinessObject(newShape);
+
+    if (businessObject
+      && isLabelExternal(businessObject)
+      && oldShape.label
+      && newShape.label) {
+      newShape.label.x = oldShape.label.x;
+      newShape.label.y = oldShape.label.y;
+    }
+  });
+
+
+  // move external label after resizing
+  this.postExecute('shape.resize', function(event) {
+
+    var context = event.context,
+        shape = context.shape,
+        newBounds = context.newBounds,
+        oldBounds = context.oldBounds;
+
+    if (hasExternalLabel(shape)) {
+
+      var label = shape.label,
+          labelMid = getMid(label),
+          edges = asEdges(oldBounds);
+
+      // get nearest border point to label as reference point
+      var referencePoint = getReferencePoint(labelMid, edges);
+
+      var delta = getReferencePointDelta(referencePoint, oldBounds, newBounds);
+
+      modeling.moveShape(label, delta);
+
+    }
+
+  });
+
+}
+
+inherits(LabelBehavior, CommandInterceptor);
+
+LabelBehavior.$inject = [
+  'eventBus',
+  'modeling',
+  'odFactory',
+  'textRenderer'
+];
+
+// helpers //////////////////////
+
+/**
+ * Calculates a reference point delta relative to a new position
+ * of a certain element's bounds
+ *
+ * @param {Point} point
+ * @param {Bounds} oldBounds
+ * @param {Bounds} newBounds
+ *
+ * @return {Delta} delta
+ */
+export function getReferencePointDelta(referencePoint, oldBounds, newBounds) {
+
+  var newReferencePoint = getNewAttachPoint(referencePoint, oldBounds, newBounds);
+
+  return roundPoint(delta(newReferencePoint, referencePoint));
+}
+
+/**
+ * Generates the nearest point (reference point) for a given point
+ * onto given set of lines
+ *
+ * @param {Array<Point, Point>} lines
+ * @param {Point} point
+ *
+ * @param {Point}
+ */
+export function getReferencePoint(point, lines) {
+
+  if (!lines.length) {
+    return;
+  }
+
+  var nearestLine = getNearestLine(point, lines);
+
+  return perpendicularFoot(point, nearestLine);
+}
+
+/**
+ * Convert the given bounds to a lines array containing all edges
+ *
+ * @param {Bounds|Point} bounds
+ *
+ * @return Array<Point>
+ */
+export function asEdges(bounds) {
+  return [
+    [ // top
+      {
+        x: bounds.x,
+        y: bounds.y
+      },
+      {
+        x: bounds.x + (bounds.width || 0),
+        y: bounds.y
+      }
+    ],
+    [ // right
+      {
+        x: bounds.x + (bounds.width || 0),
+        y: bounds.y
+      },
+      {
+        x: bounds.x + (bounds.width || 0),
+        y: bounds.y + (bounds.height || 0)
+      }
+    ],
+    [ // bottom
+      {
+        x: bounds.x,
+        y: bounds.y + (bounds.height || 0)
+      },
+      {
+        x: bounds.x + (bounds.width || 0),
+        y: bounds.y + (bounds.height || 0)
+      }
+    ],
+    [ // left
+      {
+        x: bounds.x,
+        y: bounds.y
+      },
+      {
+        x: bounds.x,
+        y: bounds.y + (bounds.height || 0)
+      }
+    ]
+  ];
+}
+
+/**
+ * Returns the nearest line for a given point by distance
+ * @param {Point} point
+ * @param Array<Point> lines
+ *
+ * @return Array<Point>
+ */
+function getNearestLine(point, lines) {
+
+  var distances = lines.map(function(l) {
+    return {
+      line: l,
+      distance: getDistancePointLine(point, l)
+    };
+  });
+
+  var sorted = sortBy(distances, 'distance');
+
+  return sorted[0].line;
+}
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/UnclaimIdBehavior.js b/app/lib/resourcemodeler/features/modeling/behavior/UnclaimIdBehavior.js
new file mode 100644
index 00000000..c82fad7a
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/UnclaimIdBehavior.js
@@ -0,0 +1,41 @@
+import inherits from 'inherits';
+
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+import {isLabel} from '../../../util/LabelUtil';
+
+
+/**
+ * Unclaims model IDs on element deletion.
+ *
+ * @param {Canvas} canvas
+ * @param {Injector} injector
+ * @param {Moddle} moddle
+ * @param {Modeling} modeling
+ */
+export default function UnclaimIdBehavior(canvas, injector, moddle, modeling) {
+  injector.invoke(CommandInterceptor, this);
+
+  this.preExecute('shape.delete', function(event) {
+    var context = event.context,
+        shape = context.shape,
+        shapeBo = shape.businessObject;
+
+    if (isLabel(shape)) {
+      return;
+    }
+
+    modeling.unclaimId(shapeBo.id, shapeBo);
+  });
+
+  this.preExecute('canvas.updateRoot', function() {
+    var rootElement = canvas.getRootElement(),
+        rootElementBo = rootElement.businessObject;
+
+    moddle.ids.unclaim(rootElementBo.id);
+  });
+}
+
+inherits(UnclaimIdBehavior, CommandInterceptor);
+
+UnclaimIdBehavior.$inject = [ 'canvas', 'injector', 'moddle', 'modeling' ];
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/index.js b/app/lib/resourcemodeler/features/modeling/behavior/index.js
new file mode 100644
index 00000000..eb59ab18
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/index.js
@@ -0,0 +1,23 @@
+import AdaptiveLabelPositioningBehavior from './AdaptiveLabelPositioningBehavior';
+import AppendBehavior from './AppendBehavior';
+import FixHoverBehavior from './FixHoverBehavior';
+import ImportDockingFix from './ImportDockingFix';
+import LabelBehavior from './LabelBehavior';
+import UnclaimIdBehavior from './UnclaimIdBehavior';
+
+export default {
+  __init__: [
+    'adaptiveLabelPositioningBehavior',
+    'appendBehavior',
+    'fixHoverBehavior',
+    'importDockingFix',
+    'labelBehavior',
+    'unclaimIdBehavior',
+  ],
+  adaptiveLabelPositioningBehavior: [ 'type', AdaptiveLabelPositioningBehavior ],
+  appendBehavior: [ 'type', AppendBehavior ],
+  fixHoverBehavior: [ 'type', FixHoverBehavior ],
+  importDockingFix: [ 'type', ImportDockingFix ],
+  labelBehavior: [ 'type', LabelBehavior ],
+  unclaimIdBehavior: [ 'type', UnclaimIdBehavior ],
+};
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/util/GeometricUtil.js b/app/lib/resourcemodeler/features/modeling/behavior/util/GeometricUtil.js
new file mode 100644
index 00000000..37a9ad97
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/util/GeometricUtil.js
@@ -0,0 +1,121 @@
+/**
+ * Returns the length of a vector
+ *
+ * @param {Vector}
+ * @return {Float}
+ */
+export function vectorLength(v) {
+  return Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2));
+}
+
+
+/**
+ * Calculates the angle between a line a the yAxis
+ *
+ * @param {Array}
+ * @return {Float}
+ */
+export function getAngle(line) {
+
+  // return value is between 0, 180 and -180, -0
+  // @janstuemmel: maybe replace return a/b with b/a
+  return Math.atan((line[1].y - line[0].y) / (line[1].x - line[0].x));
+}
+
+
+/**
+ * Rotates a vector by a given angle
+ *
+ * @param {Vector}
+ * @param {Float} Angle in radians
+ * @return {Vector}
+ */
+export function rotateVector(vector, angle) {
+  return (!angle) ? vector : {
+    x: Math.cos(angle) * vector.x - Math.sin(angle) * vector.y,
+    y: Math.sin(angle) * vector.x + Math.cos(angle) * vector.y
+  };
+}
+
+
+/**
+ * Solves a 2D equation system
+ * a + r*b = c, where a,b,c are 2D vectors
+ *
+ * @param {Vector}
+ * @param {Vector}
+ * @param {Vector}
+ * @return {Float}
+ */
+function solveLambaSystem(a, b, c) {
+
+  // the 2d system
+  var system = [
+    { n: a[0] - c[0], lambda: b[0] },
+    { n: a[1] - c[1], lambda: b[1] }
+  ];
+
+  // solve
+  var n = system[0].n * b[0] + system[1].n * b[1],
+      l = system[0].lambda * b[0] + system[1].lambda * b[1];
+
+  return -n / l;
+}
+
+
+/**
+ * Position of perpendicular foot
+ *
+ * @param {Point}
+ * @param [ {Point}, {Point} ] line defined through two points
+ * @return {Point} the perpendicular foot position
+ */
+export function perpendicularFoot(point, line) {
+
+  var a = line[0], b = line[1];
+
+  // relative position of b from a
+  var bd = { x: b.x - a.x, y: b.y - a.y };
+
+  // solve equation system to the parametrized vectors param real value
+  var r = solveLambaSystem([ a.x, a.y ], [ bd.x, bd.y ], [ point.x, point.y ]);
+
+  return { x: a.x + r * bd.x, y: a.y + r * bd.y };
+}
+
+
+/**
+ * Calculates the distance between a point and a line
+ *
+ * @param {Point}
+ * @param [ {Point}, {Point} ] line defined through two points
+ * @return {Float} distance
+ */
+export function getDistancePointLine(point, line) {
+
+  var pfPoint = perpendicularFoot(point, line);
+
+  // distance vector
+  var connectionVector = {
+    x: pfPoint.x - point.x,
+    y: pfPoint.y - point.y
+  };
+
+  return vectorLength(connectionVector);
+}
+
+
+/**
+ * Calculates the distance between two points
+ *
+ * @param {Point}
+ * @param {Point}
+ * @return {Float} distance
+ */
+export function getDistancePointPoint(point1, point2) {
+
+  return vectorLength({
+    x: point1.x - point2.x,
+    y: point1.y - point2.y
+  });
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/util/LabelLayoutUtil.js b/app/lib/resourcemodeler/features/modeling/behavior/util/LabelLayoutUtil.js
new file mode 100644
index 00000000..b2549bb1
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/util/LabelLayoutUtil.js
@@ -0,0 +1,214 @@
+import {getAngle, getDistancePointPoint, rotateVector} from './GeometricUtil';
+
+import {getAttachment} from './LineAttachmentUtil';
+
+import {roundPoint} from 'diagram-js/lib/layout/LayoutUtil';
+
+
+export function findNewLabelLineStartIndex(oldWaypoints, newWaypoints, attachment, hints) {
+
+  var index = attachment.segmentIndex;
+
+  var offset = newWaypoints.length - oldWaypoints.length;
+
+  // segmentMove happened
+  if (hints.segmentMove) {
+
+    var oldSegmentStartIndex = hints.segmentMove.segmentStartIndex,
+        newSegmentStartIndex = hints.segmentMove.newSegmentStartIndex;
+
+    // if label was on moved segment return new segment index
+    if (index === oldSegmentStartIndex) {
+      return newSegmentStartIndex;
+    }
+
+    // label is after new segment index
+    if (index >= newSegmentStartIndex) {
+      return (index + offset < newSegmentStartIndex) ? newSegmentStartIndex : index + offset;
+    }
+
+    // if label is before new segment index
+    return index;
+  }
+
+  // bendpointMove happened
+  if (hints.bendpointMove) {
+
+    var insert = hints.bendpointMove.insert,
+        bendpointIndex = hints.bendpointMove.bendpointIndex,
+        newIndex;
+
+    // waypoints length didnt change
+    if (offset === 0) {
+      return index;
+    }
+
+    // label behind new/removed bendpoint
+    if (index >= bendpointIndex) {
+      newIndex = insert ? index + 1 : index - 1;
+    }
+
+    // label before new/removed bendpoint
+    if (index < bendpointIndex) {
+
+      newIndex = index;
+
+      // decide label should take right or left segment
+      if (insert && attachment.type !== 'bendpoint' && bendpointIndex - 1 === index) {
+
+        var rel = relativePositionMidWaypoint(newWaypoints, bendpointIndex);
+
+        if (rel < attachment.relativeLocation) {
+          newIndex++;
+        }
+      }
+    }
+
+    return newIndex;
+  }
+
+  // start/end changed
+  if (offset === 0) {
+    return index;
+  }
+
+  if (hints.connectionStart) {
+    return (index === 0) ? 0 : null;
+  }
+
+  if (hints.connectionEnd) {
+    return (index === oldWaypoints.length - 2) ? newWaypoints.length - 2 : null;
+  }
+
+  // if nothing fits, return null
+  return null;
+}
+
+
+/**
+ * Calculate the required adjustment (move delta) for the given label
+ * after the connection waypoints got updated.
+ *
+ * @param {djs.model.Label} label
+ * @param {Array<Point>} newWaypoints
+ * @param {Array<Point>} oldWaypoints
+ * @param {Object} hints
+ *
+ * @return {Point} delta
+ */
+export function getLabelAdjustment(label, newWaypoints, oldWaypoints, hints) {
+
+  var x = 0,
+      y = 0;
+
+  var labelPosition = getLabelMid(label);
+
+  // get closest attachment
+  var attachment = getAttachment(labelPosition, oldWaypoints),
+      oldLabelLineIndex = attachment.segmentIndex,
+      newLabelLineIndex = findNewLabelLineStartIndex(oldWaypoints, newWaypoints, attachment, hints);
+
+  if (newLabelLineIndex === null) {
+    return { x: x, y: y };
+  }
+
+  // should never happen
+  // TODO(@janstuemmel): throw an error here when connectionSegmentMove is refactored
+  if (newLabelLineIndex < 0 ||
+      newLabelLineIndex > newWaypoints.length - 2) {
+    return { x: x, y: y };
+  }
+
+  var oldLabelLine = getLine(oldWaypoints, oldLabelLineIndex),
+      newLabelLine = getLine(newWaypoints, newLabelLineIndex),
+      oldFoot = attachment.position;
+
+  var relativeFootPosition = getRelativeFootPosition(oldLabelLine, oldFoot),
+      angleDelta = getAngleDelta(oldLabelLine, newLabelLine);
+
+  // special rule if label on bendpoint
+  if (attachment.type === 'bendpoint') {
+
+    var offset = newWaypoints.length - oldWaypoints.length,
+        oldBendpointIndex = attachment.bendpointIndex,
+        oldBendpoint = oldWaypoints[oldBendpointIndex];
+
+    // bendpoint position hasn't changed, return same position
+    if (newWaypoints.indexOf(oldBendpoint) !== -1) {
+      return { x: x, y: y };
+    }
+
+    // new bendpoint and old bendpoint have same index, then just return the offset
+    if (offset === 0) {
+      var newBendpoint = newWaypoints[oldBendpointIndex];
+
+      return {
+        x: newBendpoint.x - attachment.position.x,
+        y: newBendpoint.y - attachment.position.y
+      };
+    }
+
+    // if bendpoints get removed
+    if (offset < 0 && oldBendpointIndex !== 0 && oldBendpointIndex < oldWaypoints.length - 1) {
+      relativeFootPosition = relativePositionMidWaypoint(oldWaypoints, oldBendpointIndex);
+    }
+  }
+
+  var newFoot = {
+    x: (newLabelLine[1].x - newLabelLine[0].x) * relativeFootPosition + newLabelLine[0].x,
+    y: (newLabelLine[1].y - newLabelLine[0].y) * relativeFootPosition + newLabelLine[0].y
+  };
+
+  // the rotated vector to label
+  var newLabelVector = rotateVector({
+    x: labelPosition.x - oldFoot.x,
+    y: labelPosition.y - oldFoot.y
+  }, angleDelta);
+
+  // the new relative position
+  x = newFoot.x + newLabelVector.x - labelPosition.x;
+  y = newFoot.y + newLabelVector.y - labelPosition.y;
+
+  return roundPoint({
+    x: x,
+    y: y
+  });
+}
+
+
+// HELPERS //////////////////////
+
+function relativePositionMidWaypoint(waypoints, idx) {
+
+  var distanceSegment1 = getDistancePointPoint(waypoints[idx - 1], waypoints[idx]),
+      distanceSegment2 = getDistancePointPoint(waypoints[idx], waypoints[idx + 1]);
+
+  var relativePosition = distanceSegment1 / (distanceSegment1 + distanceSegment2);
+
+  return relativePosition;
+}
+
+function getLabelMid(label) {
+  return {
+    x: label.x + label.width / 2,
+    y: label.y + label.height / 2
+  };
+}
+
+function getAngleDelta(l1, l2) {
+  var a1 = getAngle(l1),
+      a2 = getAngle(l2);
+  return a2 - a1;
+}
+
+function getLine(waypoints, idx) {
+  return [ waypoints[idx], waypoints[idx + 1] ];
+}
+
+function getRelativeFootPosition(line, foot) {
+
+  var length = getDistancePointPoint(line[0], line[1]),
+      lengthToFoot = getDistancePointPoint(line[0], foot);
+
+  return length === 0 ? 0 : lengthToFoot / length;
+}
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/util/LineAttachmentUtil.js b/app/lib/resourcemodeler/features/modeling/behavior/util/LineAttachmentUtil.js
new file mode 100644
index 00000000..ac6acc69
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/util/LineAttachmentUtil.js
@@ -0,0 +1,229 @@
+var sqrt = Math.sqrt,
+    min = Math.min,
+    max = Math.max,
+    abs = Math.abs;
+
+/**
+ * Calculate the square (power to two) of a number.
+ *
+ * @param {Number} n
+ *
+ * @return {Number}
+ */
+function sq(n) {
+  return Math.pow(n, 2);
+}
+
+/**
+ * Get distance between two points.
+ *
+ * @param {Point} p1
+ * @param {Point} p2
+ *
+ * @return {Number}
+ */
+function getDistance(p1, p2) {
+  return sqrt(sq(p1.x - p2.x) + sq(p1.y - p2.y));
+}
+
+/**
+ * Return the attachment of the given point on the specified line.
+ *
+ * The attachment is either a bendpoint (attached to the given point)
+ * or segment (attached to a location on a line segment) attachment:
+ *
+ * ```javascript
+ * var pointAttachment = {
+ *   type: 'bendpoint',
+ *   bendpointIndex: 3,
+ *   position: { x: 10, y: 10 } // the attach point on the line
+ * };
+ *
+ * var segmentAttachment = {
+ *   type: 'segment',
+ *   segmentIndex: 2,
+ *   relativeLocation: 0.31, // attach point location between 0 (at start) and 1 (at end)
+ *   position: { x: 10, y: 10 } // the attach point on the line
+ * };
+ * ```
+ *
+ * @param {Point} point
+ * @param {Array<Point>} line
+ *
+ * @return {Object} attachment
+ */
+export function getAttachment(point, line) {
+
+  var idx = 0,
+      segmentStart,
+      segmentEnd,
+      segmentStartDistance,
+      segmentEndDistance,
+      attachmentPosition,
+      minDistance,
+      intersections,
+      attachment,
+      attachmentDistance,
+      closestAttachmentDistance,
+      closestAttachment;
+
+  for (idx = 0; idx < line.length - 1; idx++) {
+
+    segmentStart = line[idx];
+    segmentEnd = line[idx + 1];
+
+    if (pointsEqual(segmentStart, segmentEnd)) {
+      intersections = [ segmentStart ];
+    } else {
+      segmentStartDistance = getDistance(point, segmentStart);
+      segmentEndDistance = getDistance(point, segmentEnd);
+
+      minDistance = min(segmentStartDistance, segmentEndDistance);
+
+      intersections = getCircleSegmentIntersections(segmentStart, segmentEnd, point, minDistance);
+    }
+
+    if (intersections.length < 1) {
+      throw new Error('expected between [1, 2] circle -> line intersections');
+    }
+
+    // one intersection -> bendpoint attachment
+    if (intersections.length === 1) {
+      attachment = {
+        type: 'bendpoint',
+        position: intersections[0],
+        segmentIndex: idx,
+        bendpointIndex: pointsEqual(segmentStart, intersections[0]) ? idx : idx + 1
+      };
+    }
+
+    // two intersections -> segment attachment
+    if (intersections.length === 2) {
+
+      attachmentPosition = mid(intersections[0], intersections[1]);
+
+      attachment = {
+        type: 'segment',
+        position: attachmentPosition,
+        segmentIndex: idx,
+        relativeLocation: getDistance(segmentStart, attachmentPosition) / getDistance(segmentStart, segmentEnd)
+      };
+    }
+
+    attachmentDistance = getDistance(attachment.position, point);
+
+    if (!closestAttachment || closestAttachmentDistance > attachmentDistance) {
+      closestAttachment = attachment;
+      closestAttachmentDistance = attachmentDistance;
+    }
+  }
+
+  return closestAttachment;
+}
+
+/**
+ * Gets the intersection between a circle and a line segment.
+ *
+ * @param {Point} s1 segment start
+ * @param {Point} s2 segment end
+ * @param {Point} cc circle center
+ * @param {Number} cr circle radius
+ *
+ * @return {Array<Point>} intersections
+ */
+function getCircleSegmentIntersections(s1, s2, cc, cr) {
+
+  var baX = s2.x - s1.x;
+  var baY = s2.y - s1.y;
+  var caX = cc.x - s1.x;
+  var caY = cc.y - s1.y;
+
+  var a = baX * baX + baY * baY;
+  var bBy2 = baX * caX + baY * caY;
+  var c = caX * caX + caY * caY - cr * cr;
+
+  var pBy2 = bBy2 / a;
+  var q = c / a;
+
+  var disc = pBy2 * pBy2 - q;
+
+  // check against negative value to work around
+  // negative, very close to zero results (-4e-15)
+  // being produced in some environments
+  if (disc < 0 && disc > -0.000001) {
+    disc = 0;
+  }
+
+  if (disc < 0) {
+    return [];
+  }
+
+  // if disc == 0 ... dealt with later
+  var tmpSqrt = sqrt(disc);
+  var abScalingFactor1 = -pBy2 + tmpSqrt;
+  var abScalingFactor2 = -pBy2 - tmpSqrt;
+
+  var i1 = {
+    x: s1.x - baX * abScalingFactor1,
+    y: s1.y - baY * abScalingFactor1
+  };
+
+  if (disc === 0) { // abScalingFactor1 == abScalingFactor2
+    return [ i1 ];
+  }
+
+  var i2 = {
+    x: s1.x - baX * abScalingFactor2,
+    y: s1.y - baY * abScalingFactor2
+  };
+
+  // return only points on line segment
+  return [ i1, i2 ].filter(function(p) {
+    return isPointInSegment(p, s1, s2);
+  });
+}
+
+
+function isPointInSegment(p, segmentStart, segmentEnd) {
+  return (
+    fenced(p.x, segmentStart.x, segmentEnd.x) &&
+    fenced(p.y, segmentStart.y, segmentEnd.y)
+  );
+}
+
+function fenced(n, rangeStart, rangeEnd) {
+
+  // use matching threshold to work around
+  // precision errors in intersection computation
+
+  return (
+    n >= min(rangeStart, rangeEnd) - EQUAL_THRESHOLD &&
+    n <= max(rangeStart, rangeEnd) + EQUAL_THRESHOLD
+  );
+}
+
+/**
+ * Calculate mid of two points.
+ *
+ * @param {Point} p1
+ * @param {Point} p2
+ *
+ * @return {Point}
+ */
+function mid(p1, p2) {
+
+  return {
+    x: (p1.x + p2.x) / 2,
+    y: (p1.y + p2.y) / 2
+  };
+}
+
+var EQUAL_THRESHOLD = 0.1;
+
+function pointsEqual(p1, p2) {
+
+  return (
+    abs(p1.x - p2.x) <= EQUAL_THRESHOLD &&
+    abs(p1.y - p2.y) <= EQUAL_THRESHOLD
+  );
+}
diff --git a/app/lib/resourcemodeler/features/modeling/behavior/util/LineIntersect.js b/app/lib/resourcemodeler/features/modeling/behavior/util/LineIntersect.js
new file mode 100644
index 00000000..a26f920d
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/behavior/util/LineIntersect.js
@@ -0,0 +1,36 @@
+/**
+ * Returns the intersection between two line segments a and b.
+ *
+ * @param {Point} l1s
+ * @param {Point} l1e
+ * @param {Point} l2s
+ * @param {Point} l2e
+ *
+ * @return {Point}
+ */
+export default function lineIntersect(l1s, l1e, l2s, l2e) {
+
+  // if the lines intersect, the result contains the x and y of the
+  // intersection (treating the lines as infinite) and booleans for
+  // whether line segment 1 or line segment 2 contain the point
+  var denominator, a, b, c, numerator;
+
+  denominator = ((l2e.y - l2s.y) * (l1e.x - l1s.x)) - ((l2e.x - l2s.x) * (l1e.y - l1s.y));
+
+  if (denominator == 0) {
+    return null;
+  }
+
+  a = l1s.y - l2s.y;
+  b = l1s.x - l2s.x;
+  numerator = ((l2e.x - l2s.x) * a) - ((l2e.y - l2s.y) * b);
+
+  c = numerator / denominator;
+
+  // if we cast these lines infinitely in
+  // both directions, they intersect here
+  return {
+    x: Math.round(l1s.x + (c * (l1e.x - l1s.x))),
+    y: Math.round(l1s.y + (c * (l1e.y - l1s.y)))
+  };
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/cmd/IdClaimHandler.js b/app/lib/resourcemodeler/features/modeling/cmd/IdClaimHandler.js
new file mode 100644
index 00000000..d8bf3c8a
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/cmd/IdClaimHandler.js
@@ -0,0 +1,36 @@
+export default function IdClaimHandler(moddle) {
+  this._moddle = moddle;
+}
+
+IdClaimHandler.$inject = [ 'moddle' ];
+
+
+IdClaimHandler.prototype.execute = function(context) {
+  var ids = this._moddle.ids,
+      id = context.id,
+      element = context.element,
+      claiming = context.claiming;
+
+  if (claiming) {
+    ids.claim(id, element);
+  } else {
+    ids.unclaim(id);
+  }
+};
+
+/**
+ * Command revert implementation.
+ */
+IdClaimHandler.prototype.revert = function(context) {
+  var ids = this._moddle.ids,
+      id = context.id,
+      element = context.element,
+      claiming = context.claiming;
+
+  if (claiming) {
+    ids.unclaim(id);
+  } else {
+    ids.claim(id, element);
+  }
+};
+
diff --git a/app/lib/resourcemodeler/features/modeling/cmd/UpdateCanvasRootHandler.js b/app/lib/resourcemodeler/features/modeling/cmd/UpdateCanvasRootHandler.js
new file mode 100644
index 00000000..bba76586
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/cmd/UpdateCanvasRootHandler.js
@@ -0,0 +1,78 @@
+import {add as collectionAdd, remove as collectionRemove} from 'diagram-js/lib/util/Collections';
+
+
+export default function UpdateCanvasRootHandler(canvas, modeling) {
+  this._canvas = canvas;
+  this._modeling = modeling;
+}
+
+UpdateCanvasRootHandler.$inject = [
+  'canvas',
+  'modeling'
+];
+
+
+UpdateCanvasRootHandler.prototype.execute = function(context) {
+
+  var canvas = this._canvas;
+
+  var newRoot = context.newRoot,
+      newRootBusinessObject = newRoot.businessObject,
+      oldRoot = canvas.getRootElement(),
+      oldRootBusinessObject = oldRoot.businessObject,
+      odDefinitions = oldRootBusinessObject.$parent,
+      diPlane = oldRootBusinessObject.di;
+
+  // (1) replace process old <> new root
+  canvas.setRootElement(newRoot, true);
+
+  // (2) update root elements
+  collectionAdd(odDefinitions.rootElements, newRootBusinessObject);
+  newRootBusinessObject.$parent = odDefinitions;
+
+  collectionRemove(odDefinitions.rootElements, oldRootBusinessObject);
+  oldRootBusinessObject.$parent = null;
+
+  // (3) wire di
+  oldRootBusinessObject.di = null;
+
+  diPlane.boardElement = newRootBusinessObject;
+  newRootBusinessObject.di = diPlane;
+
+  context.oldRoot = oldRoot;
+
+  // TODO(nikku): return changed elements?
+  // return [ newRoot, oldRoot ];
+};
+
+
+UpdateCanvasRootHandler.prototype.revert = function(context) {
+
+  var canvas = this._canvas;
+
+  var newRoot = context.newRoot,
+      newRootBusinessObject = newRoot.businessObject,
+      oldRoot = context.oldRoot,
+      oldRootBusinessObject = oldRoot.businessObject,
+      odDefinitions = newRootBusinessObject.$parent,
+      diPlane = newRootBusinessObject.di;
+
+  // (1) replace process old <> new root
+  canvas.setRootElement(oldRoot, true);
+
+  // (2) update root elements
+  collectionRemove(odDefinitions.rootElements, newRootBusinessObject);
+  newRootBusinessObject.$parent = null;
+
+  collectionAdd(odDefinitions.rootElements, oldRootBusinessObject);
+  oldRootBusinessObject.$parent = odDefinitions;
+
+  // (3) wire di
+  newRootBusinessObject.di = null;
+
+  diPlane.boardElement = oldRootBusinessObject;
+  oldRootBusinessObject.di = diPlane;
+
+  // TODO(nikku): return changed elements?
+  // return [ newRoot, oldRoot ];
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/cmd/UpdatePropertiesHandler.js b/app/lib/resourcemodeler/features/modeling/cmd/UpdatePropertiesHandler.js
new file mode 100644
index 00000000..f63620f3
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/cmd/UpdatePropertiesHandler.js
@@ -0,0 +1,215 @@
+import {assign, forEach, keys, reduce} from 'min-dash';
+
+import {getBusinessObject} from '../../../util/ModelUtil';
+
+var ID = 'id',
+    DI = 'di';
+
+var NULL_DIMENSIONS = {
+  width: 0,
+  height: 0
+};
+
+/**
+ * A handler that implements a od elements property update.
+ *
+ * This should be used to set simple properties on elements with
+ * an underlying XML business object.
+ *
+ * Use respective diagram-js provided handlers if you would
+ * like to perform automated modeling.
+ */
+export default function UpdatePropertiesHandler(
+    elementRegistry, moddle, translate,
+    modeling, textRenderer) {
+
+  this._elementRegistry = elementRegistry;
+  this._moddle = moddle;
+  this._translate = translate;
+  this._modeling = modeling;
+  this._textRenderer = textRenderer;
+}
+
+UpdatePropertiesHandler.$inject = [
+  'elementRegistry',
+  'moddle',
+  'translate',
+  'modeling',
+  'textRenderer'
+];
+
+
+// api //////////////////////
+
+/**
+ * Updates a board element with a list of new properties
+ *
+ * @param {Object} context
+ * @param {djs.model.Base} context.element the element to update
+ * @param {Object} context.properties a list of properties to set on the element's
+ *                                    businessObject (the XML model element)
+ *
+ * @return {Array<djs.model.Base>} the updated element
+ */
+UpdatePropertiesHandler.prototype.execute = function(context) {
+
+  var element = context.element,
+      changed = [ element ],
+      translate = this._translate;
+
+  if (!element) {
+    throw new Error(translate('element required'));
+  }
+
+  var elementRegistry = this._elementRegistry,
+      ids = this._moddle.ids;
+
+  var businessObject = element.businessObject,
+      properties = unwrapBusinessObjects(context.properties),
+      oldProperties = context.oldProperties || getProperties(businessObject, properties);
+
+  if (isIdChange(properties, businessObject)) {
+    ids.unclaim(businessObject[ID]);
+
+    elementRegistry.updateId(element, properties[ID]);
+
+    ids.claim(properties[ID], businessObject);
+  }
+
+  // update properties
+  setProperties(businessObject, properties);
+
+  // store old values
+  context.oldProperties = oldProperties;
+  context.changed = changed;
+
+  // indicate changed on objects affected by the update
+  return changed;
+};
+
+
+UpdatePropertiesHandler.prototype.postExecute = function(context) {
+  var element = context.element,
+      label = element.label;
+
+  var text = label && getBusinessObject(label).name;
+
+  if (!text) {
+    return;
+  }
+
+  // get layouted text bounds and resize external
+  // external label accordingly
+  var newLabelBounds = this._textRenderer.getExternalLabelBounds(label, text);
+
+  this._modeling.resizeShape(label, newLabelBounds, NULL_DIMENSIONS);
+};
+
+/**
+ * Reverts the update on a board elements properties.
+ *
+ * @param  {Object} context
+ *
+ * @return {djs.model.Base} the updated element
+ */
+UpdatePropertiesHandler.prototype.revert = function(context) {
+
+  var element = context.element,
+      properties = context.properties,
+      oldProperties = context.oldProperties,
+      businessObject = element.businessObject,
+      elementRegistry = this._elementRegistry,
+      ids = this._moddle.ids;
+
+  // update properties
+  setProperties(businessObject, oldProperties);
+
+  if (isIdChange(properties, businessObject)) {
+    ids.unclaim(properties[ID]);
+
+    elementRegistry.updateId(element, oldProperties[ID]);
+
+    ids.claim(oldProperties[ID], businessObject);
+  }
+
+  return context.changed;
+};
+
+
+function isIdChange(properties, businessObject) {
+  return ID in properties && properties[ID] !== businessObject[ID];
+}
+
+
+function getProperties(businessObject, properties) {
+  var propertyNames = keys(properties);
+
+  return reduce(propertyNames, function(result, key) {
+
+    // handle DI separately
+    if (key !== DI) {
+      result[key] = businessObject.get(key);
+    } else {
+      result[key] = getDiProperties(businessObject.di, keys(properties.di));
+    }
+
+    return result;
+  }, {});
+}
+
+
+function getDiProperties(di, propertyNames) {
+  return reduce(propertyNames, function(result, key) {
+    result[key] = di.get(key);
+
+    return result;
+  }, {});
+}
+
+
+function setProperties(businessObject, properties) {
+  forEach(properties, function(value, key) {
+
+    if (key !== DI) {
+      businessObject.set(key, value);
+    } else {
+
+      // only update, if businessObject.di exists
+      if (businessObject.di) {
+        setDiProperties(businessObject.di, value);
+      }
+    }
+  });
+}
+
+
+function setDiProperties(di, properties) {
+  forEach(properties, function(value, key) {
+    di.set(key, value);
+  });
+}
+
+
+var referencePropertyNames = [ 'default' ];
+
+/**
+ * Make sure we unwrap the actual business object
+ * behind diagram element that may have been
+ * passed as arguments.
+ *
+ * @param  {Object} properties
+ *
+ * @return {Object} unwrappedProps
+ */
+function unwrapBusinessObjects(properties) {
+
+  var unwrappedProps = assign({}, properties);
+
+  referencePropertyNames.forEach(function(name) {
+    if (name in properties) {
+      unwrappedProps[name] = getBusinessObject(unwrappedProps[name]);
+    }
+  });
+
+  return unwrappedProps;
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/cmd/UpdateSemanticParentHandler.js b/app/lib/resourcemodeler/features/modeling/cmd/UpdateSemanticParentHandler.js
new file mode 100644
index 00000000..eef91409
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/cmd/UpdateSemanticParentHandler.js
@@ -0,0 +1,34 @@
+export default function UpdateSemanticParentHandler(odUpdater) {
+  this._odUpdater = odUpdater;
+}
+
+UpdateSemanticParentHandler.$inject = [ 'odUpdater' ];
+
+
+UpdateSemanticParentHandler.prototype.execute = function(context) {
+  var dataStoreBo = context.dataStoreBo,
+      newSemanticParent = context.newSemanticParent,
+      newDiParent = context.newDiParent;
+
+  context.oldSemanticParent = dataStoreBo.$parent;
+  context.oldDiParent = dataStoreBo.di.$parent;
+
+  // update semantic parent
+  this._odUpdater.updateSemanticParent(dataStoreBo, newSemanticParent);
+
+  // update DI parent
+  this._odUpdater.updateDiParent(dataStoreBo.di, newDiParent);
+};
+
+UpdateSemanticParentHandler.prototype.revert = function(context) {
+  var dataStoreBo = context.dataStoreBo,
+      oldSemanticParent = context.oldSemanticParent,
+      oldDiParent = context.oldDiParent;
+
+  // update semantic parent
+  this._odUpdater.updateSemanticParent(dataStoreBo, oldSemanticParent);
+
+  // update DI parent
+  this._odUpdater.updateDiParent(dataStoreBo.di, oldDiParent);
+};
+
diff --git a/app/lib/resourcemodeler/features/modeling/index.js b/app/lib/resourcemodeler/features/modeling/index.js
new file mode 100644
index 00000000..4f31843d
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/index.js
@@ -0,0 +1,46 @@
+import BehaviorModule from './behavior';
+import RulesModule from '../rules';
+import DiOrderingModule from '../di-ordering';
+import OrderingModule from '../ordering';
+
+import CommandModule from 'diagram-js/lib/command';
+import TooltipsModule from 'diagram-js/lib/features/tooltips';
+import LabelSupportModule from 'diagram-js/lib/features/label-support';
+import AttachSupportModule from 'diagram-js/lib/features/attach-support';
+import SelectionModule from 'diagram-js/lib/features/selection';
+import ChangeSupportModule from 'diagram-js/lib/features/change-support';
+import SpaceToolModule from 'diagram-js/lib/features/space-tool';
+
+import ODFactory from './ODFactory';
+import ODUpdater from './ODUpdater';
+import ElementFactory from './ElementFactory';
+import Modeling from './Modeling';
+import ODLayouter from './ODLayouter';
+import CroppingConnectionDocking from 'diagram-js/lib/layout/CroppingConnectionDocking';
+
+
+export default {
+  __init__: [
+    'modeling',
+    'odUpdater'
+  ],
+  __depends__: [
+    BehaviorModule,
+    RulesModule,
+    DiOrderingModule,
+    OrderingModule,
+    CommandModule,
+    TooltipsModule,
+    LabelSupportModule,
+    AttachSupportModule,
+    SelectionModule,
+    ChangeSupportModule,
+    SpaceToolModule
+  ],
+  odFactory: [ 'type', ODFactory ],
+  odUpdater: [ 'type', ODUpdater ],
+  elementFactory: [ 'type', ElementFactory ],
+  modeling: [ 'type', Modeling ],
+  layouter: [ 'type', ODLayouter ],
+  connectionDocking: [ 'type', CroppingConnectionDocking ]
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/modeling/util/ModelingUtil.js b/app/lib/resourcemodeler/features/modeling/util/ModelingUtil.js
new file mode 100644
index 00000000..987d385c
--- /dev/null
+++ b/app/lib/resourcemodeler/features/modeling/util/ModelingUtil.js
@@ -0,0 +1,42 @@
+import {some} from 'min-dash';
+
+import {is} from '../../../util/ModelUtil';
+
+
+/**
+ * Return true if element has any of the given types.
+ *
+ * @param {djs.model.Base} element
+ * @param {Array<String>} types
+ *
+ * @return {Boolean}
+ */
+export function isAny(element, types) {
+  return some(types, function(t) {
+    return is(element, t);
+  });
+}
+
+
+/**
+ * Return the parent of the element with any of the given types.
+ *
+ * @param {djs.model.Base} element
+ * @param {String|Array<String>} anyType
+ *
+ * @return {djs.model.Base}
+ */
+export function getParent(element, anyType) {
+
+  if (typeof anyType === 'string') {
+    anyType = [ anyType ];
+  }
+
+  while ((element = element.parent)) {
+    if (isAny(element, anyType)) {
+      return element;
+    }
+  }
+
+  return null;
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/ordering/ODOrderingProvider.js b/app/lib/resourcemodeler/features/ordering/ODOrderingProvider.js
new file mode 100644
index 00000000..438eb5b0
--- /dev/null
+++ b/app/lib/resourcemodeler/features/ordering/ODOrderingProvider.js
@@ -0,0 +1,132 @@
+import inherits from 'inherits';
+
+import OrderingProvider from 'diagram-js/lib/features/ordering/OrderingProvider';
+
+import {isAny} from '../modeling/util/ModelingUtil';
+
+import {find, findIndex} from 'min-dash';
+
+
+/**
+ * a simple ordering provider that makes sure:
+ *
+ * (0) labels and groups are rendered always on top
+ * (1) elements are ordered by a {level} property
+ */
+export default function ODOrderingProvider(eventBus, canvas, translate) {
+
+  OrderingProvider.call(this, eventBus);
+
+  var orders = [
+    { type: 'rem:Resource', order: { level: 5 } },
+    {
+      type: 'rem:Link',
+      order: {
+        level: 3,
+      }
+    },
+  ];
+
+  function computeOrder(element) {
+    if (element.labelTarget) {
+      return { level: 10 };
+    }
+
+    var entry = find(orders, function(o) {
+      return isAny(element, [ o.type ]);
+    });
+
+    return entry && entry.order || { level: 1 };
+  }
+
+  function getOrder(element) {
+
+    var order = element.order;
+
+    if (!order) {
+      element.order = order = computeOrder(element);
+    }
+
+    if (!order) {
+      throw new Error('no order for <' + element.id + '>');
+    }
+
+    return order;
+  }
+
+  function findActualParent(element, newParent, containers) {
+
+    var actualParent = newParent;
+
+    while (actualParent) {
+
+      if (isAny(actualParent, containers)) {
+        break;
+      }
+
+      actualParent = actualParent.parent;
+    }
+
+    if (!actualParent) {
+      throw new Error(translate('no parent for {element} in {parent}', {
+        element: element.id,
+        parent: newParent.id
+      }));
+    }
+
+    return actualParent;
+  }
+
+  this.getOrdering = function(element, newParent) {
+
+    // render labels always on top
+    if (element.labelTarget) {
+      return {
+        parent: canvas.getRootElement(),
+        index: -1
+      };
+    }
+
+    var elementOrder = getOrder(element);
+
+
+    if (elementOrder.containers) {
+      newParent = findActualParent(element, newParent, elementOrder.containers);
+    }
+
+
+    var currentIndex = newParent.children.indexOf(element);
+
+    var insertIndex = findIndex(newParent.children, function(child) {
+
+      // do not compare with labels, they are created
+      // in the wrong order (right after elements) during import and
+      // mess up the positioning.
+      if (!element.labelTarget && child.labelTarget) {
+        return false;
+      }
+
+      return elementOrder.level < getOrder(child).level;
+    });
+
+
+    // if the element is already in the child list at
+    // a smaller index, we need to adjust the insert index.
+    // this takes into account that the element is being removed
+    // before being re-inserted
+    if (insertIndex !== -1) {
+      if (currentIndex !== -1 && currentIndex < insertIndex) {
+        insertIndex -= 1;
+      }
+    }
+
+    return {
+      index: insertIndex,
+      parent: newParent
+    };
+  };
+}
+
+ODOrderingProvider.$inject = [ 'eventBus', 'canvas', 'translate' ];
+
+inherits(ODOrderingProvider, OrderingProvider);
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/ordering/index.js b/app/lib/resourcemodeler/features/ordering/index.js
new file mode 100644
index 00000000..85b31dc9
--- /dev/null
+++ b/app/lib/resourcemodeler/features/ordering/index.js
@@ -0,0 +1,11 @@
+import translate from 'diagram-js/lib/i18n/translate';
+
+import ODOrderingProvider from './ODOrderingProvider';
+
+export default {
+  __depends__: [
+    translate
+  ],
+  __init__: [ 'odOrderingProvider' ],
+  odOrderingProvider: [ 'type', ODOrderingProvider ]
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/palette/PaletteProvider.js b/app/lib/resourcemodeler/features/palette/PaletteProvider.js
new file mode 100644
index 00000000..67feae30
--- /dev/null
+++ b/app/lib/resourcemodeler/features/palette/PaletteProvider.js
@@ -0,0 +1,116 @@
+import {assign} from 'min-dash';
+
+/**
+ * A palette provider for od elements.
+ */
+export default function PaletteProvider(
+    palette, create, elementFactory,
+    spaceTool, lassoTool, handTool, globalConnect, translate) {
+
+  this._create = create;
+  this._elementFactory = elementFactory;
+  this._spaceTool = spaceTool;
+  this._lassoTool = lassoTool;
+  this._handTool = handTool;
+  this._globalConnect = globalConnect;
+  this._translate = translate;
+
+  palette.registerProvider(this);
+}
+
+PaletteProvider.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'spaceTool',
+  'lassoTool',
+  'handTool',
+  'globalConnect',
+  'translate'
+];
+
+
+PaletteProvider.prototype.getPaletteEntries = function(element) {
+
+  var actions = {},
+      create = this._create,
+      elementFactory = this._elementFactory,
+      spaceTool = this._spaceTool,
+      lassoTool = this._lassoTool,
+      handTool = this._handTool,
+      globalConnect = this._globalConnect,
+      translate = this._translate;
+
+  function createAction(type, group, className, title, options) {
+
+    function createListener(event) {
+      var shape = elementFactory.createShape(assign({ type: type }, options));
+      create.start(event, shape);
+    }
+
+    var shortType = type.replace(/^rem:/, '');
+
+    return {
+      group: group,
+      className: className,
+      title: title || translate('Create {type}', { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener
+      }
+    };
+  }
+
+  assign(actions, {
+    'hand-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-hand-tool',
+      title: translate('Activate the hand tool'),
+      action: {
+        click: function(event) {
+          handTool.activateHand(event);
+        }
+      }
+    },
+    'lasso-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-lasso-tool',
+      title: translate('Activate the lasso tool'),
+      action: {
+        click: function(event) {
+          lassoTool.activateSelection(event);
+        }
+      }
+    },
+    'space-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-space-tool',
+      title: translate('Activate the create/remove space tool'),
+      action: {
+        click: function(event) {
+          spaceTool.activateSelection(event);
+        }
+      }
+    },
+    'tool-separator': {
+      group: 'tools',
+      separator: true
+    },
+    'create-object': createAction(
+      'rem:Resource', 'od-elements', 'bpmn-icon-od-class',
+      translate('Create object')
+    ),
+    'object-linker': {
+      group: 'od-elements',
+      className: 'bpmn-icon-connection',
+      title: translate('Link objects'),
+      action: {
+        click: function(event) {
+          globalConnect.start(event);
+        }
+      }
+    }
+  });
+
+  return actions;
+};
diff --git a/app/lib/resourcemodeler/features/palette/index.js b/app/lib/resourcemodeler/features/palette/index.js
new file mode 100644
index 00000000..c40ee78d
--- /dev/null
+++ b/app/lib/resourcemodeler/features/palette/index.js
@@ -0,0 +1,23 @@
+import PaletteModule from 'diagram-js/lib/features/palette';
+import CreateModule from 'diagram-js/lib/features/create';
+import SpaceToolModule from 'diagram-js/lib/features/space-tool';
+import LassoToolModule from 'diagram-js/lib/features/lasso-tool';
+import HandToolModule from 'diagram-js/lib/features/hand-tool';
+import translate from 'diagram-js/lib/i18n/translate';
+import GlobalConnectModule from 'diagram-js/lib/features/global-connect';
+
+import PaletteProvider from './PaletteProvider';
+
+export default {
+  __depends__: [
+    PaletteModule,
+    CreateModule,
+    SpaceToolModule,
+    LassoToolModule,
+    HandToolModule,
+    GlobalConnectModule,
+    translate
+  ],
+  __init__: [ 'paletteProvider' ],
+  paletteProvider: [ 'type', PaletteProvider ]
+};
diff --git a/app/lib/resourcemodeler/features/rules/ODRules.js b/app/lib/resourcemodeler/features/rules/ODRules.js
new file mode 100644
index 00000000..32336795
--- /dev/null
+++ b/app/lib/resourcemodeler/features/rules/ODRules.js
@@ -0,0 +1,303 @@
+import {every} from 'min-dash';
+
+import inherits from 'inherits';
+
+import {is} from '../../util/ModelUtil';
+
+import {isLabel} from '../../util/LabelUtil';
+
+import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';
+import {isAny} from '../modeling/util/ModelingUtil';
+
+
+/**
+ * OD specific modeling rule
+ */
+export default function ODRules(eventBus) {
+  RuleProvider.call(this, eventBus);
+}
+
+inherits(ODRules, RuleProvider);
+
+ODRules.$inject = [ 'eventBus' ];
+
+ODRules.prototype.init = function() {
+
+  this.addRule('connection.start', function(context) {
+    var source = context.source;
+
+    return canStartConnection(source);
+  });
+
+  this.addRule('connection.create', function(context) {
+    var source = context.source,
+        target = context.target,
+        hints = context.hints || {},
+        targetParent = hints.targetParent;
+
+    // temporarily set target parent for scoping
+    // checks to work
+    if (targetParent) {
+      target.parent = targetParent;
+    }
+
+    try {
+      return canConnect(source, target);
+    } finally {
+
+      // unset temporary target parent
+      if (targetParent) {
+        target.parent = null;
+      }
+    }
+  });
+
+  this.addRule('connection.reconnect', function(context) {
+
+    var connection = context.connection,
+        source = context.source,
+        target = context.target;
+
+    return canConnect(source, target, connection);
+  });
+
+  this.addRule('connection.updateWaypoints', function(context) {
+    return {
+      type: context.connection.type
+    };
+  });
+
+  this.addRule('shape.resize', function(context) {
+
+    var shape = context.shape,
+        newBounds = context.newBounds;
+
+    return canResize(shape, newBounds);
+  });
+
+  this.addRule('elements.create', function(context) {
+    var elements = context.elements,
+        position = context.position,
+        target = context.target;
+
+    return every(elements, function(element) {
+      if (element.host) {
+        return canAttach(element, element.host, null, position);
+      }
+
+      return canCreate(element, target, null, position);
+    });
+  });
+
+  this.addRule('elements.move', function(context) {
+
+    var target = context.target,
+        shapes = context.shapes,
+        position = context.position;
+
+    return canAttach(shapes, target, null, position) ||
+      canMove(shapes, target, position);
+  });
+
+  this.addRule('shape.create', function(context) {
+    return canCreate(
+      context.shape,
+      context.target,
+      context.source,
+      context.position
+    );
+  });
+
+  this.addRule('shape.attach', function(context) {
+
+    return canAttach(
+      context.shape,
+      context.target,
+      null,
+      context.position
+    );
+  });
+
+  this.addRule('element.copy', function(context) {
+    var element = context.element,
+        elements = context.elements;
+
+    return canCopy(elements, element);
+  });
+};
+
+ODRules.prototype.canConnect = canConnect;
+
+ODRules.prototype.canMove = canMove;
+
+ODRules.prototype.canAttach = canAttach;
+
+ODRules.prototype.canDrop = canDrop;
+
+ODRules.prototype.canCreate = canCreate;
+
+ODRules.prototype.canReplace = canReplace;
+
+ODRules.prototype.canResize = canResize;
+
+ODRules.prototype.canCopy = canCopy;
+
+/**
+ * Utility functions for rule checking
+ */
+
+function isSame(a, b) {
+  return a === b;
+}
+
+function getParents(element) {
+
+  var parents = [];
+
+  while (element) {
+    element = element.parent;
+
+    if (element) {
+      parents.push(element);
+    }
+  }
+
+  return parents;
+}
+
+function isParent(possibleParent, element) {
+  var allParents = getParents(element);
+  return allParents.indexOf(possibleParent) !== -1;
+}
+
+function isGroup(element) {
+  return is(element, 'rem:Group') && !element.labelTarget;
+}
+
+/**
+ * Checks if given element can be used for starting connection.
+ *
+ * @param  {Element} element
+ * @return {boolean}
+ */
+function canStartConnection(element) {
+  if (nonExistingOrLabel(element)) {
+    return null;
+  }
+
+  return is(element,
+    'rem:Resource'
+  );
+}
+
+function nonExistingOrLabel(element) {
+  return !element || isLabel(element);
+}
+
+
+function canConnect(source, target) {
+  if (nonExistingOrLabel(source) || nonExistingOrLabel(target)) {
+    return null;
+  }
+  if (canConnectLink(source, target)) {
+    return { type: 'rem:Link' };
+  }
+  return false;
+}
+
+function canConnectLink(source, target) {
+  return is(source, 'rem:Resource') && is(target, 'rem:Resource');
+}
+
+/**
+ * Can an element be dropped into the target element
+ *
+ * @return {Boolean}
+ */
+function canDrop(element, target) {
+
+  // can move labels
+  if (isLabel(element) || isGroup(element)) {
+    return true;
+  }
+
+  // drop board elements onto boards
+  return is(element, 'rem:BoardElement') && is(target, 'rem:OdBoard');
+}
+
+function canReplace(elements, target) {
+  return target;
+}
+
+
+function canAttach(elements, target) {
+
+  if (!Array.isArray(elements)) {
+    elements = [ elements ];
+  }
+
+  // only (re-)attach one element at a time
+  if (elements.length !== 1) {
+    return false;
+  }
+
+  var element = elements[0];
+
+  // do not attach labels
+  if (isLabel(element)) {
+    return false;
+  }
+
+  if (is(target, 'rem:BoardElement')) {
+    return false;
+  }
+
+  return 'attach';
+}
+
+
+function canMove(elements, target) {
+
+  // allow default move check to start move operation
+  if (!target) {
+    return true;
+  }
+
+  return elements.every(function(element) {
+    return canDrop(element, target);
+  });
+}
+
+function canCreate(shape, target, source, position) {
+
+  if (!target) {
+    return false;
+  }
+
+  if (isLabel(shape) || isGroup(shape)) {
+    return true;
+  }
+
+  if (isSame(source, target)) {
+    return false;
+  }
+
+  // ensure we do not drop the element
+  // into source
+  if (source && isParent(source, target)) {
+    return false;
+  }
+
+  return canDrop(shape, target, position);
+}
+
+function canResize(shape, newBounds) {
+  if (isAny(shape, [ 'rem:Resource' ])) {
+    return !newBounds || (newBounds.width >= 50 && newBounds.height >= 50);
+  }
+  return false;
+}
+
+function canCopy(elements, element) {
+  return true;
+}
diff --git a/app/lib/resourcemodeler/features/rules/index.js b/app/lib/resourcemodeler/features/rules/index.js
new file mode 100644
index 00000000..3cb0fe85
--- /dev/null
+++ b/app/lib/resourcemodeler/features/rules/index.js
@@ -0,0 +1,11 @@
+import RulesModule from 'diagram-js/lib/features/rules';
+
+import ODRules from './ODRules';
+
+export default {
+  __depends__: [
+    RulesModule
+  ],
+  __init__: [ 'odRules' ],
+  odRules: [ 'type', ODRules ]
+};
diff --git a/app/lib/resourcemodeler/features/snapping/ODCreateMoveSnapping.js b/app/lib/resourcemodeler/features/snapping/ODCreateMoveSnapping.js
new file mode 100644
index 00000000..9422a3b2
--- /dev/null
+++ b/app/lib/resourcemodeler/features/snapping/ODCreateMoveSnapping.js
@@ -0,0 +1,31 @@
+import inherits from 'inherits';
+
+import CreateMoveSnapping from 'diagram-js/lib/features/snapping/CreateMoveSnapping';
+
+/**
+ * Snap during create and move.
+ *
+ * @param {EventBus} eventBus
+ * @param {Injector} injector
+ */
+export default function ODCreateMoveSnapping(injector) {
+  injector.invoke(CreateMoveSnapping, this);
+}
+
+inherits(ODCreateMoveSnapping, CreateMoveSnapping);
+
+ODCreateMoveSnapping.$inject = [
+  'injector'
+];
+
+ODCreateMoveSnapping.prototype.initSnap = function(event) {
+  return CreateMoveSnapping.prototype.initSnap.call(this, event);
+};
+
+ODCreateMoveSnapping.prototype.addSnapTargetPoints = function(snapPoints, shape, target) {
+  return CreateMoveSnapping.prototype.addSnapTargetPoints.call(this, snapPoints, shape, target);
+};
+
+ODCreateMoveSnapping.prototype.getSnapTargets = function(shape, target) {
+  return CreateMoveSnapping.prototype.getSnapTargets.call(this, shape, target);
+};
diff --git a/app/lib/resourcemodeler/features/snapping/ObjectConnectSnapping.js b/app/lib/resourcemodeler/features/snapping/ObjectConnectSnapping.js
new file mode 100644
index 00000000..ab12862b
--- /dev/null
+++ b/app/lib/resourcemodeler/features/snapping/ObjectConnectSnapping.js
@@ -0,0 +1,110 @@
+import {mid, setSnapped} from 'diagram-js/lib/features/snapping/SnapUtil';
+
+import {isCmd} from 'diagram-js/lib/features/keyboard/KeyboardUtil';
+
+import {isAny} from '../modeling/util/ModelingUtil';
+
+import {some} from 'min-dash';
+
+var HIGHER_PRIORITY = 1250;
+
+var OBJECT_BOUNDS_PADDING = 10;
+
+var TARGET_CENTER_PADDING = 20;
+
+var AXES = [ 'x', 'y' ];
+
+/**
+ * Snap during connect.
+ *
+ * @param {EventBus} eventBus
+ */
+export default function ObjectConnectSnapping(eventBus) {
+  eventBus.on([
+    'connect.hover',
+    'connect.move',
+    'connect.end',
+  ], HIGHER_PRIORITY, function(event) {
+    var context = event.context,
+        canExecute = context.canExecute,
+        start = context.start,
+        hover = context.hover;
+
+    // do NOT snap on CMD
+    if (event.originalEvent && isCmd(event.originalEvent)) {
+      return;
+    }
+
+    if (!context.initialConnectionStart) {
+      context.initialConnectionStart = context.connectionStart;
+    }
+
+    // snap hover
+    if (canExecute && hover) {
+      snapToShape(event, hover, getTargetBoundsPadding());
+    }
+
+    if (hover && isAnyType(canExecute, [
+      'rem:Link',
+    ])) {
+      context.connectionStart = mid(start);
+
+      // snap hover
+      if (isAny(hover, [ 'rem:Resource' ])) {
+        snapToTargetMid(event, hover);
+      }
+    }
+  });
+}
+
+ObjectConnectSnapping.$inject = [ 'eventBus' ];
+
+
+// helpers //////////
+
+// snap to target if event in target
+function snapToShape(event, target, padding) {
+  AXES.forEach(function(axis) {
+    var dimensionForAxis = getDimensionForAxis(axis, target);
+
+    if (event[ axis ] < target[ axis ] + padding) {
+      setSnapped(event, axis, target[ axis ] + padding);
+    } else if (event[ axis ] > target[ axis ] + dimensionForAxis - padding) {
+      setSnapped(event, axis, target[ axis ] + dimensionForAxis - padding);
+    }
+  });
+}
+
+// snap to target mid if event in target mid
+function snapToTargetMid(event, target) {
+  var targetMid = mid(target);
+
+  AXES.forEach(function(axis) {
+    if (isMid(event, target, axis)) {
+      setSnapped(event, axis, targetMid[ axis ]);
+    }
+  });
+}
+
+function isType(attrs, type) {
+  return attrs && attrs.type === type;
+}
+
+function isAnyType(attrs, types) {
+  return some(types, function(type) {
+    return isType(attrs, type);
+  });
+}
+
+function getDimensionForAxis(axis, element) {
+  return axis === 'x' ? element.width : element.height;
+}
+
+function getTargetBoundsPadding() {
+  return OBJECT_BOUNDS_PADDING;
+}
+
+function isMid(event, target, axis) {
+  return event[ axis ] > target[ axis ] + TARGET_CENTER_PADDING
+    && event[ axis ] < target[ axis ] + getDimensionForAxis(axis, target) - TARGET_CENTER_PADDING;
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/features/snapping/index.js b/app/lib/resourcemodeler/features/snapping/index.js
new file mode 100644
index 00000000..19a31a09
--- /dev/null
+++ b/app/lib/resourcemodeler/features/snapping/index.js
@@ -0,0 +1,13 @@
+import ODCreateMoveSnapping from './ODCreateMoveSnapping';
+import SnappingModule from 'diagram-js/lib/features/snapping';
+import ObjectConnectSnapping from './ObjectConnectSnapping';
+
+export default {
+  __depends__: [ SnappingModule ],
+  __init__: [
+    'connectSnapping',
+    'createMoveSnapping'
+  ],
+  connectSnapping: [ 'type', ObjectConnectSnapping ],
+  createMoveSnapping: [ 'type', ODCreateMoveSnapping ]
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/import/Importer.js b/app/lib/resourcemodeler/import/Importer.js
new file mode 100644
index 00000000..73fa44b5
--- /dev/null
+++ b/app/lib/resourcemodeler/import/Importer.js
@@ -0,0 +1,92 @@
+import OdTreeWalker from './OdTreeWalker';
+
+/**
+ * The importodDi:agram result.
+ *
+ * @typedef {Object} importodDi:agramResult
+ *
+ * @property {Array<string>} warnings
+ */
+
+/**
+* The importodDi:agram error.
+*
+* @typedef {Error} importodDi:agramError
+*
+* @property {Array<string>} warnings
+*/
+
+/**
+ * Import the definitions into a diagram.
+ *
+ * Errors and warnings are reported through the specified callback.
+ *
+ * @param  {djs.Diagram} diagram
+ * @param  {ModdleElement<Definitions>} definitions
+ * @param  {ModdleElement<PotitRootBoard>} [rootBoard] the diagram to be rendered
+ * (if not provided, the first one will be rendered)
+ *
+ * Returns {Promise<importodDi:agramResult, importodDi:agramError>}
+ */
+export function importOdDiagram(diagram, definitions, rootBoard) {
+
+  var importer,
+      eventBus,
+      translate;
+
+  var error,
+      warnings = [];
+
+  /**
+   * Walk the diagram semantically, importing (=drawing)
+   * all elements you encounter.
+   *
+   * @param {ModdleElement<Definitions>} definitions
+   * @param {ModdleElement<ODRootBoard>} rootBoard
+   */
+  function render(definitions, rootBoard) {
+
+    var visitor = {
+
+      root: function(element) {
+        return importer.add(element);
+      },
+
+      element: function(element, parentShape) {
+        return importer.add(element, parentShape);
+      },
+
+      error: function(message, context) {
+        warnings.push({ message: message, context: context });
+      }
+    };
+
+    var walker = new OdTreeWalker(visitor, translate);
+
+    // traverse xml document model,
+    // starting at definitions
+    walker.handleDefinitions(definitions, rootBoard);
+  }
+
+  return new Promise(function(resolve, reject) {
+    try {
+      importer = diagram.get('odImporter');
+      eventBus = diagram.get('eventBus');
+      translate = diagram.get('translate');
+
+      eventBus.fire('import.render.start', { definitions: definitions });
+
+      render(definitions, rootBoard);
+
+      eventBus.fire('import.render.complete', {
+        error: error,
+        warnings: warnings,
+        rootBoard: rootBoard
+      });
+
+      return resolve({ warnings: warnings });
+    } catch (e) {
+      return reject(e);
+    }
+  });
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/import/OdImporter.js b/app/lib/resourcemodeler/import/OdImporter.js
new file mode 100644
index 00000000..ec75c17c
--- /dev/null
+++ b/app/lib/resourcemodeler/import/OdImporter.js
@@ -0,0 +1,273 @@
+import {assign} from 'min-dash';
+
+import {is} from '../util/ModelUtil';
+
+import {getExternalLabelBounds, isLabelExternal} from '../util/LabelUtil';
+
+import {getLabel} from '../features/label-editing/LabelUtil';
+
+import {elementToString} from './Util';
+import {getMid} from 'diagram-js/lib/layout/LayoutUtil';
+
+
+function elementData(semantic, attrs) {
+  return assign({
+    id: semantic.id,
+    type: semantic.$type,
+    businessObject: semantic
+  }, attrs);
+}
+
+function notYetDrawn(translate, semantic, refSemantic, property) {
+  return new Error(translate('element {element} referenced by {referenced}#{property} not yet drawn', {
+    element: elementToString(refSemantic),
+    referenced: elementToString(semantic),
+    property: property
+  }));
+}
+
+
+/**
+ * An importer that adds postit elements to the canvas
+ *
+ * @param {EventBus} eventBus
+ * @param {Canvas} canvas
+ * @param {ElementFactory} elementFactory
+ * @param {ElementRegistry} elementRegistry
+ * @param {Function} translate
+ * @param {TextRenderer} textRenderer
+ */
+export default function OdImporter(
+    eventBus, canvas, elementFactory,
+    elementRegistry, translate, textRenderer) {
+
+  this._eventBus = eventBus;
+  this._canvas = canvas;
+  this._elementFactory = elementFactory;
+  this._elementRegistry = elementRegistry;
+  this._translate = translate;
+  this._textRenderer = textRenderer;
+}
+
+OdImporter.$inject = [
+  'eventBus',
+  'canvas',
+  'elementFactory',
+  'elementRegistry',
+  'translate',
+  'textRenderer'
+];
+
+
+/**
+ * Add od element (semantic) to the canvas onto the
+ * specified parent shape.
+ */
+OdImporter.prototype.add = function(semantic, parentElement) {
+
+  var di = semantic.di,
+      element,
+      translate = this._translate,
+      hidden;
+
+  var parentIndex;
+
+  // ROOT ELEMENT
+  // handle the special case that we deal with a
+  // invisible root element
+  if (is(di, 'odDi:OdPlane')) {
+
+    // add a virtual element (not being drawn)
+    element = this._elementFactory.createRoot(elementData(semantic));
+
+    this._canvas.setRootElement(element);
+  }
+
+  // SHAPE
+  else if (is(di, 'odDi:OdShape')) {
+
+    var isFrame = isFrameElement(semantic);
+
+    hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
+
+    var bounds = semantic.di.bounds;
+
+    element = this._elementFactory.createShape(elementData(semantic, {
+      hidden: hidden,
+      x: Math.round(bounds.x),
+      y: Math.round(bounds.y),
+      width: Math.round(bounds.width),
+      height: Math.round(bounds.height),
+      isFrame: isFrame
+    }));
+
+    this._canvas.addShape(element, parentElement, parentIndex);
+  }
+
+  // CONNECTION
+  else if (is(di, 'odDi:Link')) {
+
+    var source = this._getSource(semantic),
+        target = this._getTarget(semantic);
+
+    hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
+
+    element = this._elementFactory.createConnection(elementData(semantic, {
+      hidden: hidden,
+      source: source,
+      target: target,
+      waypoints: getWaypoints(semantic, source, target)
+    }));
+
+    this._canvas.addConnection(element, parentElement, 0);
+  }
+
+  else {
+    throw new Error(translate('unknown di {di} for element {semantic}', {
+      di: elementToString(di),
+      semantic: elementToString(semantic)
+    }));
+  }
+
+  // (optional) LABEL
+  if (isLabelExternal(semantic) && getLabel(element)) {
+    this.addLabel(semantic, element);
+  }
+
+
+  this._eventBus.fire('boardElement.added', { element: element });
+
+  return element;
+};
+
+function getWaypoints(bo, source, target) {
+
+  var waypoints = bo.di.waypoint;
+
+  if (!waypoints || waypoints.length < 2) {
+    return [ getMid(source), getMid(target) ];
+  }
+
+  return waypoints.map(function(p) {
+    return { x: p.x, y: p.y };
+  });
+}
+
+
+/**
+ * Attach the boundary element to the given host
+ *
+ * @param {ModdleElement} boundarySemantic
+ * @param {djs.model.Base} boundaryElement
+ */
+OdImporter.prototype._attachBoundary = function(boundarySemantic, boundaryElement) {
+  var translate = this._translate;
+  var hostSemantic = boundarySemantic.attachedToRef;
+
+  if (!hostSemantic) {
+    throw new Error(translate('missing {semantic}#attachedToRef', {
+      semantic: elementToString(boundarySemantic)
+    }));
+  }
+
+  var host = this._elementRegistry.get(hostSemantic.id),
+      attachers = host && host.attachers;
+
+  if (!host) {
+    throw notYetDrawn(translate, boundarySemantic, hostSemantic, 'attachedToRef');
+  }
+
+  // wire element.host <> host.attachers
+  boundaryElement.host = host;
+
+  if (!attachers) {
+    host.attachers = attachers = [];
+  }
+
+  if (attachers.indexOf(boundaryElement) === -1) {
+    attachers.push(boundaryElement);
+  }
+};
+
+
+/**
+ * add label for an element
+ */
+OdImporter.prototype.addLabel = function(semantic, element) {
+  var bounds,
+      text,
+      label;
+
+  bounds = getExternalLabelBounds(semantic, element);
+
+  text = getLabel(element);
+
+  if (text) {
+
+    // get corrected bounds from actual layouted text
+    bounds = this._textRenderer.getExternalLabelBounds(bounds, text);
+  }
+
+  label = this._elementFactory.createLabel(elementData(semantic, {
+    id: semantic.id + '_label',
+    labelTarget: element,
+    type: 'label',
+    hidden: element.hidden || !getLabel(element),
+    x: Math.round(bounds.x),
+    y: Math.round(bounds.y),
+    width: Math.round(bounds.width),
+    height: Math.round(bounds.height)
+  }));
+
+  return this._canvas.addShape(label, element.parent);
+};
+
+/**
+ * Return the drawn connection end based on the given side.
+ *
+ * @throws {Error} if the end is not yet drawn
+ */
+OdImporter.prototype._getEnd = function(semantic, side) {
+
+  var element,
+      refSemantic,
+      translate = this._translate;
+
+  refSemantic = semantic[side + 'Ref'];
+
+
+  element = refSemantic && this._getElement(refSemantic);
+
+  if (element) {
+    return element;
+  }
+
+  if (refSemantic) {
+    throw notYetDrawn(translate, semantic, refSemantic, side + 'Ref');
+  } else {
+    throw new Error(translate('{semantic}#{side} Ref not specified', {
+      semantic: elementToString(semantic),
+      side: side
+    }));
+  }
+};
+
+OdImporter.prototype._getSource = function(semantic) {
+  return this._getEnd(semantic, 'source');
+};
+
+OdImporter.prototype._getTarget = function(semantic) {
+  return this._getEnd(semantic, 'target');
+};
+
+
+OdImporter.prototype._getElement = function(semantic) {
+  return this._elementRegistry.get(semantic.id);
+};
+
+
+// helpers //////////
+
+function isFrameElement(semantic) {
+  return is(semantic, 'rem:Group');
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/import/OdTreeWalker.js b/app/lib/resourcemodeler/import/OdTreeWalker.js
new file mode 100644
index 00000000..f509b469
--- /dev/null
+++ b/app/lib/resourcemodeler/import/OdTreeWalker.js
@@ -0,0 +1,250 @@
+import {find, forEach} from 'min-dash';
+
+import Refs from 'object-refs';
+
+import {elementToString} from './Util';
+
+var diRefs = new Refs(
+  { name: 'boardElement', enumerable: true },
+  { name: 'di', configurable: true }
+);
+
+/**
+ * Returns true if an element has the given meta-model type
+ *
+ * @param  {ModdleElement}  element
+ * @param  {String}         type
+ *
+ * @return {Boolean}
+ */
+function is(element, type) {
+  return element.$instanceOf(type);
+}
+
+
+/**
+ * Find a suitable display candidate for definitions where the DI does not
+ * correctly specify one.
+ */
+function findDisplayCandidate(definitions) {
+  return find(definitions.rootElements, function(e) {
+    return is(e, 'rem:OdBoard');
+  });
+}
+
+
+export default function OdTreeWalker(handler, translate) {
+
+  // list of containers already walked
+  var handledElements = {};
+
+  // list of elements to handle deferred to ensure
+  // prerequisites are drawn
+  var deferred = [];
+
+  // Helpers //////////////////////
+
+  function visitRoot(element, diagram) {
+    return handler.root(element, diagram);
+  }
+
+  function visit(element, ctx) {
+
+    var gfx = element.gfx;
+
+    // avoid multiple rendering of elements
+    if (gfx) {
+      throw new Error(
+        translate('already rendered {element}', { element: elementToString(element) })
+      );
+    }
+
+    // call handler
+    return handler.element(element, ctx);
+  }
+
+  function visitIfDi(element, ctx) {
+
+    try {
+      var gfx = element.di && visit(element, ctx);
+
+      handled(element);
+
+      return gfx;
+    } catch (e) {
+      logError(e.message, { element: element, error: e });
+
+      console.error(translate('failed to import {element}', { element: elementToString(element) }));
+      console.error(e);
+    }
+  }
+
+  function logError(message, context) {
+    handler.error(message, context);
+  }
+
+  function handled(element) {
+    handledElements[element.id] = element;
+  }
+
+  // DI handling //////////////////////
+
+  function registerDi(di) {
+    var boardElement = di.boardElement;
+
+    if (boardElement) {
+      if (boardElement.di) {
+        logError(
+          translate('multiple DI elements defined for {element}', {
+            element: elementToString(boardElement)
+          }),
+          { element: boardElement }
+        );
+      } else {
+        diRefs.bind(boardElement, 'di');
+        boardElement.di = di;
+      }
+    } else {
+      logError(
+        translate('no boardElement referenced in {element}', {
+          element: elementToString(di)
+        }),
+        { element: di }
+      );
+    }
+  }
+
+  function handleBoard(diagram) {
+    handlePlane(diagram.plane);
+  }
+
+  function handlePlane(plane) {
+    registerDi(plane);
+
+    forEach(plane.planeElement, handlePlaneElement);
+  }
+
+  function handlePlaneElement(planeElement) {
+    registerDi(planeElement);
+  }
+
+  function handleSequenceFlow(sequenceFlow, context) {
+    visitIfDi(sequenceFlow, context);
+  }
+
+
+  // Semantic handling //////////////////////
+
+  /**
+     * Handle definitions and return the rendered board (if any)
+     *
+     * @param {ModdleElement} definitions to walk and import
+     * @param {ModdleElement} [rootBoard] specific board to import and display
+     *
+     * @throws {Error} if no diagram to display could be found
+     */
+  function handleDefinitions(definitions, rootBoard) {
+
+    // make sure we walk the correct boardElement
+
+    var rootBoards = definitions.rootBoards;
+
+    if (rootBoard && rootBoards.indexOf(rootBoard) === -1) {
+      throw new Error(translate('rootBoard not part of rem:Definitions'));
+    }
+
+    if (!rootBoard && rootBoards && rootBoards.length) {
+      rootBoard = rootBoards[0];
+    }
+
+    // no root board -> nothing to import
+    if (!rootBoard) {
+      throw new Error(translate('no rootBoard to display'));
+    }
+
+    // load DI from selected root board only
+    handleBoard(rootBoard);
+
+    var plane = rootBoard.plane;
+
+    if (!plane) {
+      throw new Error(translate(
+        'no plane for {element}',
+        { element: elementToString(rootBoard) }
+      ));
+    }
+
+    var rootElement = plane.boardElement;
+
+    // ensure we default to a suitable display candidate (board),
+    // even if non is specified in DI
+    if (!rootElement) {
+      rootElement = findDisplayCandidate(definitions);
+
+      if (!rootElement) {
+        throw new Error(translate('no board to display'));
+      } else {
+
+        logError(
+          translate('correcting missing boardElement on {plane} to {rootElement}', {
+            plane: elementToString(plane),
+            rootElement: elementToString(rootElement)
+          })
+        );
+
+        // correct DI on the fly
+        plane.boardElement = rootElement;
+        registerDi(plane);
+      }
+    }
+
+    var ctx = visitRoot(rootElement, plane);
+
+    if (is(rootElement, 'rem:OdBoard')) {
+      handleOdBoard(rootElement, ctx);
+    }
+
+    // handle all deferred elements
+    handleDeferred(deferred);
+  }
+
+  function handleBoardElements(boardElements, context) {
+    forEach(boardElements, function(element) {
+      if (is(element, 'rem:Link')) {
+        deferred.push(function() {
+          handleSequenceFlow(element, context);
+        });
+      } else {
+        visitIfDi(element, context);
+      }
+    });
+  }
+
+  function handleOdBoard(board, context) {
+    handleBoardElements(board.boardElements, context);
+
+    // log board handled
+    handled(board);
+  }
+
+  function handleDeferred() {
+
+    var fn;
+
+    // drain deferred until empty
+    while (deferred.length) {
+      fn = deferred.shift();
+
+      fn();
+    }
+  }
+
+
+  // API //////////////////////
+
+  return {
+    handleDeferred: handleDeferred,
+    handleDefinitions: handleDefinitions,
+    registerDi: registerDi
+  };
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/import/Util.js b/app/lib/resourcemodeler/import/Util.js
new file mode 100644
index 00000000..0eef1f43
--- /dev/null
+++ b/app/lib/resourcemodeler/import/Util.js
@@ -0,0 +1,7 @@
+export function elementToString(e) {
+  if (!e) {
+    return '<null>';
+  }
+
+  return '<' + e.$type + (e.id ? ' id="' + e.id : '') + '" />';
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/import/index.js b/app/lib/resourcemodeler/import/index.js
new file mode 100644
index 00000000..51688f46
--- /dev/null
+++ b/app/lib/resourcemodeler/import/index.js
@@ -0,0 +1,10 @@
+import translate from 'diagram-js/lib/i18n/translate';
+
+import OdImporter from './OdImporter';
+
+export default {
+  __depends__: [
+    translate
+  ],
+  odImporter: [ 'type', OdImporter ]
+};
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/moddle/Moddle.js b/app/lib/resourcemodeler/moddle/Moddle.js
new file mode 100644
index 00000000..f7ea1c09
--- /dev/null
+++ b/app/lib/resourcemodeler/moddle/Moddle.js
@@ -0,0 +1,93 @@
+import {assign, isString} from 'min-dash';
+
+import {Moddle} from 'moddle';
+
+import {Reader, Writer} from 'moddle-xml';
+
+/**
+ * A sub class of {@link Moddle} with support for import and export of Postit-js xml files.
+ *
+ * @class ODModdle
+ *
+ * @extends Moddle
+ *
+ * @param {Object|Array} packages to use for instantiating the model
+ * @param {Object} [options] additional options to pass over
+ */
+export default function ODModdle(packages, options) {
+  Moddle.call(this, packages, options);
+}
+
+ODModdle.prototype = Object.create(Moddle.prototype);
+
+/**
+ * The fromXML result.
+ *
+ * @typedef {Object} ParseResult
+ *
+ * @property {ModdleElement} rootElement
+ * @property {Array<Object>} references
+ * @property {Array<Error>} warnings
+ * @property {Object} elementsById - a mapping containing each ID -> ModdleElement
+ */
+
+/**
+ * The fromXML error.
+ *
+ * @typedef {Error} ParseError
+ *
+ * @property {Array<Error>} warnings
+ */
+
+/**
+ * Instantiates a od model tree from a given xml string.
+ *
+ * @param {String}   xmlStr
+ * @param {String}   [typeName='rem:Definitions'] name of the root element
+ * @param {Object}   [options]  options to pass to the underlying reader
+ *
+ * @returns {Promise<ParseResult, ParseError>}
+ */
+ODModdle.prototype.fromXML = function(xmlStr, typeName, options) {
+  if (!isString(typeName)) {
+    options = typeName;
+    typeName = 'rem:Definitions';
+  }
+
+  var reader = new Reader(assign({ model: this, lax: false }, options));
+  var rootHandler = reader.handler(typeName);
+
+  return reader.fromXML(xmlStr, rootHandler);
+};
+
+/**
+ * The toXML result.
+ *
+ * @typedef {Object} SerializationResult
+ *
+ * @property {String} xml
+ */
+
+/**
+ * Serializes a od object tree to XML.
+ *
+ * @param {String}   element    the root element, typically an instance of `rem:Definitions`
+ * @param {Object}   [options]  to pass to the underlying writer
+ *
+ * @returns {Promise<SerializationResult, Error>}
+ */
+ODModdle.prototype.toXML = function(element, options) {
+  var writer = new Writer(options);
+
+  return new Promise(function(resolve, reject) {
+    try {
+      var result = writer.toXML(element);
+
+      return resolve({
+        xml: result
+      });
+    } catch (err) {
+      return reject(err);
+    }
+  });
+};
diff --git a/app/lib/resourcemodeler/moddle/index.js b/app/lib/resourcemodeler/moddle/index.js
new file mode 100644
index 00000000..8284f0e7
--- /dev/null
+++ b/app/lib/resourcemodeler/moddle/index.js
@@ -0,0 +1,19 @@
+import {assign} from 'min-dash';
+
+import Moddle from './Moddle';
+
+import ODDescriptors from './resources/rem.json';
+import DiDescriptors from './resources/odDi.json';
+import DcDescriptors from './resources/dc.json';
+
+var packages = {
+  rem: ODDescriptors,
+  odDi: DiDescriptors,
+  dc: DcDescriptors,
+};
+
+export default function(additionalPackages, options) {
+  var pks = assign({}, packages, additionalPackages);
+
+  return new Moddle(pks, options);
+}
diff --git a/app/lib/resourcemodeler/moddle/resources/dc.json b/app/lib/resourcemodeler/moddle/resources/dc.json
new file mode 100644
index 00000000..49f0008f
--- /dev/null
+++ b/app/lib/resourcemodeler/moddle/resources/dc.json
@@ -0,0 +1,99 @@
+{
+  "name": "dc",
+  "uri": "http://www.omg.org/spec/DD/20100524/DC",
+  "prefix": "dc",
+  "types": [
+    {
+      "name": "Boolean"
+    },
+    {
+      "name": "Integer"
+    },
+    {
+      "name": "Real"
+    },
+    {
+      "name": "String"
+    },
+    {
+      "name": "Font",
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "size",
+          "type": "Real",
+          "isAttr": true
+        },
+        {
+          "name": "isBold",
+          "type": "Boolean",
+          "isAttr": true
+        },
+        {
+          "name": "isItalic",
+          "type": "Boolean",
+          "isAttr": true
+        },
+        {
+          "name": "isUnderline",
+          "type": "Boolean",
+          "isAttr": true
+        },
+        {
+          "name": "isStrikeThrough",
+          "type": "Boolean",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Point",
+      "properties": [
+        {
+          "name": "x",
+          "type": "Real",
+          "default": "0",
+          "isAttr": true
+        },
+        {
+          "name": "y",
+          "type": "Real",
+          "default": "0",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Bounds",
+      "properties": [
+        {
+          "name": "x",
+          "type": "Real",
+          "default": "0",
+          "isAttr": true
+        },
+        {
+          "name": "y",
+          "type": "Real",
+          "default": "0",
+          "isAttr": true
+        },
+        {
+          "name": "width",
+          "type": "Real",
+          "isAttr": true
+        },
+        {
+          "name": "height",
+          "type": "Real",
+          "isAttr": true
+        }
+      ]
+    }
+  ],
+  "associations": []
+}
diff --git a/app/lib/resourcemodeler/moddle/resources/odDi.json b/app/lib/resourcemodeler/moddle/resources/odDi.json
new file mode 100644
index 00000000..49d49528
--- /dev/null
+++ b/app/lib/resourcemodeler/moddle/resources/odDi.json
@@ -0,0 +1,325 @@
+{
+  "name": "ODDI",
+  "uri": "http://tk/schema/odDi",
+  "prefix": "odDi",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "types": [
+    {
+      "name": "OdRootBoard",
+      "properties": [
+        {
+          "name": "plane",
+          "type": "OdPlane",
+          "redefines": "Board#rootElement"
+        },
+        {
+          "name": "labelStyle",
+          "type": "OdLabelStyle",
+          "isMany": true
+        },
+        {
+          "name": "objectiveRef",
+          "isAttr": true,
+          "isReference": true,
+          "type": "dep:Objective"
+        }
+      ],
+      "superClass": ["Board"]
+    },
+    {
+      "name": "OdPlane",
+      "properties": [
+        {
+          "name": "boardElement",
+          "isAttr": true,
+          "isReference": true,
+          "type": "od:BoardElement",
+          "redefines": "BoardElement#modelElement"
+        }
+      ],
+      "superClass": ["Plane"]
+    },
+    {
+      "name": "OdShape",
+      "properties": [
+        {
+          "name": "boardElement",
+          "isAttr": true,
+          "isReference": true,
+          "type": "od:BoardElement",
+          "redefines": "BoardElement#modelElement"
+        },
+        {
+          "name": "label",
+          "type": "OdLabel"
+        }
+      ],
+      "superClass": ["LabeledShape"]
+    },
+    {
+      "name": "Link",
+      "properties": [
+        {
+          "name": "label",
+          "type": "OdLabel"
+        },
+        {
+          "name": "boardElement",
+          "isAttr": true,
+          "isReference": true,
+          "type": "od:BoardElement",
+          "redefines": "BoardElement#modelElement"
+        },
+        {
+          "name": "sourceElement",
+          "isAttr": true,
+          "isReference": true,
+          "type": "od:BoardElement",
+          "redefines": "Edge#source"
+        },
+        {
+          "name": "targetElement",
+          "isAttr": true,
+          "isReference": true,
+          "type": "od:BoardElement",
+          "redefines": "Edge#target"
+        },
+        {
+          "name": "messageVisibleKind",
+          "type": "MessageVisibleKind",
+          "isAttr": true,
+          "default": "initiating"
+        }
+      ],
+      "superClass": [
+        "LabeledEdge"
+      ]
+    },
+    {
+      "name": "OdLabel",
+      "properties": [
+        {
+          "name": "labelStyle",
+          "type": "OdLabelStyle",
+          "isAttr": true,
+          "isReference": true,
+          "redefines": "BoardElement#style"
+        }
+      ],
+      "superClass": ["Label"]
+    },
+    {
+      "name": "OdLabelStyle",
+      "properties": [
+        {
+          "name": "font",
+          "type": "dc:Font"
+        }
+      ],
+      "superClass": ["Style"]
+    },
+    {
+      "name": "BoardElement",
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "isId": true,
+          "type": "String"
+        },
+        {
+          "name": "owningBoard",
+          "type": "Board",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true
+        },
+        {
+          "name": "owningElement",
+          "type": "BoardElement",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true
+        },
+        {
+          "name": "modelElement",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true,
+          "type": "Element"
+        },
+        {
+          "name": "style",
+          "type": "Style",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true
+        }
+      ]
+    },
+    {
+      "name": "Node",
+      "isAbstract": true,
+      "superClass": ["BoardElement"]
+    },
+    {
+      "name": "Edge",
+      "isAbstract": true,
+      "superClass": [
+        "BoardElement"
+      ],
+      "properties": [
+        {
+          "name": "source",
+          "type": "od:BoardElement",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true
+        },
+        {
+          "name": "target",
+          "type": "od:BoardElement",
+          "isReadOnly": true,
+          "isVirtual": true,
+          "isReference": true
+        },
+        {
+          "name": "waypoint",
+          "isUnique": false,
+          "isMany": true,
+          "type": "dc:Point",
+          "xml": {
+            "serialize": "xsi:type"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Board",
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "isId": true,
+          "type": "String"
+        },
+        {
+          "name": "rootElement",
+          "type": "BoardElement",
+          "isReadOnly": true,
+          "isVirtual": true
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resolution",
+          "isAttr": true,
+          "type": "Real"
+        },
+        {
+          "name": "ownedStyle",
+          "type": "Style",
+          "isReadOnly": true,
+          "isMany": true,
+          "isVirtual": true
+        }
+      ]
+    },
+    {
+      "name": "Shape",
+      "isAbstract": true,
+      "superClass": ["Node"],
+      "properties": [
+        {
+          "name": "bounds",
+          "type": "dc:Bounds"
+        }
+      ]
+    },
+    {
+      "name": "Plane",
+      "isAbstract": true,
+      "superClass": ["Node"],
+      "properties": [
+        {
+          "name": "planeElement",
+          "type": "BoardElement",
+          "subsettedProperty": "BoardElement-ownedElement",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "LabeledEdge",
+      "isAbstract": true,
+      "superClass": ["Edge"],
+      "properties": [
+        {
+          "name": "ownedLabel",
+          "type": "Label",
+          "isReadOnly": true,
+          "subsettedProperty": "BoardElement-ownedElement",
+          "isMany": true,
+          "isVirtual": true
+        }
+      ]
+    },
+    {
+      "name": "LabeledShape",
+      "isAbstract": true,
+      "superClass": ["Shape"],
+      "properties": [
+        {
+          "name": "ownedLabel",
+          "type": "Label",
+          "isReadOnly": true,
+          "subsettedProperty": "BoardElement-ownedElement",
+          "isMany": true,
+          "isVirtual": true
+        }
+      ]
+    },
+    {
+      "name": "Label",
+      "isAbstract": true,
+      "superClass": ["Node"],
+      "properties": [
+        {
+          "name": "bounds",
+          "type": "dc:Bounds"
+        }
+      ]
+    },
+    {
+      "name": "Style",
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "isId": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Extension",
+      "properties": [
+        {
+          "name": "values",
+          "isMany": true,
+          "type": "Element"
+        }
+      ]
+    }
+  ],
+  "enumerations": [],
+  "associations": []
+}
diff --git a/app/lib/resourcemodeler/moddle/resources/rem.json b/app/lib/resourcemodeler/moddle/resources/rem.json
new file mode 100644
index 00000000..954a9ba4
--- /dev/null
+++ b/app/lib/resourcemodeler/moddle/resources/rem.json
@@ -0,0 +1,152 @@
+{
+  "name": "Resource Model",
+  "uri": "http://tk/schema/od",
+  "prefix": "rem",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "types": [
+    {
+      "name": "BoardElement",
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String",
+          "isId": true
+        }
+      ]
+    },
+    {
+      "name": "Resource",
+      "superClass": [
+        "BoardElement"
+      ],
+      "properties": [
+        {
+          "name": "links",
+          "isMany": true,
+          "type": "Link",
+          "isReference": true
+        },
+        {
+          "name": "capacity",
+          "isAttr": true,
+          "type": "Integer"
+        },
+        {
+          "name": "roles",
+          "isMany": true,
+          "type": "rom:Role",
+          "isReference": true
+        }, 
+        {
+          "name": "availabilityStart",
+          "isAttr": true,
+          "type": "Integer"
+        },
+        {
+          "name": "availabilityEnd",
+          "isAttr": true,
+          "type": "Integer"
+        }
+      ]
+    },
+    {
+      "name": "Link",
+      "superClass": [
+        "BoardElement"
+      ],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceRef",
+          "isAttr": true,
+          "isReference": true,
+          "type": "Resource"
+        },
+        {
+          "name": "targetRef",
+          "isAttr": true,
+          "isReference": true,
+          "type": "Resource"
+        }
+      ]
+    },
+    {
+      "name": "OdBoard",
+      "superClass": [
+        "RootElement"
+      ],
+      "properties": [
+        {
+          "name": "boardElements",
+          "isMany": true,
+          "type": "BoardElement"
+        }
+      ]
+    },
+    {
+      "name": "RootElement",
+      "isAbstract": true,
+      "superClass": [
+        "BoardElement"
+      ]
+    },
+    {
+      "name": "Definitions",
+      "superClass": [
+        "BoardElement"
+      ],
+      "properties": [
+        {
+          "name": "targetNamespace",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expressionLanguage",
+          "default": "http://www.w3.org/1999/XPath",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "typeLanguage",
+          "default": "http://www.w3.org/2001/XMLSchema",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "rootElements",
+          "type": "RootElement",
+          "isMany": true
+        },
+        {
+          "name": "rootBoards",
+          "isMany": true,
+          "type": "odDi:OdRootBoard"
+        },
+        {
+          "name": "exporter",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "exporterVersion",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ]
+}
diff --git a/app/lib/resourcemodeler/resourceLabelHandling/index.js b/app/lib/resourcemodeler/resourceLabelHandling/index.js
new file mode 100644
index 00000000..204d4d32
--- /dev/null
+++ b/app/lib/resourcemodeler/resourceLabelHandling/index.js
@@ -0,0 +1,6 @@
+import ResourceLabelHandler from "./resourceLabelHandler";
+
+export default {
+    __init__: [ 'taskLabelHandler' ],
+    taskLabelHandler: [ 'type', ResourceLabelHandler ]
+};
diff --git a/app/lib/resourcemodeler/resourceLabelHandling/resourceLabelHandler.js b/app/lib/resourcemodeler/resourceLabelHandling/resourceLabelHandler.js
new file mode 100644
index 00000000..08a74fe4
--- /dev/null
+++ b/app/lib/resourcemodeler/resourceLabelHandling/resourceLabelHandler.js
@@ -0,0 +1,247 @@
+import CommandInterceptor from "diagram-js/lib/command/CommandInterceptor";
+import CommonEvents from "../../common/CommonEvents";
+import getDropdown from "../../util/Dropdown";
+import {appendOverlayListeners} from "../../util/HtmlUtil";
+import {is} from "../../util/Util";
+
+export default class ResourceLabelHandler extends CommandInterceptor {
+    constructor(eventBus, modeling, directEditing, overlays, resourceModeler) {
+        super(eventBus);
+        this._eventBus = eventBus;
+        this._modeling = modeling;
+        this._dropdownContainer = document.createElement('div');
+        this._dropdownContainer.classList.add('dd-dropdown-multicontainer');
+        this._nameDropdown = getDropdown("Name");
+        this._dropdownContainer.appendChild(this._nameDropdown);
+        this._rolesDropdown = getDropdown("Roles");
+        this._dropdownContainer.appendChild(this._rolesDropdown);
+        this._capacityDropdown = getDropdown("Capacity");
+        this._dropdownContainer.appendChild(this._capacityDropdown);
+        this._availabilityStartDropdown = getDropdown("Availability Start");
+        this._dropdownContainer.appendChild(this._availabilityStartDropdown);
+        this._availabilityEndDropdown = getDropdown("Availability End");
+        this._dropdownContainer.appendChild(this._availabilityEndDropdown);
+        this._currentDropdownTarget = undefined;
+        this._overlayId = undefined;
+        this._overlays = overlays;
+        this._resourceModeler = resourceModeler;
+
+        eventBus.on('directEditing.activate', function (e) {
+            if (is(e.active.element, 'rem:Resource')) {
+                directEditing.cancel();
+            }
+        });
+
+        eventBus.on(['element.dblclick', 'create.end', 'autoPlace.end'], e => {
+            const element = e.element || e.shape || e.elements[0];
+            if (is(element, 'rem:Resource')) {
+                const resource = element.businessObject;
+                this._dropdownContainer.currentElement = element;
+
+                const updateRolesSelection = () => {
+                    this._rolesDropdown.getEntries().forEach(entry => entry.setSelected(resource.roles?.find(role => role === entry.option)));
+                }
+
+                const populateNameDropdown = () => {
+                    this._nameDropdown.populate(
+                        [],
+                        (state, element) => {
+                            this.updateName(state, element);
+                            },
+                        element
+                    );
+                    this._nameDropdown.addCreateElementInput(event => this._dropdownContainer.confirm(),"text",resource.name);
+                }
+
+                const populateCapacityDropdown = () => {
+                    this._capacityDropdown.populate(
+                        [],
+                        (state, element) => {
+                            this.updateCapacity(state, element);
+                        },
+                        element
+                    );
+                    this._capacityDropdown.addCreateElementInput(event => this._dropdownContainer.confirm(),"number",resource.capacity);
+                }
+
+                const populateRolesDropdown = () => {
+                    this._rolesDropdown.populate(
+                        this._resourceModeler._roles || [], // TODO Change this to the list of roles instead of an empty list
+                        (role, element) => {
+                            this.updateRoles(role, element);
+                            updateRolesSelection();
+                        },
+                        element
+                    );
+                    this._rolesDropdown.addCreateElementInput(event => this._dropdownContainer.confirm());
+                    updateRolesSelection();
+                }
+
+                const populateAvailabilityStartDropdown = () => {
+                    this._availabilityStartDropdown.populate(
+                        [],
+                        (state, element) => {
+                            this.updateavailabilityStart(state, element);
+                        },
+                        element
+                    );
+                    this._availabilityStartDropdown.addCreateElementInput(event => this._dropdownContainer.confirm(),"number",resource.availabilityStart, "0");
+                }
+
+                const populateAvailabilityEndDropdown = () => {
+                    this._availabilityEndDropdown.populate(
+                        [],
+                        (state, element) => {
+                            this.updateavailabilityEnd(state, element);
+                        },
+                        element
+                    );
+                    this._availabilityEndDropdown.addCreateElementInput(event => this._dropdownContainer.confirm(),"number",resource.availabilityEnd, "0");
+                }
+                
+                populateNameDropdown();
+                populateCapacityDropdown();
+                populateRolesDropdown();
+                populateAvailabilityStartDropdown();
+                populateAvailabilityEndDropdown();
+
+                this._dropdownContainer.confirm = (event) => {
+                    const newNameInput = this._nameDropdown.getInputValue();
+                    const newCapacityInput = this._capacityDropdown.getInputValue();
+                    const newRoleInput = this._rolesDropdown.getInputValue();
+                    const newAvailabilityStartInput = this._availabilityStartDropdown.getInputValue();
+                    const newAvailabilityEndInput = this._availabilityEndDropdown.getInputValue();
+
+                    if (newNameInput !== '' && newNameInput !== resource.name) {
+                        this.updateName(newNameInput,element);
+                        populateNameDropdown();
+                    }
+                    if (newCapacityInput !== resource.capacity && newCapacityInput > 0) {
+                        this.updateCapacity(newCapacityInput,element);
+                        populateCapacityDropdown();
+                    }
+                    if (newRoleInput !== '' && !this._resourceModeler._roles?.find(role => role.name === newRoleInput)) {
+                        let newRole = this.createRole(newRoleInput);
+                        this.updateRoles(newRole,element);
+                        populateRolesDropdown();
+                    }
+                    if (newAvailabilityStartInput !== resource.availabilityStart && newAvailabilityStartInput >= 0) {
+                        this.updateavailabilityStart(newAvailabilityStartInput,element);
+                        populateAvailabilityStartDropdown();
+                    }
+                    if (newAvailabilityEndInput !== resource.availabilityEnd && newAvailabilityEndInput >= 0) {
+                        this.updateavailabilityEnd(newAvailabilityEndInput,element);
+                        populateAvailabilityEndDropdown();
+                    }
+                }
+
+                let shouldBlockNextClick = e.type === 'create.end';
+                this._dropdownContainer.handleClick = (event) => {
+                    if (shouldBlockNextClick) {
+                        shouldBlockNextClick = false;
+                        return true;
+                    } else if (!this._dropdownContainer.contains(event.target)) {
+                        return false;
+                    } else if (event.target.classList.contains('dd-dropdown-entry')) {
+                        this._nameDropdown.clearInput();
+                        this._capacityDropdown.clearInput();
+                        this._rolesDropdown.clearInput();
+                        this._availabilityStartDropdown.clearInput();
+                        this._availabilityEndDropdown.clearInput();
+                    } else if (event.target.tagName !== 'INPUT' || !event.target.value) {
+                        this._dropdownContainer.confirm();
+                    }
+                    return true;
+                }
+
+                this._dropdownContainer.close = () => {
+                    if (this._overlayId) {
+                        this._overlays.remove(this._overlayId);
+                        this._overlayId = undefined;
+                    }
+                    this._dropdownContainer.currentElement = undefined;
+                    this._currentDropdownTarget = undefined;
+                }
+
+                const closeOverlay = appendOverlayListeners(this._dropdownContainer);
+                eventBus.once('element.contextmenu', event => {
+                    if (this._currentDropdownTarget && ((event.element || event.shape).businessObject !== this._currentDropdownTarget)) {
+                        closeOverlay(event);
+                        event.preventDefault();
+                    }
+                });
+
+                // Show the menu(e)
+                this._overlayId = overlays.add(element.id, 'classSelection', {
+                    position: {
+                        bottom: 0,
+                        right: 0
+                    },
+                    scale: false,
+                    html: this._dropdownContainer
+                });
+
+                this._currentDropdownTarget = element.businessObject;
+            }
+        });
+    }
+
+    updateName(newName, element) {
+        element.businessObject.name = newName;
+        this._eventBus.fire('element.changed', {
+            element
+        });
+        this._eventBus.fire(CommonEvents.OBJECTIVE_RENAMED, {
+            objective: element
+        });
+    }
+
+    updateCapacity(newCapacity, element) {
+        element.businessObject.capacity = newCapacity;
+        this._eventBus.fire('element.changed', {
+            element
+        });
+    }
+
+    createRole(name) {
+        return this._eventBus.fire(CommonEvents.ROLE_CREATION_REQUESTED, {
+            name
+        });
+    }
+
+    updateRoles(newRole, element) {
+        if((element.businessObject.roles?.find(role => role === newRole)))
+        {
+            element.businessObject.roles.pop(newRole);
+        } else if(element.businessObject.roles){
+            element.businessObject.roles.push(newRole);
+        } else {
+            element.businessObject.roles = [newRole];
+        }
+        this._eventBus.fire('element.changed', {
+            element
+        });
+    }
+
+    updateavailabilityStart(newAvailabilityStart, element) {
+        element.businessObject.availabilityStart = newAvailabilityStart;
+        this._eventBus.fire('element.changed', {
+            element
+        });
+    }
+
+    updateavailabilityEnd(newAvailabilityEnd, element) {
+        element.businessObject.availabilityEnd = newAvailabilityEnd;
+        this._eventBus.fire('element.changed', {
+            element
+        });
+    }
+}
+
+ResourceLabelHandler.$inject = [
+    'eventBus',
+    'modeling',
+    'directEditing',
+    'overlays',
+    'resourceModeler'
+];
diff --git a/app/lib/resourcemodeler/util/FileUtil.js b/app/lib/resourcemodeler/util/FileUtil.js
new file mode 100644
index 00000000..739025b0
--- /dev/null
+++ b/app/lib/resourcemodeler/util/FileUtil.js
@@ -0,0 +1,49 @@
+export function fileToDataURL(file) {
+  return new Promise((resolve, reject) => {
+    try {
+      var reader = new FileReader();
+      reader.onloadend = function() {
+        resolve(reader.result);
+      };
+      reader.readAsDataURL(file);
+    } catch (e) {
+      reject(e);
+    }
+  });
+}
+
+
+export async function imageProcessor(ev, file) {
+  const base64file = await fileToDataURL(file);
+
+  // createImage(ev, base64file);
+  return base64file; // passing any errors through
+}
+
+export async function fileReader(ev, files) {
+  let uploadResult = [];
+  let errors;
+  let fileItems = files;
+  if (ev && (ev.dataTransfer.items || ev.dataTransfer.files)) {
+    fileItems = ev.dataTransfer.items || ev.dataTransfer.files;
+  }
+  try {
+    if (fileItems) {
+      for (var i = 0; i < fileItems.length; i++) {
+        if (ev && ev.dataTransfer.items) {
+          if (fileItems[i].kind === 'file') {
+            var file = fileItems[i].getAsFile();
+            uploadResult.push(await imageProcessor(ev, file));
+          }
+        } else {
+          uploadResult.push(await imageProcessor(ev, fileItems[i]));
+        }
+      }
+    }
+  } catch (e) {
+    errors = e;
+    uploadResult = null;
+  }
+  return { uploadResult, errors };
+}
+
diff --git a/app/lib/resourcemodeler/util/LabelUtil.js b/app/lib/resourcemodeler/util/LabelUtil.js
new file mode 100644
index 00000000..3748d125
--- /dev/null
+++ b/app/lib/resourcemodeler/util/LabelUtil.js
@@ -0,0 +1,140 @@
+import {assign} from 'min-dash';
+
+import {is} from './ModelUtil';
+
+
+export var DEFAULT_LABEL_SIZE = {
+  width: 90,
+  height: 20
+};
+
+export var FLOW_LABEL_INDENT = 15;
+
+
+/**
+ * Returns true if the given semantic has an external label
+ *
+ * @param {BoardElement} semantic
+ * @return {Boolean} true if has label
+ */
+export function isLabelExternal(semantic) {
+  return is(semantic, 'rem:Link');
+}
+
+/**
+ * Returns true if the given element has an external label
+ *
+ * @param {djs.model.shape} element
+ * @return {Boolean} true if has label
+ */
+export function hasExternalLabel(element) {
+  return isLabel(element.label);
+}
+
+/**
+ * Get the position for sequence flow labels
+ *
+ * @param  {Array<Point>} waypoints
+ * @return {Point} the label position
+ */
+export function getFlowLabelPosition(waypoints) {
+
+  // get the waypoints mid
+  var mid = waypoints.length / 2 - 1;
+
+  var first = waypoints[Math.floor(mid)];
+  var second = waypoints[Math.ceil(mid + 0.01)];
+
+  // get position
+  var position = getWaypointsMid(waypoints);
+
+  // calculate angle
+  var angle = Math.atan((second.y - first.y) / (second.x - first.x));
+
+  var x = position.x,
+      y = position.y;
+
+  if (Math.abs(angle) < Math.PI / 2) {
+    y -= FLOW_LABEL_INDENT;
+  } else {
+    x += FLOW_LABEL_INDENT;
+  }
+
+  return { x: x, y: y };
+}
+
+/**
+ * Get the middle of a number of waypoints
+ *
+ * @param  {Array<Point>} waypoints
+ * @return {Point} the mid point
+ */
+export function getWaypointsMid(waypoints) {
+
+  var mid = waypoints.length / 2 - 1;
+
+  var first = waypoints[Math.floor(mid)];
+  var second = waypoints[Math.ceil(mid + 0.01)];
+
+  return {
+    x: first.x + (second.x - first.x) / 2,
+    y: first.y + (second.y - first.y) / 2
+  };
+}
+
+
+export function getExternalLabelMid(element) {
+  if (element.waypoints) {
+    return getFlowLabelPosition(element.waypoints);
+  } else {
+    return {
+      x: element.x + element.width / 2,
+      y: element.y + element.height + DEFAULT_LABEL_SIZE.height / 2
+    };
+  }
+}
+
+
+/**
+ * Returns the bounds of an elements label, parsed from the elements DI or
+ * generated from its bounds.
+ *
+ * @param {BoardElement} semantic
+ * @param {djs.model.Base} element
+ */
+export function getExternalLabelBounds(semantic, element) {
+
+  var mid,
+      size,
+      bounds,
+      di = semantic.di,
+      label = di.label;
+
+  if (label && label.bounds) {
+    bounds = label.bounds;
+
+    size = {
+      width: Math.max(DEFAULT_LABEL_SIZE.width, bounds.width),
+      height: bounds.height
+    };
+
+    mid = {
+      x: bounds.x + bounds.width / 2,
+      y: bounds.y + bounds.height / 2
+    };
+  } else {
+
+    mid = getExternalLabelMid(element);
+
+    size = DEFAULT_LABEL_SIZE;
+  }
+
+  return assign({
+    x: mid.x - size.width / 2,
+    y: mid.y - size.height / 2
+  }, size);
+}
+
+export function isLabel(element) {
+  return element && !!element.labelTarget;
+}
diff --git a/app/lib/resourcemodeler/util/ModelUtil.js b/app/lib/resourcemodeler/util/ModelUtil.js
new file mode 100644
index 00000000..02a2b6d1
--- /dev/null
+++ b/app/lib/resourcemodeler/util/ModelUtil.js
@@ -0,0 +1,25 @@
+/**
+ * Is an element of the given od type?
+ *
+ * @param  {djs.model.Base|ModdleElement} element
+ * @param  {String} type
+ *
+ * @return {Boolean}
+ */
+export function is(element, type) {
+  var bo = getBusinessObject(element);
+
+  return bo && (typeof bo.$instanceOf === 'function') && bo.$instanceOf(type);
+}
+
+
+/**
+ * Return the business object for a given element.
+ *
+ * @param  {djs.model.Base|ModdleElement} element
+ *
+ * @return {ModdleElement}
+ */
+export function getBusinessObject(element) {
+  return (element && element.businessObject) || element;
+}
\ No newline at end of file
diff --git a/app/lib/resourcemodeler/util/PoweredByUtil.js b/app/lib/resourcemodeler/util/PoweredByUtil.js
new file mode 100644
index 00000000..5f3d54c7
--- /dev/null
+++ b/app/lib/resourcemodeler/util/PoweredByUtil.js
@@ -0,0 +1,76 @@
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
+ */
+
+import {delegate as domDelegate, domify} from 'min-dom';
+
+
+var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 23"><path fill="currentColor" d="M7.75 3.8v.58c0 1.7-.52 2.78-1.67 3.32C7.46 8.24 8 9.5 8 11.24v1.34c0 2.54-1.35 3.9-3.93 3.9H0V0h3.91c2.68 0 3.84 1.25 3.84 3.8zM2.59 2.35V6.7H3.6c.97 0 1.56-.42 1.56-1.74v-.92c0-1.18-.4-1.7-1.32-1.7zm0 6.7v5.07h1.48c.87 0 1.34-.4 1.34-1.63v-1.43c0-1.53-.5-2-1.67-2H2.6zm14.65-4.98v2.14c0 2.64-1.27 4.08-3.87 4.08h-1.22v6.2H9.56V0h3.82c2.59 0 3.86 1.44 3.86 4.07zm-5.09-1.71v5.57h1.22c.83 0 1.28-.37 1.28-1.55V3.91c0-1.18-.45-1.56-1.28-1.56h-1.22zm11.89 9.34L25.81 0h3.6v16.48h-2.44V4.66l-1.8 11.82h-2.45L20.8 4.83v11.65h-2.26V0h3.6zm9.56-7.15v11.93h-2.33V0h3.25l2.66 9.87V0h2.31v16.48h-2.66zm10.25 9.44v2.5h-2.5v-2.5zM50 4.16C50 1.52 51.38.02 53.93.02c2.54 0 3.93 1.5 3.93 4.14v8.37c0 2.64-1.4 4.14-3.93 4.14-2.55 0-3.93-1.5-3.93-4.14zm2.58 8.53c0 1.18.52 1.63 1.35 1.63.82 0 1.34-.45 1.34-1.63V4c0-1.17-.52-1.62-1.34-1.62-.83 0-1.35.45-1.35 1.62zM0 18.7h57.86V23H0zM45.73 0h2.6v2.58h-2.6zm2.59 16.48V4.16h-2.59v12.32z"></path></svg>';
+
+var BPMNIO_LOGO_URL = 'data:image/svg+xml,' + encodeURIComponent(BPMNIO_LOGO_SVG);
+
+export var BPMNIO_IMG = '<img width="52" height="52" src="' + BPMNIO_LOGO_URL + '" />';
+
+function css(attrs) {
+  return attrs.join(';');
+}
+
+var LIGHTBOX_STYLES = css([
+  'z-index: 1001',
+  'position: fixed',
+  'top: 0',
+  'left: 0',
+  'right: 0',
+  'bottom: 0'
+]);
+
+var BACKDROP_STYLES = css([
+  'width: 100%',
+  'height: 100%',
+  'background: rgba(0,0,0,0.2)'
+]);
+
+var NOTICE_STYLES = css([
+  'position: absolute',
+  'left: 50%',
+  'top: 40%',
+  'margin: 0 -130px',
+  'width: 260px',
+  'padding: 10px',
+  'background: white',
+  'border: solid 1px #AAA',
+  'border-radius: 3px',
+  'font-family: Helvetica, Arial, sans-serif',
+  'font-size: 14px',
+  'line-height: 1.2em'
+]);
+
+var LIGHTBOX_MARKUP =
+  '<div class="bjs-powered-by-lightbox" style="' + LIGHTBOX_STYLES + '">' +
+  '<div class="backdrop" style="' + BACKDROP_STYLES + '"></div>' +
+  '<div class="notice" style="' + NOTICE_STYLES + '">' +
+  '<a href="http://bpmn.io" target="_blank" style="float: left; margin-right: 10px">' +
+  BPMNIO_IMG +
+  '</a>' +
+  'Web-based tooling for BPMN, DMN and CMMN diagrams ' +
+  'powered by <a href="http://bpmn.io" target="_blank">bpmn.io</a>.' +
+  '</div>' +
+  '</div>';
+
+
+var lightbox;
+
+export function open() {
+
+  if (!lightbox) {
+    lightbox = domify(LIGHTBOX_MARKUP);
+
+    domDelegate.bind(lightbox, '.backdrop', 'click', function(event) {
+      document.body.removeChild(lightbox);
+    });
+  }
+
+  document.body.appendChild(lightbox);
+}
\ No newline at end of file
diff --git a/app/lib/util/Dropdown.js b/app/lib/util/Dropdown.js
index a3a2ae93..59b8a72d 100644
--- a/app/lib/util/Dropdown.js
+++ b/app/lib/util/Dropdown.js
@@ -110,12 +110,12 @@ export default function getDropdown(name = "") {
         return this.getEntries().filter((entry) => entry.option === option)[0];
     };
 
-    dropdownMenu.addCreateElementInput = function (onConfirm, type = "text", value) {
+    dropdownMenu.addCreateElementInput = function (onConfirm, type = "text", value, minValue = "1") {
         const createNewElementEditorContainer = document.createElement("div");
         createNewElementEditorContainer.classList.add("dd-dropdown-create-input");
         const createNewElementEditor = document.createElement("input");
         createNewElementEditor.type = type;
-        createNewElementEditor.min = 1;
+        createNewElementEditor.min = minValue;
         if (value) {
             createNewElementEditor.value = value;
         } else {
