diff --git a/addons/web_diagram/static/src/css/base_diagram.css b/addons/web_diagram/static/src/css/base_diagram.css
index fc280ad4cb0..8d0a418f52e 100644
--- a/addons/web_diagram/static/src/css/base_diagram.css
+++ b/addons/web_diagram/static/src/css/base_diagram.css
@@ -32,7 +32,7 @@
     border:1px solid #DCDCDC;
     overflow:hidden;
 }
-.openerp .diagram{
+.openerp .oe_diagram_diagram{
     margin:0;
     padding:0;
     background-color:#FFF;
@@ -41,7 +41,7 @@
 }
 
 /* prevent accidental selection of the text in the svg nodes */
-.openerp .diagram *{
+.openerp .oe_diagram_diagram *{
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
diff --git a/addons/web_diagram/static/src/js/diagram.js b/addons/web_diagram/static/src/js/diagram.js
index ca650710986..1c78a426fbe 100644
--- a/addons/web_diagram/static/src/js/diagram.js
+++ b/addons/web_diagram/static/src/js/diagram.js
@@ -148,9 +148,9 @@ openerp.web.DiagramView = openerp.web.View.extend({
             viewport_margin: 50
         };
 
-        $('#dia-canvas').empty();    // remove previous diagram
-
-        var canvas = document.getElementById("dia-canvas");
+        // remove previous diagram
+        var canvas = self.$element.find('div.oe_diagram_diagram')
+                             .empty().get(0);
 
         var r  = new Raphael(canvas, '100%','100%');
 
diff --git a/addons/web_diagram/static/src/xml/base_diagram.xml b/addons/web_diagram/static/src/xml/base_diagram.xml
index 02271351646..96e32f59648 100644
--- a/addons/web_diagram/static/src/xml/base_diagram.xml
+++ b/addons/web_diagram/static/src/xml/base_diagram.xml
@@ -14,7 +14,7 @@
     </div>
     
     <div class="diagram-container">
-        <div id="dia-canvas" class="diagram"></div>
+        <div class="oe_diagram_diagram"/>
     </div>
 </t>
 </template>