diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 2dd733b180..062ff4dbe2 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -83,6 +83,7 @@ Introducing providers interfaces to help creating view programmatically.
 Introducing a generator of builders aimed to help creating view programmatically, the generation makes use of emf-merge and modifications to these builders can be annotated to live during future regeneration. 
 
 - https://github.com/eclipse-sirius/sirius-components/issues/1912[#1912] [core] Add the possibility to send feedback messages to the frontend after an action.
+- https://github.com/eclipse-sirius/sirius-components/issues/1989[#1979] [diagram] Contribute a new way to render diagrams to evaluate an alternate layouting strategy
 
 === Improvements
 
diff --git a/package-lock.json b/package-lock.json
index 763ca9aece..ab1289847b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -678,6 +678,10 @@
       "resolved": "packages/diagrams/frontend/sirius-components-diagrams",
       "link": true
     },
+    "node_modules/@eclipse-sirius/sirius-components-diagrams-reactflow": {
+      "resolved": "packages/diagrams/frontend/sirius-components-diagrams-reactflow",
+      "link": true
+    },
     "node_modules/@eclipse-sirius/sirius-components-formdescriptioneditors": {
       "resolved": "packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors",
       "link": true
@@ -2078,6 +2082,146 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@reactflow/background": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.2.2.tgz",
+      "integrity": "sha512-gOtae79Zx1zOs9tD4tmKfuiQQOyG0O81BWBCHqlAQgemKlYExElFKOC67lgTDZ4GGFK+4sXrgrWQ5h14hzaFgg==",
+      "peer": true,
+      "dependencies": {
+        "@reactflow/core": "11.7.2",
+        "classcat": "^5.0.3",
+        "zustand": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/controls": {
+      "version": "11.1.13",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.1.13.tgz",
+      "integrity": "sha512-rA74+mbt2bnz9Fba6JL1JsKHNNEK6Nl70+ssfOLKMpRFIg512IroayBWufgPJB82X9dgMIzZfx/UcEFFUFJQ8Q==",
+      "peer": true,
+      "dependencies": {
+        "@reactflow/core": "11.7.2",
+        "classcat": "^5.0.3",
+        "zustand": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/core": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.7.2.tgz",
+      "integrity": "sha512-AhszxILp1RNk3SwrnC/eYh1XsOil5yzthYG5k+oTpvLH5H3BtIWIVkeLEJwmL611lPKL3JuScfjliUxBm9128w==",
+      "peer": true,
+      "dependencies": {
+        "@types/d3": "^7.4.0",
+        "@types/d3-drag": "^3.0.1",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/core/node_modules/@types/d3": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz",
+      "integrity": "sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==",
+      "peer": true,
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@reactflow/minimap": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.5.2.tgz",
+      "integrity": "sha512-564gP/GMZKaJjVRGIrVLv2gIjgc89+qvNwuZzHnQLXjBw5+nS/QkW57Qx/M33MxVAaM+Z5rJ8gKknMSnxekwvQ==",
+      "peer": true,
+      "dependencies": {
+        "@reactflow/core": "11.7.2",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-resizer": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.1.0.tgz",
+      "integrity": "sha512-DVL8nnWsltP8/iANadAcTaDB4wsEkx2mOLlBEPNE3yc5loSm3u9l5m4enXRcBym61MiMuTtDPzZMyYYQUjuYIg==",
+      "peer": true,
+      "dependencies": {
+        "@reactflow/core": "^11.6.0",
+        "classcat": "^5.0.4",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "zustand": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-toolbar": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.2.1.tgz",
+      "integrity": "sha512-EcMUMzJGAACYQTiUaBm3zxeiiKCPwU2MaoDeZdnEMbvq+2SfohKOur6JklANjv30kL+Pf3xj8QopEtyKTS4XrA==",
+      "peer": true,
+      "dependencies": {
+        "@reactflow/core": "11.7.2",
+        "classcat": "^5.0.3",
+        "zustand": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "22.0.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-22.0.1.tgz",
@@ -2515,14 +2659,12 @@
     "node_modules/@types/d3-array": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz",
-      "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==",
-      "dev": true
+      "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ=="
     },
     "node_modules/@types/d3-axis": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.1.tgz",
       "integrity": "sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==",
-      "dev": true,
       "dependencies": {
         "@types/d3-selection": "*"
       }
@@ -2531,7 +2673,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz",
       "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==",
-      "dev": true,
       "dependencies": {
         "@types/d3-selection": "*"
       }
@@ -2539,20 +2680,17 @@
     "node_modules/@types/d3-chord": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.1.tgz",
-      "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==",
-      "dev": true
+      "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw=="
     },
     "node_modules/@types/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==",
-      "dev": true
+      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
     },
     "node_modules/@types/d3-contour": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.1.tgz",
       "integrity": "sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==",
-      "dev": true,
       "dependencies": {
         "@types/d3-array": "*",
         "@types/geojson": "*"
@@ -2561,20 +2699,17 @@
     "node_modules/@types/d3-delaunay": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
-      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==",
-      "dev": true
+      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ=="
     },
     "node_modules/@types/d3-dispatch": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
-      "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==",
-      "dev": true
+      "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw=="
     },
     "node_modules/@types/d3-drag": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.1.tgz",
       "integrity": "sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==",
-      "dev": true,
       "dependencies": {
         "@types/d3-selection": "*"
       }
@@ -2582,20 +2717,17 @@
     "node_modules/@types/d3-dsv": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.0.tgz",
-      "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==",
-      "dev": true
+      "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A=="
     },
     "node_modules/@types/d3-ease": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
-      "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==",
-      "dev": true
+      "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA=="
     },
     "node_modules/@types/d3-fetch": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.1.tgz",
       "integrity": "sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==",
-      "dev": true,
       "dependencies": {
         "@types/d3-dsv": "*"
       }
@@ -2603,20 +2735,17 @@
     "node_modules/@types/d3-force": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.3.tgz",
-      "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==",
-      "dev": true
+      "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA=="
     },
     "node_modules/@types/d3-format": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
-      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==",
-      "dev": true
+      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg=="
     },
     "node_modules/@types/d3-geo": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz",
       "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==",
-      "dev": true,
       "dependencies": {
         "@types/geojson": "*"
       }
@@ -2624,14 +2753,12 @@
     "node_modules/@types/d3-hierarchy": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.0.tgz",
-      "integrity": "sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ==",
-      "dev": true
+      "integrity": "sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ=="
     },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
       "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
-      "dev": true,
       "dependencies": {
         "@types/d3-color": "*"
       }
@@ -2639,32 +2766,27 @@
     "node_modules/@types/d3-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
-      "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==",
-      "dev": true
+      "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg=="
     },
     "node_modules/@types/d3-polygon": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz",
-      "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==",
-      "dev": true
+      "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw=="
     },
     "node_modules/@types/d3-quadtree": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz",
-      "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==",
-      "dev": true
+      "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw=="
     },
     "node_modules/@types/d3-random": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz",
-      "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==",
-      "dev": true
+      "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ=="
     },
     "node_modules/@types/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz",
       "integrity": "sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==",
-      "dev": true,
       "dependencies": {
         "@types/d3-time": "*"
       }
@@ -2672,20 +2794,17 @@
     "node_modules/@types/d3-scale-chromatic": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
-      "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==",
-      "dev": true
+      "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw=="
     },
     "node_modules/@types/d3-selection": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz",
-      "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==",
-      "dev": true
+      "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA=="
     },
     "node_modules/@types/d3-shape": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.0.tgz",
       "integrity": "sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==",
-      "dev": true,
       "dependencies": {
         "@types/d3-path": "*"
       }
@@ -2693,26 +2812,22 @@
     "node_modules/@types/d3-time": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
-      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
-      "dev": true
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg=="
     },
     "node_modules/@types/d3-time-format": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz",
-      "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==",
-      "dev": true
+      "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw=="
     },
     "node_modules/@types/d3-timer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz",
-      "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==",
-      "dev": true
+      "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g=="
     },
     "node_modules/@types/d3-transition": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.2.tgz",
       "integrity": "sha512-jo5o/Rf+/u6uerJ/963Dc39NI16FQzqwOc54bwvksGAdVfvDrqDpVeq95bEvPtBwLCVZutAEyAtmSyEMxN7vxQ==",
-      "dev": true,
       "dependencies": {
         "@types/d3-selection": "*"
       }
@@ -2721,7 +2836,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
       "integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==",
-      "dev": true,
       "dependencies": {
         "@types/d3-interpolate": "*",
         "@types/d3-selection": "*"
@@ -2736,8 +2850,7 @@
     "node_modules/@types/geojson": {
       "version": "7946.0.10",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
-      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
-      "dev": true
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
     },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.5",
@@ -3707,6 +3820,12 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "node_modules/classcat": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz",
+      "integrity": "sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g==",
+      "peer": true
+    },
     "node_modules/cli-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -12475,6 +12594,24 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/reactflow": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.7.2.tgz",
+      "integrity": "sha512-HBudD8BwZacOMqX8fbkiXbeBQs3nRezWVLCDurfc+tTeHsA7988uyaIOhrnKgYCcKtlpJaspsnxDZk+5JmmHxA==",
+      "peer": true,
+      "dependencies": {
+        "@reactflow/background": "11.2.2",
+        "@reactflow/controls": "11.1.13",
+        "@reactflow/core": "11.7.2",
+        "@reactflow/minimap": "11.5.2",
+        "@reactflow/node-resizer": "2.1.0",
+        "@reactflow/node-toolbar": "1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -14907,6 +15044,30 @@
         "zen-observable": "0.8.15"
       }
     },
+    "node_modules/zustand": {
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.8.tgz",
+      "integrity": "sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==",
+      "peer": true,
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "immer": ">=9.0",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "packages/charts/frontend/sirius-components-charts": {
       "name": "@eclipse-sirius/sirius-components-charts",
       "version": "2023.4.1",
@@ -15066,6 +15227,41 @@
         "xstate": "4.32.1"
       }
     },
+    "packages/diagrams/frontend/sirius-components-diagrams-reactflow": {
+      "name": "@eclipse-sirius/sirius-components-diagrams-reactflow",
+      "version": "2023.4.1",
+      "license": "EPL-2.0",
+      "devDependencies": {
+        "@apollo/client": "3.6.9",
+        "@eclipse-sirius/sirius-components-core": "~2023.4.0",
+        "@eclipse-sirius/sirius-components-tsconfig": "~2023.4.0",
+        "@material-ui/core": "4.12.4",
+        "@material-ui/icons": "4.11.3",
+        "@types/react": "17.0.37",
+        "@types/react-dom": "17.0.9",
+        "@vitejs/plugin-react": "2.0.0",
+        "c8": "7.12.0",
+        "graphql": "16.5.0",
+        "jsdom": "16.7.0",
+        "prettier": "2.7.1",
+        "react": "17.0.2",
+        "react-dom": "17.0.2",
+        "rollup-plugin-peer-deps-external": "2.2.4",
+        "typescript": "4.7.4",
+        "vite": "3.0.4",
+        "vitest": "0.21.1"
+      },
+      "peerDependencies": {
+        "@apollo/client": "3.6.9",
+        "@eclipse-sirius/sirius-components-core": "~2023.4.0",
+        "@material-ui/core": "4.12.4",
+        "@material-ui/icons": "4.11.3",
+        "graphql": "16.5.0",
+        "react": "17.0.2",
+        "react-dom": "17.0.2",
+        "reactflow": "11.7.2"
+      }
+    },
     "packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors": {
       "name": "@eclipse-sirius/sirius-components-formdescriptioneditors",
       "version": "2023.4.1",
@@ -15249,6 +15445,7 @@
         "@eclipse-sirius/sirius-components-charts": "~2023.4.0",
         "@eclipse-sirius/sirius-components-core": "~2023.4.0",
         "@eclipse-sirius/sirius-components-diagrams": "~2023.4.0",
+        "@eclipse-sirius/sirius-components-diagrams-reactflow": "~2023.4.0",
         "@eclipse-sirius/sirius-components-formdescriptioneditors": "~2023.4.0",
         "@eclipse-sirius/sirius-components-forms": "~2023.4.0",
         "@eclipse-sirius/sirius-components-selection": "~2023.4.0",
@@ -16674,6 +16871,29 @@
         "xstate": "4.32.1"
       }
     },
+    "@eclipse-sirius/sirius-components-diagrams-reactflow": {
+      "version": "file:packages/diagrams/frontend/sirius-components-diagrams-reactflow",
+      "requires": {
+        "@apollo/client": "3.6.9",
+        "@eclipse-sirius/sirius-components-core": "~2023.4.0",
+        "@eclipse-sirius/sirius-components-tsconfig": "~2023.4.0",
+        "@material-ui/core": "4.12.4",
+        "@material-ui/icons": "4.11.3",
+        "@types/react": "17.0.37",
+        "@types/react-dom": "17.0.9",
+        "@vitejs/plugin-react": "2.0.0",
+        "c8": "7.12.0",
+        "graphql": "16.5.0",
+        "jsdom": "16.7.0",
+        "prettier": "2.7.1",
+        "react": "17.0.2",
+        "react-dom": "17.0.2",
+        "rollup-plugin-peer-deps-external": "2.2.4",
+        "typescript": "4.7.4",
+        "vite": "3.0.4",
+        "vitest": "0.21.1"
+      }
+    },
     "@eclipse-sirius/sirius-components-formdescriptioneditors": {
       "version": "file:packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors",
       "requires": {
@@ -16857,6 +17077,7 @@
         "@eclipse-sirius/sirius-components-charts": "~2023.4.0",
         "@eclipse-sirius/sirius-components-core": "~2023.4.0",
         "@eclipse-sirius/sirius-components-diagrams": "~2023.4.0",
+        "@eclipse-sirius/sirius-components-diagrams-reactflow": "~2023.4.0",
         "@eclipse-sirius/sirius-components-formdescriptioneditors": "~2023.4.0",
         "@eclipse-sirius/sirius-components-forms": "~2023.4.0",
         "@eclipse-sirius/sirius-components-selection": "~2023.4.0",
@@ -18274,6 +18495,124 @@
         "fastq": "^1.6.0"
       }
     },
+    "@reactflow/background": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.2.2.tgz",
+      "integrity": "sha512-gOtae79Zx1zOs9tD4tmKfuiQQOyG0O81BWBCHqlAQgemKlYExElFKOC67lgTDZ4GGFK+4sXrgrWQ5h14hzaFgg==",
+      "peer": true,
+      "requires": {
+        "@reactflow/core": "11.7.2",
+        "classcat": "^5.0.3",
+        "zustand": "^4.3.1"
+      }
+    },
+    "@reactflow/controls": {
+      "version": "11.1.13",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.1.13.tgz",
+      "integrity": "sha512-rA74+mbt2bnz9Fba6JL1JsKHNNEK6Nl70+ssfOLKMpRFIg512IroayBWufgPJB82X9dgMIzZfx/UcEFFUFJQ8Q==",
+      "peer": true,
+      "requires": {
+        "@reactflow/core": "11.7.2",
+        "classcat": "^5.0.3",
+        "zustand": "^4.3.1"
+      }
+    },
+    "@reactflow/core": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.7.2.tgz",
+      "integrity": "sha512-AhszxILp1RNk3SwrnC/eYh1XsOil5yzthYG5k+oTpvLH5H3BtIWIVkeLEJwmL611lPKL3JuScfjliUxBm9128w==",
+      "peer": true,
+      "requires": {
+        "@types/d3": "^7.4.0",
+        "@types/d3-drag": "^3.0.1",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.3.1"
+      },
+      "dependencies": {
+        "@types/d3": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz",
+          "integrity": "sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==",
+          "peer": true,
+          "requires": {
+            "@types/d3-array": "*",
+            "@types/d3-axis": "*",
+            "@types/d3-brush": "*",
+            "@types/d3-chord": "*",
+            "@types/d3-color": "*",
+            "@types/d3-contour": "*",
+            "@types/d3-delaunay": "*",
+            "@types/d3-dispatch": "*",
+            "@types/d3-drag": "*",
+            "@types/d3-dsv": "*",
+            "@types/d3-ease": "*",
+            "@types/d3-fetch": "*",
+            "@types/d3-force": "*",
+            "@types/d3-format": "*",
+            "@types/d3-geo": "*",
+            "@types/d3-hierarchy": "*",
+            "@types/d3-interpolate": "*",
+            "@types/d3-path": "*",
+            "@types/d3-polygon": "*",
+            "@types/d3-quadtree": "*",
+            "@types/d3-random": "*",
+            "@types/d3-scale": "*",
+            "@types/d3-scale-chromatic": "*",
+            "@types/d3-selection": "*",
+            "@types/d3-shape": "*",
+            "@types/d3-time": "*",
+            "@types/d3-time-format": "*",
+            "@types/d3-timer": "*",
+            "@types/d3-transition": "*",
+            "@types/d3-zoom": "*"
+          }
+        }
+      }
+    },
+    "@reactflow/minimap": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.5.2.tgz",
+      "integrity": "sha512-564gP/GMZKaJjVRGIrVLv2gIjgc89+qvNwuZzHnQLXjBw5+nS/QkW57Qx/M33MxVAaM+Z5rJ8gKknMSnxekwvQ==",
+      "peer": true,
+      "requires": {
+        "@reactflow/core": "11.7.2",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.3.1"
+      }
+    },
+    "@reactflow/node-resizer": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.1.0.tgz",
+      "integrity": "sha512-DVL8nnWsltP8/iANadAcTaDB4wsEkx2mOLlBEPNE3yc5loSm3u9l5m4enXRcBym61MiMuTtDPzZMyYYQUjuYIg==",
+      "peer": true,
+      "requires": {
+        "@reactflow/core": "^11.6.0",
+        "classcat": "^5.0.4",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "zustand": "^4.3.1"
+      }
+    },
+    "@reactflow/node-toolbar": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.2.1.tgz",
+      "integrity": "sha512-EcMUMzJGAACYQTiUaBm3zxeiiKCPwU2MaoDeZdnEMbvq+2SfohKOur6JklANjv30kL+Pf3xj8QopEtyKTS4XrA==",
+      "peer": true,
+      "requires": {
+        "@reactflow/core": "11.7.2",
+        "classcat": "^5.0.3",
+        "zustand": "^4.3.1"
+      }
+    },
     "@rollup/plugin-commonjs": {
       "version": "22.0.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-22.0.1.tgz",
@@ -18626,14 +18965,12 @@
     "@types/d3-array": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz",
-      "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==",
-      "dev": true
+      "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ=="
     },
     "@types/d3-axis": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.1.tgz",
       "integrity": "sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==",
-      "dev": true,
       "requires": {
         "@types/d3-selection": "*"
       }
@@ -18642,7 +18979,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz",
       "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==",
-      "dev": true,
       "requires": {
         "@types/d3-selection": "*"
       }
@@ -18650,20 +18986,17 @@
     "@types/d3-chord": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.1.tgz",
-      "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==",
-      "dev": true
+      "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw=="
     },
     "@types/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==",
-      "dev": true
+      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
     },
     "@types/d3-contour": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.1.tgz",
       "integrity": "sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==",
-      "dev": true,
       "requires": {
         "@types/d3-array": "*",
         "@types/geojson": "*"
@@ -18672,20 +19005,17 @@
     "@types/d3-delaunay": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
-      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==",
-      "dev": true
+      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ=="
     },
     "@types/d3-dispatch": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
-      "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==",
-      "dev": true
+      "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw=="
     },
     "@types/d3-drag": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.1.tgz",
       "integrity": "sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==",
-      "dev": true,
       "requires": {
         "@types/d3-selection": "*"
       }
@@ -18693,20 +19023,17 @@
     "@types/d3-dsv": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.0.tgz",
-      "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==",
-      "dev": true
+      "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A=="
     },
     "@types/d3-ease": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
-      "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==",
-      "dev": true
+      "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA=="
     },
     "@types/d3-fetch": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.1.tgz",
       "integrity": "sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==",
-      "dev": true,
       "requires": {
         "@types/d3-dsv": "*"
       }
@@ -18714,20 +19041,17 @@
     "@types/d3-force": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.3.tgz",
-      "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==",
-      "dev": true
+      "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA=="
     },
     "@types/d3-format": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
-      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==",
-      "dev": true
+      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg=="
     },
     "@types/d3-geo": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz",
       "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==",
-      "dev": true,
       "requires": {
         "@types/geojson": "*"
       }
@@ -18735,14 +19059,12 @@
     "@types/d3-hierarchy": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.0.tgz",
-      "integrity": "sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ==",
-      "dev": true
+      "integrity": "sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ=="
     },
     "@types/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
       "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
-      "dev": true,
       "requires": {
         "@types/d3-color": "*"
       }
@@ -18750,32 +19072,27 @@
     "@types/d3-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
-      "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==",
-      "dev": true
+      "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg=="
     },
     "@types/d3-polygon": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz",
-      "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==",
-      "dev": true
+      "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw=="
     },
     "@types/d3-quadtree": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz",
-      "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==",
-      "dev": true
+      "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw=="
     },
     "@types/d3-random": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz",
-      "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==",
-      "dev": true
+      "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ=="
     },
     "@types/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz",
       "integrity": "sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==",
-      "dev": true,
       "requires": {
         "@types/d3-time": "*"
       }
@@ -18783,20 +19100,17 @@
     "@types/d3-scale-chromatic": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
-      "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==",
-      "dev": true
+      "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw=="
     },
     "@types/d3-selection": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz",
-      "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==",
-      "dev": true
+      "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA=="
     },
     "@types/d3-shape": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.0.tgz",
       "integrity": "sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==",
-      "dev": true,
       "requires": {
         "@types/d3-path": "*"
       }
@@ -18804,26 +19118,22 @@
     "@types/d3-time": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
-      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
-      "dev": true
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg=="
     },
     "@types/d3-time-format": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz",
-      "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==",
-      "dev": true
+      "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw=="
     },
     "@types/d3-timer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz",
-      "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==",
-      "dev": true
+      "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g=="
     },
     "@types/d3-transition": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.2.tgz",
       "integrity": "sha512-jo5o/Rf+/u6uerJ/963Dc39NI16FQzqwOc54bwvksGAdVfvDrqDpVeq95bEvPtBwLCVZutAEyAtmSyEMxN7vxQ==",
-      "dev": true,
       "requires": {
         "@types/d3-selection": "*"
       }
@@ -18832,7 +19142,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
       "integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==",
-      "dev": true,
       "requires": {
         "@types/d3-interpolate": "*",
         "@types/d3-selection": "*"
@@ -18847,8 +19156,7 @@
     "@types/geojson": {
       "version": "7946.0.10",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
-      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
-      "dev": true
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
     },
     "@types/graceful-fs": {
       "version": "4.1.5",
@@ -19581,6 +19889,12 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "classcat": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz",
+      "integrity": "sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g==",
+      "peer": true
+    },
     "cli-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -25820,6 +26134,20 @@
         "prop-types": "^15.6.2"
       }
     },
+    "reactflow": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.7.2.tgz",
+      "integrity": "sha512-HBudD8BwZacOMqX8fbkiXbeBQs3nRezWVLCDurfc+tTeHsA7988uyaIOhrnKgYCcKtlpJaspsnxDZk+5JmmHxA==",
+      "peer": true,
+      "requires": {
+        "@reactflow/background": "11.2.2",
+        "@reactflow/controls": "11.1.13",
+        "@reactflow/core": "11.7.2",
+        "@reactflow/minimap": "11.5.2",
+        "@reactflow/node-resizer": "2.1.0",
+        "@reactflow/node-toolbar": "1.2.1"
+      }
+    },
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -27568,6 +27896,15 @@
       "requires": {
         "zen-observable": "0.8.15"
       }
+    },
+    "zustand": {
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.8.tgz",
+      "integrity": "sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==",
+      "peer": true,
+      "requires": {
+        "use-sync-external-store": "1.2.0"
+      }
     }
   }
 }
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/.prettierrc b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/.prettierrc
new file mode 100644
index 0000000000..b936b2745a
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/.prettierrc
@@ -0,0 +1,22 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "bracketSameLine": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "overrides": [
+    {
+      "files": "*.js",
+      "options": {
+        "parser": "babel"
+      }
+    },
+    {
+      "files": "*.css",
+      "options": {
+        "parser": "css"
+      }
+    }
+  ]
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/package.json b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/package.json
new file mode 100644
index 0000000000..b1d8ed9088
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "@eclipse-sirius/sirius-components-diagrams-reactflow",
+  "version": "2023.4.1",
+  "author": "Eclipse Sirius",
+  "license": "EPL-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eclipse-sirius/sirius-components"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "main": "./dist/sirius-components-diagrams-reactflow.umd.js",
+  "module": "./dist/sirius-components-diagrams-reactflow.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/sirius-components-diagrams-reactflow.umd.js",
+      "import": "./dist/sirius-components-diagrams-reactflow.es.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build && tsc src/index.ts --jsx react-jsx --declaration --emitDeclarationOnly --esModuleInterop --moduleResolution node --target ES2019 --outDir dist",
+    "format": "prettier --write \"src/**/*.{js,ts,tsx,css}\"",
+    "format-lint": "prettier --list-different \"src/**/*.{js,ts,tsx,css}\"",
+    "publish:local": "yalc push"
+  },
+  "peerDependencies": {
+    "@apollo/client": "3.6.9",
+    "@eclipse-sirius/sirius-components-core": "~2023.4.0",
+    "@material-ui/core": "4.12.4",
+    "@material-ui/icons": "4.11.3",
+    "graphql": "16.5.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "reactflow": "11.7.2"
+  },
+  "devDependencies": {
+    "@apollo/client": "3.6.9",
+    "@eclipse-sirius/sirius-components-core": "~2023.4.0",
+    "@eclipse-sirius/sirius-components-tsconfig": "~2023.4.0",
+    "@material-ui/core": "4.12.4",
+    "@material-ui/icons": "4.11.3",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.9",
+    "@vitejs/plugin-react": "2.0.0",
+    "c8": "7.12.0",
+    "jsdom": "16.7.0",
+    "graphql": "16.5.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "prettier": "2.7.1",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "typescript": "4.7.4",
+    "vite": "3.0.4",
+    "vitest": "0.21.1"
+  }
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts
new file mode 100644
index 0000000000..24bdb791bb
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/converter/convertDiagram.ts
@@ -0,0 +1,137 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { Edge, Node } from 'reactflow';
+import { GQLDiagram } from '../graphql/subscription/diagramFragment.types';
+import { GQLImageNodeStyle, GQLNode, GQLRectangularNodeStyle } from '../graphql/subscription/nodeFragment.types';
+import { Diagram } from '../renderer/DiagramRenderer.types';
+import { ImageNodeData } from '../renderer/ImageNode.types';
+import { RectangularNodeData } from '../renderer/RectangularNode.types';
+
+const toRectangularNode = (gqlNode: GQLNode, gqlParentNode: GQLNode | null): Node<RectangularNodeData> => {
+  const style = gqlNode.style as GQLRectangularNodeStyle;
+  const { position, size } = gqlNode;
+  const labelStyle = gqlNode.label.style;
+
+  const data: RectangularNodeData = {
+    style: {
+      backgroundColor: style.color,
+      borderColor: style.borderColor,
+      borderRadius: style.borderRadius,
+      borderWidth: style.borderSize,
+      borderStyle: style.borderStyle,
+      width: `${size.width}px`,
+      height: `${size.height}px`,
+    },
+    label: {
+      text: gqlNode.label.text,
+      style: {
+        fontSize: labelStyle.fontSize,
+        color: labelStyle.color,
+      },
+    },
+  };
+
+  const node: Node<RectangularNodeData> = {
+    id: gqlNode.id,
+    type: 'rectangularNode',
+    data,
+    position,
+  };
+
+  if (gqlParentNode) {
+    node.parentNode = gqlParentNode.id;
+    node.extent = 'parent';
+  }
+
+  return node;
+};
+
+const toImageNode = (gqlNode: GQLNode, gqlParentNode: GQLNode | null): Node<ImageNodeData> => {
+  const style = gqlNode.style as GQLImageNodeStyle;
+  const { position, size } = gqlNode;
+
+  const data: ImageNodeData = {
+    style: {
+      width: `${size.width}px`,
+      height: `${size.height}px`,
+    },
+    imageURL: style.imageURL,
+  };
+
+  const node: Node<ImageNodeData> = {
+    id: gqlNode.id,
+    type: 'imageNode',
+    data,
+    position,
+  };
+
+  if (gqlParentNode) {
+    node.parentNode = gqlParentNode.id;
+    node.extent = 'parent';
+  }
+
+  return node;
+};
+
+const convertNode = (gqlNode: GQLNode, parentNode: GQLNode | null, nodes: Node[]): void => {
+  if (gqlNode.style.__typename === 'RectangularNodeStyle') {
+    nodes.push(toRectangularNode(gqlNode, parentNode));
+  } else if (gqlNode.style.__typename === 'ImageNodeStyle') {
+    nodes.push(toImageNode(gqlNode, parentNode));
+  }
+
+  (gqlNode.borderNodes ?? []).forEach((gqlBorderNode) => convertNode(gqlBorderNode, gqlNode, nodes));
+  (gqlNode.childNodes ?? []).forEach((gqlChildNode) => convertNode(gqlChildNode, gqlNode, nodes));
+};
+
+const nodeDepth = (nodeId2node: Map<string, Node>, nodeId: string): number => {
+  const node = nodeId2node.get(nodeId);
+  let depth = 0;
+
+  let parentNode = node.parentNode ? nodeId2node.get(node.parentNode) : undefined;
+  while (parentNode) {
+    depth = depth + 1;
+    parentNode = parentNode.parentNode ? nodeId2node.get(parentNode.parentNode) : undefined;
+  }
+
+  return depth;
+};
+
+export const convertDiagram = (gqlDiagram: GQLDiagram): Diagram => {
+  const nodes: Node[] = [];
+  gqlDiagram.nodes.forEach((gqlNode) => convertNode(gqlNode, null, nodes));
+
+  const nodeId2node = new Map<string, Node>();
+  nodes.forEach((node) => nodeId2node.set(node.id, node));
+
+  const nodeId2Depth = new Map<string, number>();
+  nodes.forEach((node) => nodeId2Depth.set(node.id, nodeDepth(nodeId2node, node.id)));
+
+  const edges: Edge[] = gqlDiagram.edges.map((gqlEdge) => {
+    const zIndex = Math.max(nodeId2Depth.get(gqlEdge.sourceId), nodeId2Depth.get(gqlEdge.targetId));
+
+    return {
+      id: gqlEdge.id,
+      type: 'step',
+      source: gqlEdge.sourceId,
+      target: gqlEdge.targetId,
+      zIndex,
+    };
+  });
+
+  return {
+    nodes,
+    edges,
+  };
+};
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramEventSubscription.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramEventSubscription.ts
new file mode 100644
index 0000000000..d0ea30b055
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramEventSubscription.ts
@@ -0,0 +1,39 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { diagramFragment } from './diagramFragment';
+
+export const diagramEventSubscription = `
+subscription diagramEvent($input: DiagramEventInput!) {
+  diagramEvent(input: $input) {
+    ... on ErrorPayload {
+      id
+      message
+    }
+    ... on SubscribersUpdatedEventPayload {
+      id
+      subscribers {
+        username
+      }
+    }
+    ... on DiagramRefreshedEventPayload {
+      id
+      diagram {
+        ...diagramFragment
+      }
+    }
+  }
+}
+
+${diagramFragment}
+`;
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramEventSubscription.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramEventSubscription.types.ts
new file mode 100644
index 0000000000..9412065636
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramEventSubscription.types.ts
@@ -0,0 +1,35 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { GQLDiagram } from './diagramFragment.types';
+
+export interface GQLDiagramEventPayload {
+  id: string;
+  __typename: string;
+}
+
+export interface GQLErrorPayload extends GQLDiagramEventPayload {
+  message: string;
+}
+
+export interface GQLSubscribersUpdatedEventPayload extends GQLDiagramEventPayload {
+  subscribers: GQLSubscriber[];
+}
+
+export interface GQLSubscriber {
+  username: string;
+}
+
+export interface GQLDiagramRefreshedEventPayload extends GQLDiagramEventPayload {
+  diagram: GQLDiagram;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramFragment.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramFragment.ts
new file mode 100644
index 0000000000..addbb7d3c2
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramFragment.ts
@@ -0,0 +1,70 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { edgeFragment } from './edgeFragment';
+import { labelFragment } from './labelFragment';
+import { nodeFragment } from './nodeFragment';
+
+export const diagramFragment = `
+fragment diagramFragment on Diagram {
+  id
+  targetObjectId
+  metadata {
+    kind
+    label
+  }
+  nodes {
+    ...nodeFragment
+    borderNodes {
+      ...nodeFragment
+    }
+    childNodes {
+      ...nodeFragment
+      borderNodes {
+        ...nodeFragment
+      }
+      childNodes {
+        ...nodeFragment
+        borderNodes {
+          ...nodeFragment
+        }
+        childNodes {
+          ...nodeFragment
+          borderNodes {
+            ...nodeFragment
+          }
+          childNodes {
+            ...nodeFragment
+            borderNodes {
+              ...nodeFragment
+            }
+            childNodes {
+              ...nodeFragment
+              borderNodes {
+                ...nodeFragment
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  edges {
+    ...edgeFragment
+  }
+}
+
+${nodeFragment}
+${edgeFragment}
+${labelFragment}
+`;
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramFragment.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramFragment.types.ts
new file mode 100644
index 0000000000..f7901ef66c
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/diagramFragment.types.ts
@@ -0,0 +1,28 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { GQLEdge } from './edgeFragment.types';
+import { GQLNode } from './nodeFragment.types';
+
+export interface GQLDiagram {
+  id: string;
+  targetObjectId: string;
+  metadata: GQLRepresentationMetadata;
+  nodes: GQLNode[];
+  edges: GQLEdge[];
+}
+
+export interface GQLRepresentationMetadata {
+  kind: string;
+  label: string;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/edgeFragment.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/edgeFragment.ts
new file mode 100644
index 0000000000..7ce5103977
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/edgeFragment.ts
@@ -0,0 +1,54 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export const edgeFragment = `
+fragment edgeFragment on Edge {
+  id
+  type
+  targetObjectId
+  targetObjectKind
+  targetObjectLabel
+  descriptionId
+  sourceId
+  targetId
+  state
+  beginLabel {
+    ...labelFragment
+  }
+  centerLabel {
+    ...labelFragment
+  }
+  endLabel {
+    ...labelFragment
+  }
+  style {
+    size
+    lineStyle
+    sourceArrow
+    targetArrow
+    color
+  }
+  routingPoints {
+    x
+    y
+  }
+  sourceAnchorRelativePosition {
+    x
+    y
+  }
+  targetAnchorRelativePosition {
+    x
+    y
+  }
+}
+`;
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/edgeFragment.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/edgeFragment.types.ts
new file mode 100644
index 0000000000..092ca6566e
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/edgeFragment.types.ts
@@ -0,0 +1,44 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { GQLLabel } from './labelFragment.types';
+
+export interface GQLEdge {
+  id: string;
+  type: string;
+  targetObjectId: string;
+  targetObjectKind: string;
+  targetObjectLabel: string;
+  descriptionId: string;
+  sourceId: string;
+  targetId: string;
+  state: string;
+  beginLabel: GQLLabel | null;
+  centerLabel: GQLLabel | null;
+  endLabel: GQLLabel | null;
+  style: GQLEdgeStyle;
+  routingPoints: GQLRoutingPoint[];
+}
+
+export interface GQLEdgeStyle {
+  size: number;
+  lineStyle: string;
+  sourceArrow: string;
+  targetArrow: string;
+  color: string;
+}
+
+export interface GQLRoutingPoint {
+  x: number;
+  y: number;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/labelFragment.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/labelFragment.ts
new file mode 100644
index 0000000000..0eec37e925
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/labelFragment.ts
@@ -0,0 +1,29 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export const labelFragment = `
+fragment labelFragment on Label {
+  id
+  type
+  text
+  style {
+    color
+    fontSize
+    bold
+    italic
+    underline
+    strikeThrough
+    iconURL
+  }
+}
+`;
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/labelFragment.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/labelFragment.types.ts
new file mode 100644
index 0000000000..7990d8d6ba
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/labelFragment.types.ts
@@ -0,0 +1,29 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export interface GQLLabel {
+  id: string;
+  type: string;
+  text: string;
+  style: GQLLabelStyle;
+}
+
+export interface GQLLabelStyle {
+  color: string;
+  fontSize: number;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strikeThrough: boolean;
+  iconURL: string;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.ts
new file mode 100644
index 0000000000..07ee41d00d
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.ts
@@ -0,0 +1,56 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export const nodeFragment = `
+fragment nodeFragment on Node {
+  id
+  type
+  targetObjectId
+  targetObjectKind
+  targetObjectLabel
+  descriptionId
+  state
+  label {
+    ...labelFragment
+  }
+  style {
+    __typename
+    ... on RectangularNodeStyle {
+      color
+      borderColor
+      borderStyle
+      borderSize
+      borderRadius
+    }
+    ... on ImageNodeStyle {
+      imageURL
+      borderColor
+      borderStyle
+      borderSize
+      borderRadius
+    }
+    ... on IconLabelNodeStyle {
+      backgroundColor
+    }
+  }
+  position {
+    x
+    y
+  }
+  size {
+    width
+    height
+  }
+  userResizable
+}
+`;
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.types.ts
new file mode 100644
index 0000000000..28b6a227b9
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/graphql/subscription/nodeFragment.types.ts
@@ -0,0 +1,57 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { GQLLabel } from './labelFragment.types';
+
+export interface GQLNode {
+  id: string;
+  type: string;
+  targetObjectId: string;
+  targetObjectKind: string;
+  targetObjectLabel: string;
+  descriptionId: string;
+  state: string;
+  label: GQLLabel;
+  style: GQLNodeStyle;
+  borderNodes: GQLNode[] | undefined;
+  childNodes: GQLNode[] | undefined;
+  position: GQLPosition;
+  size: GQLSize;
+}
+
+export interface GQLPosition {
+  x: number;
+  y: number;
+}
+
+export interface GQLSize {
+  width: number;
+  height: number;
+}
+
+export interface GQLNodeStyle {
+  __typename: string;
+}
+
+export interface GQLRectangularNodeStyle extends GQLNodeStyle {
+  color: string;
+  borderColor: string;
+  borderStyle: string;
+  borderSize: string;
+  borderRadius: number;
+}
+
+export interface GQLImageNodeStyle extends GQLNodeStyle {
+  imageURL: string;
+}
+
+export interface GQLIconLabelNodeStyle extends GQLNodeStyle {}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/index.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/index.ts
new file mode 100644
index 0000000000..c3a56c7d21
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/index.ts
@@ -0,0 +1,14 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export { DiagramRepresentation } from './representation/DiagramRepresentation';
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx
new file mode 100644
index 0000000000..27f2dfb0f0
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx
@@ -0,0 +1,62 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { useEffect } from 'react';
+import {
+  EdgeChange,
+  NodeChange,
+  NodeTypes,
+  OnEdgesChange,
+  OnNodesChange,
+  ReactFlow,
+  useEdgesState,
+  useNodesState,
+} from 'reactflow';
+import { DiagramRendererProps } from './DiagramRenderer.types';
+import { ImageNode } from './ImageNode';
+import { RectangularNode } from './RectangularNode';
+
+import 'reactflow/dist/style.css';
+
+const nodeTypes: NodeTypes = {
+  rectangularNode: RectangularNode,
+  imageNode: ImageNode,
+};
+
+export const DiagramRenderer = ({ diagram }: DiagramRendererProps) => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(diagram.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(diagram.edges);
+
+  useEffect(() => {
+    setNodes(diagram.nodes);
+    setEdges(diagram.edges);
+  }, [diagram]);
+
+  const handleNodesChange: OnNodesChange = (changes: NodeChange[]) => {
+    onNodesChange(changes);
+  };
+
+  const handleEdgesChange: OnEdgesChange = (changes: EdgeChange[]) => {
+    onEdgesChange(changes);
+  };
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      nodeTypes={nodeTypes}
+      onNodesChange={handleNodesChange}
+      edges={edges}
+      onEdgesChange={handleEdgesChange}
+    />
+  );
+};
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts
new file mode 100644
index 0000000000..e5170efdfc
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts
@@ -0,0 +1,23 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { Edge, Node } from 'reactflow';
+
+export interface DiagramRendererProps {
+  diagram: Diagram;
+}
+
+export interface Diagram {
+  nodes: Node[];
+  edges: Edge[];
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/ImageNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/ImageNode.tsx
new file mode 100644
index 0000000000..ecd331e046
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/ImageNode.tsx
@@ -0,0 +1,32 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { ServerContext } from '@eclipse-sirius/sirius-components-core';
+import { memo, useContext } from 'react';
+import { Handle, NodeProps, Position } from 'reactflow';
+import { ImageNodeData } from './ImageNode.types';
+
+const imageNodeStyle = (style: Partial<React.CSSProperties>): React.CSSProperties => {
+  return { ...style };
+};
+
+export const ImageNode = memo(({ data, isConnectable }: NodeProps<ImageNodeData>) => {
+  const { httpOrigin } = useContext(ServerContext);
+  return (
+    <>
+      <img src={httpOrigin + data.imageURL} style={imageNodeStyle(data.style)} />
+      <Handle type="source" position={Position.Left} isConnectable={isConnectable} />
+      <Handle type="target" position={Position.Right} isConnectable={isConnectable} />
+    </>
+  );
+});
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/ImageNode.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/ImageNode.types.ts
new file mode 100644
index 0000000000..0389e99c55
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/ImageNode.types.ts
@@ -0,0 +1,17 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export interface ImageNodeData {
+  imageURL: string;
+  style: Partial<React.CSSProperties>;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/RectangularNode.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/RectangularNode.tsx
new file mode 100644
index 0000000000..d0b90ad35d
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/RectangularNode.tsx
@@ -0,0 +1,42 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { CSSProperties, memo } from 'react';
+import { Handle, NodeProps, Position } from 'reactflow';
+import { RectangularNodeData } from './RectangularNode.types';
+
+const rectangularNodeStyle = (style: Partial<React.CSSProperties>): React.CSSProperties => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '20px',
+    ...style,
+  };
+};
+
+const labelStyle = (style: Partial<React.CSSProperties>): CSSProperties => {
+  return {
+    ...style,
+  };
+};
+
+export const RectangularNode = memo(({ data, isConnectable }: NodeProps<RectangularNodeData>) => {
+  return (
+    <div style={rectangularNodeStyle(data.style)}>
+      <div style={labelStyle(data.label.style)}>{data.label.text}</div>
+      <Handle type="source" position={Position.Left} isConnectable={isConnectable} />
+      <Handle type="target" position={Position.Right} isConnectable={isConnectable} />
+    </div>
+  );
+});
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/RectangularNode.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/RectangularNode.types.ts
new file mode 100644
index 0000000000..935275e00d
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/RectangularNode.types.ts
@@ -0,0 +1,22 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+export interface RectangularNodeData {
+  label: RectangularNodeLabel;
+  style: Partial<React.CSSProperties>;
+}
+
+export interface RectangularNodeLabel {
+  text: string;
+  style: Partial<React.CSSProperties>;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.tsx b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.tsx
new file mode 100644
index 0000000000..9e1dab46ac
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.tsx
@@ -0,0 +1,88 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { OnSubscriptionDataOptions, gql, useSubscription } from '@apollo/client';
+import { RepresentationComponentProps } from '@eclipse-sirius/sirius-components-core';
+import { useState } from 'react';
+import { convertDiagram } from '../converter/convertDiagram';
+import { diagramEventSubscription } from '../graphql/subscription/diagramEventSubscription';
+import {
+  GQLDiagramEventPayload,
+  GQLDiagramRefreshedEventPayload,
+} from '../graphql/subscription/diagramEventSubscription.types';
+import { DiagramRenderer } from '../renderer/DiagramRenderer';
+import { Diagram } from '../renderer/DiagramRenderer.types';
+import {
+  DiagramRepresentationState,
+  GQLDiagramEventData,
+  GQLDiagramEventVariables,
+} from './DiagramRepresentation.types';
+
+const subscription = gql(diagramEventSubscription);
+
+const isDiagramRefreshedEventPayload = (payload: GQLDiagramEventPayload): payload is GQLDiagramRefreshedEventPayload =>
+  payload.__typename === 'DiagramRefreshedEventPayload';
+
+export const DiagramRepresentation = ({ editingContextId, representationId }: RepresentationComponentProps) => {
+  const [state, setState] = useState<DiagramRepresentationState>({
+    id: crypto.randomUUID(),
+    diagram: null,
+    complete: false,
+    message: null,
+  });
+
+  const variables: GQLDiagramEventVariables = {
+    input: {
+      id: state.id,
+      editingContextId,
+      diagramId: representationId,
+    },
+  };
+
+  const onSubscriptionData = ({ subscriptionData }: OnSubscriptionDataOptions<GQLDiagramEventData>) => {
+    if (subscriptionData.data) {
+      const { diagramEvent } = subscriptionData.data;
+      if (isDiagramRefreshedEventPayload(diagramEvent)) {
+        const { diagram } = diagramEvent;
+        const convertedDiagram: Diagram = convertDiagram(diagram);
+        setState((prevState) => ({ ...prevState, diagram: convertedDiagram }));
+      }
+    }
+  };
+
+  const onSubscriptionComplete = () => {
+    setState((prevState) => ({ ...prevState, diagram: null, complete: true }));
+  };
+
+  const { error } = useSubscription<GQLDiagramEventData>(subscription, {
+    variables,
+    fetchPolicy: 'no-cache',
+    onSubscriptionData,
+    onSubscriptionComplete,
+  });
+
+  if (state.message) {
+    return <div>{state.message}</div>;
+  }
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+  if (state.complete) {
+    return <div>The representation is not available anymore</div>;
+  }
+  if (!state.diagram) {
+    return <div></div>;
+  }
+
+  return <DiagramRenderer diagram={state.diagram} />;
+};
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.types.ts b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.types.ts
new file mode 100644
index 0000000000..189497bfad
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.types.ts
@@ -0,0 +1,36 @@
+/*******************************************************************************
+ * Copyright (c) 2023 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import { GQLDiagramEventPayload } from '../graphql/subscription/diagramEventSubscription.types';
+import { Diagram } from '../renderer/DiagramRenderer.types';
+
+export interface DiagramRepresentationState {
+  id: string;
+  diagram: Diagram | null;
+  complete: boolean;
+  message: string | null;
+}
+
+export interface GQLDiagramEventData {
+  diagramEvent: GQLDiagramEventPayload;
+}
+
+export interface GQLDiagramEventVariables {
+  input: GQLDiagramEventInput;
+}
+
+export interface GQLDiagramEventInput {
+  id: string;
+  editingContextId: string;
+  diagramId: string;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/tsconfig.json b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/tsconfig.json
new file mode 100644
index 0000000000..89472f2182
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@eclipse-sirius/sirius-components-tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams-reactflow/vite.config.js b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/vite.config.js
new file mode 100644
index 0000000000..dd3f96a79e
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams-reactflow/vite.config.js
@@ -0,0 +1,23 @@
+import image from "@rollup/plugin-image";
+import react from "@vitejs/plugin-react";
+import path from "node:path";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [peerDepsExternal(), react(), image()],
+  build: {
+    lib: {
+      name: "sirius-components-diagrams-reactflow",
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "umd"],
+      fileName: (format) => `sirius-components-diagrams-reactflow.${format}.js`,
+    },
+  },
+  test: {
+    environment: "jsdom",
+    coverage: {
+      reporter: ["text", "html"],
+    },
+  },
+});
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx
index 97265b9a80..20702c8d9f 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx
@@ -16,11 +16,12 @@ import {
   Selection,
   SelectionEntry,
   ServerContext,
+  ServerContextValue,
   Toast,
 } from '@eclipse-sirius/sirius-components-core';
 import { SelectionDialog } from '@eclipse-sirius/sirius-components-selection';
-import makeStyles from '@material-ui/core/styles/makeStyles';
 import Typography from '@material-ui/core/Typography';
+import makeStyles from '@material-ui/core/styles/makeStyles';
 import { useMachine } from '@xstate/react';
 import { useCallback, useContext, useEffect, useRef } from 'react';
 import { HoverFeedbackAction, SEdge, SModelElement, SNode, SPort } from 'sprotty';
@@ -95,7 +96,6 @@ import {
   DiagramRefreshedEvent,
   DiagramRepresentationContext,
   DiagramRepresentationEvent,
-  diagramRepresentationMachine,
   HandleDiagramDescriptionResultEvent,
   HandleSelectedObjectInSelectionDialogEvent,
   HideToastEvent,
@@ -103,9 +103,9 @@ import {
   ResetSelectedObjectInSelectionDialogEvent,
   ResetToolsEvent,
   SchemaValue,
+  SelectZoomLevelEvent,
   SelectedElementEvent,
   SelectionEvent,
-  SelectZoomLevelEvent,
   SetActiveConnectorToolsEvent,
   SetActiveToolEvent,
   SetContextualMenuEvent,
@@ -115,6 +115,7 @@ import {
   ShowToastEvent,
   SubscribersUpdatedEvent,
   SwitchRepresentationEvent,
+  diagramRepresentationMachine,
 } from './DiagramRepresentationMachine';
 import { getDiagramDescriptionQuery } from './GetDiagramDescriptionQuery';
 import { GQLGetDiagramDescriptionData, GQLGetDiagramDescriptionVariables } from './GetDiagramDescriptionQuery.types';
@@ -339,7 +340,7 @@ export const DiagramRepresentation = ({
   setSelection,
 }: RepresentationComponentProps) => {
   const diagramDomElement = useRef<HTMLDivElement | null>(null);
-  const { httpOrigin } = useContext(ServerContext);
+  const { httpOrigin } = useContext<ServerContextValue>(ServerContext);
   const classes = useDiagramRepresentationStyle();
   const [{ value, context }, dispatch] = useMachine<DiagramRepresentationContext, DiagramRepresentationEvent>(
     diagramRepresentationMachine
diff --git a/packages/sirius-web/frontend/sirius-web/package.json b/packages/sirius-web/frontend/sirius-web/package.json
index 13ef0ca264..0f33b3ff6b 100644
--- a/packages/sirius-web/frontend/sirius-web/package.json
+++ b/packages/sirius-web/frontend/sirius-web/package.json
@@ -17,6 +17,7 @@
     "@eclipse-sirius/sirius-components-charts": "~2023.4.0",
     "@eclipse-sirius/sirius-components-core": "~2023.4.0",
     "@eclipse-sirius/sirius-components-diagrams": "~2023.4.0",
+    "@eclipse-sirius/sirius-components-diagrams-reactflow": "~2023.4.0",
     "@eclipse-sirius/sirius-components-formdescriptioneditors": "~2023.4.0",
     "@eclipse-sirius/sirius-components-forms": "~2023.4.0",
     "@eclipse-sirius/sirius-components-selection": "~2023.4.0",
diff --git a/packages/sirius-web/frontend/sirius-web/src/index.tsx b/packages/sirius-web/frontend/sirius-web/src/index.tsx
index 97445f5810..5410cacb04 100644
--- a/packages/sirius-web/frontend/sirius-web/src/index.tsx
+++ b/packages/sirius-web/frontend/sirius-web/src/index.tsx
@@ -19,6 +19,7 @@ import {
   theme,
 } from '@eclipse-sirius/sirius-components-core';
 import { DiagramRepresentation } from '@eclipse-sirius/sirius-components-diagrams';
+import { DiagramRepresentation as ReactFlowDiagramRepresentation } from '@eclipse-sirius/sirius-components-diagrams-reactflow';
 import { FormDescriptionEditorRepresentation } from '@eclipse-sirius/sirius-components-formdescriptioneditors';
 import {
   FormRepresentation,
@@ -110,7 +111,9 @@ const registry = {
     const query = representation.kind.substring(representation.kind.indexOf('?') + 1, representation.kind.length);
     const params = new URLSearchParams(query);
     const type = params.get('type');
-    if (type === 'Diagram') {
+    if (type === 'Diagram' && representation.label.endsWith('__REACT_FLOW')) {
+      return ReactFlowDiagramRepresentation;
+    } else if (type === 'Diagram') {
       return DiagramRepresentation;
     } else if (type === 'Form') {
       return FormRepresentation;