diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 89aa4f90f3e..f43f06fd8f0 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -76,6 +76,8 @@
 - https://github.com/eclipse-sirius/sirius-web/issues/3595[#3595] [core] Avoid re-rendering the workbench when the selection does not really change
 - https://github.com/eclipse-sirius/sirius-web/issues/3601[#3601] [sirius-web] Extract test helper classes to sirius-web-tests
 - https://github.com/eclipse-sirius/sirius-web/issues/3597[#3597] [core] Improve the creation of `RepresentationEventProcessor`
+- https://github.com/eclipse-sirius/sirius-web/issues/3533[#3553] [diagram] Add a dedicated component to handle diagram subscription
+
 
 == v2024.5.0
 
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts
index 3dc62d88791..82a68b75225 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts
@@ -16,7 +16,6 @@ import { DiagramContextValue } from './DiagramContext.types';
 const value: DiagramContextValue = {
   editingContextId: '',
   diagramId: '',
-  refreshEventPayloadId: '',
   readOnly: false,
 };
 
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.types.ts
index d5322e5b6d9..ecae4472105 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.types.ts
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.types.ts
@@ -14,6 +14,5 @@
 export interface DiagramContextValue {
   editingContextId: string;
   diagramId: string;
-  refreshEventPayloadId: string;
   readOnly: boolean;
 }
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx
index b3a6fe4b555..0273d6a5e46 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx
@@ -79,7 +79,7 @@ const GRID_STEP: number = 10;
 export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRendererProps) => {
   const { readOnly } = useContext<DiagramContextValue>(DiagramContext);
   const { diagramDescription } = useDiagramDescription();
-  const { getEdges, onEdgesChange, getNodes, setEdges, setNodes } = useStore();
+  const { getEdges, onEdgesChange, getNodes, setEdges, setNodes, setRefreshEventPayloadId } = useStore();
   const nodes = getNodes();
   const edges = getEdges();
 
@@ -132,6 +132,7 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
 
       setNodes(convertedDiagram.nodes);
       setEdges(convertedDiagram.edges);
+      setRefreshEventPayloadId(diagramRefreshedEventPayload.id);
       fitToScreen();
     } else if (cause === 'refresh') {
       const previousDiagram: RawDiagram = {
@@ -145,6 +146,7 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
 
         setNodes(laidOutDiagram.nodes);
         setEdges(laidOutDiagram.edges);
+        setRefreshEventPayloadId(diagramRefreshedEventPayload.id);
         closeAllPalettes();
 
         synchronizeLayoutData(diagramRefreshedEventPayload.id, laidOutDiagram);
@@ -285,80 +287,85 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
   );
 
   return (
-    <ReactFlow
-      nodes={nodes}
-      nodeTypes={nodeTypes}
-      onNodesChange={handleNodesChange}
-      edges={edges}
-      edgeTypes={edgeTypes}
-      edgesUpdatable={!readOnly}
-      onKeyDown={onKeyDown}
-      onConnect={onConnect}
-      onConnectStart={onConnectStart}
-      onConnectEnd={onConnectEnd}
-      connectionLineComponent={ConnectionLine}
-      onEdgesChange={handleEdgesChange}
-      onEdgeUpdate={reconnectEdge}
-      onPaneClick={handlePaneClick}
-      onEdgeClick={handleDiagramElementCLick}
-      onNodeClick={handleDiagramElementCLick}
-      onMove={handleMove}
-      nodeDragThreshold={1}
-      onDrop={onDrop}
-      onDragOver={onDragOver}
-      onNodeDrag={handleNodeDrag}
-      onNodeDragStart={onNodeDragStart}
-      onNodeDragStop={onNodeDragStop}
-      onNodeMouseEnter={onNodeMouseEnter}
-      onNodeMouseLeave={onNodeMouseLeave}
-      onSelectionStart={handleSelectionStart}
-      onSelectionEnd={handleSelectionEnd}
-      maxZoom={40}
-      minZoom={0.1}
-      snapToGrid={snapToGrid}
-      snapGrid={useMemo(() => [GRID_STEP, GRID_STEP], [])}
-      connectionMode={ConnectionMode.Loose}
-      zoomOnDoubleClick={false}
-      connectionLineType={ConnectionLineType.SmoothStep}
-      ref={ref}>
-      {snapToGrid ? (
-        <>
-          <Background
-            id="small-grid"
-            style={{ backgroundColor }}
-            variant={BackgroundVariant.Lines}
-            gap={GRID_STEP}
-            color={smallGridColor}
-          />
-          <Background
-            id="large-grid"
-            variant={BackgroundVariant.Lines}
-            gap={10 * GRID_STEP}
-            offset={1}
-            color={largeGridColor}
-          />
-        </>
-      ) : (
-        <Background style={{ backgroundColor }} color={backgroundColor} />
-      )}
-      <DiagramPanel
+    <div
+      style={{ display: 'inline-block', position: 'relative' }}
+      data-representation-kind="diagram"
+      data-representation-label={diagramRefreshedEventPayload.diagram.metadata.label}>
+      <ReactFlow
+        nodes={nodes}
+        nodeTypes={nodeTypes}
+        onNodesChange={handleNodesChange}
+        edges={edges}
+        edgeTypes={edgeTypes}
+        edgesUpdatable={!readOnly}
+        onKeyDown={onKeyDown}
+        onConnect={onConnect}
+        onConnectStart={onConnectStart}
+        onConnectEnd={onConnectEnd}
+        connectionLineComponent={ConnectionLine}
+        onEdgesChange={handleEdgesChange}
+        onEdgeUpdate={reconnectEdge}
+        onPaneClick={handlePaneClick}
+        onEdgeClick={handleDiagramElementCLick}
+        onNodeClick={handleDiagramElementCLick}
+        onMove={handleMove}
+        nodeDragThreshold={1}
+        onDrop={onDrop}
+        onDragOver={onDragOver}
+        onNodeDrag={handleNodeDrag}
+        onNodeDragStart={onNodeDragStart}
+        onNodeDragStop={onNodeDragStop}
+        onNodeMouseEnter={onNodeMouseEnter}
+        onNodeMouseLeave={onNodeMouseLeave}
+        onSelectionStart={handleSelectionStart}
+        onSelectionEnd={handleSelectionEnd}
+        maxZoom={40}
+        minZoom={0.1}
         snapToGrid={snapToGrid}
-        onSnapToGrid={onSnapToGrid}
-        helperLines={helperLinesEnabled}
-        onHelperLines={setHelperLinesEnabled}
-        reactFlowWrapper={ref}
-      />
-      <GroupPalette
-        x={groupPalettePosition?.x}
-        y={groupPalettePosition?.y}
-        isOpened={isGroupPaletteOpened}
-        refElementId={groupPaletteRefElementId}
-        hidePalette={hideGroupPalette}
-      />
-      <DiagramPalette diagramElementId={diagramRefreshedEventPayload.diagram.id} />
-      {diagramDescription.debug ? <DebugPanel reactFlowWrapper={ref} /> : null}
-      <ConnectorContextualMenu />
-      {helperLinesEnabled ? <HelperLines horizontal={horizontalHelperLine} vertical={verticalHelperLine} /> : null}
-    </ReactFlow>
+        snapGrid={useMemo(() => [GRID_STEP, GRID_STEP], [])}
+        connectionMode={ConnectionMode.Loose}
+        zoomOnDoubleClick={false}
+        connectionLineType={ConnectionLineType.SmoothStep}
+        ref={ref}>
+        {snapToGrid ? (
+          <>
+            <Background
+              id="small-grid"
+              style={{ backgroundColor }}
+              variant={BackgroundVariant.Lines}
+              gap={GRID_STEP}
+              color={smallGridColor}
+            />
+            <Background
+              id="large-grid"
+              variant={BackgroundVariant.Lines}
+              gap={10 * GRID_STEP}
+              offset={1}
+              color={largeGridColor}
+            />
+          </>
+        ) : (
+          <Background style={{ backgroundColor }} color={backgroundColor} />
+        )}
+        <DiagramPanel
+          snapToGrid={snapToGrid}
+          onSnapToGrid={onSnapToGrid}
+          helperLines={helperLinesEnabled}
+          onHelperLines={setHelperLinesEnabled}
+          reactFlowWrapper={ref}
+        />
+        <GroupPalette
+          x={groupPalettePosition?.x}
+          y={groupPalettePosition?.y}
+          isOpened={isGroupPaletteOpened}
+          refElementId={groupPaletteRefElementId}
+          hidePalette={hideGroupPalette}
+        />
+        <DiagramPalette diagramElementId={diagramRefreshedEventPayload.diagram.id} />
+        {diagramDescription.debug ? <DebugPanel reactFlowWrapper={ref} /> : null}
+        <ConnectorContextualMenu />
+        {helperLinesEnabled ? <HelperLines horizontal={horizontalHelperLine} vertical={verticalHelperLine} /> : null}
+      </ReactFlow>
+    </div>
   );
 });
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/adjust-size/useAdjustSize.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/adjust-size/useAdjustSize.tsx
index e375691a50c..a47bd587436 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/adjust-size/useAdjustSize.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/adjust-size/useAdjustSize.tsx
@@ -11,23 +11,21 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { Node, useReactFlow } from 'reactflow';
-import { useContext } from 'react';
+import { useStore } from '../../representation/useStore';
+import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { RawDiagram } from '../layout/layout.types';
-import { UseAdjustSizeValue } from './useAdjustSize.types';
 import { useLayout } from '../layout/useLayout';
 import { useSynchronizeLayoutData } from '../layout/useSynchronizeLayoutData';
-import { NodeData, EdgeData } from '../DiagramRenderer.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
-import { DiagramContext } from '../../contexts/DiagramContext';
 import { useDiagramElementPalette } from '../palette/useDiagramElementPalette';
+import { UseAdjustSizeValue } from './useAdjustSize.types';
 
 export const useAdjustSize = (): UseAdjustSizeValue => {
   const { layout } = useLayout();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { hideDiagramElementPalette } = useDiagramElementPalette();
   const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<NodeData, EdgeData>();
+  const { refreshEventPayloadId } = useStore();
 
   const adjustSize = (nodeId: string): void => {
     const nodes: Node<NodeData, string>[] = [...getNodes()] as Node<NodeData, DiagramNodeType>[];
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts
index 2f5fa754ce6..a0d913d0a9d 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts
@@ -12,11 +12,9 @@
  *******************************************************************************/
 import { LayoutOptions } from 'elkjs/lib/elk-api';
 import ELK, { ElkLabel, ElkNode } from 'elkjs/lib/elk.bundled';
-import { useContext } from 'react';
 import { Edge, Node, useReactFlow, useViewport } from 'reactflow';
-import { DiagramContext } from '../../contexts/DiagramContext';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
 import { useDiagramDescription } from '../../contexts/useDiagramDescription';
+import { useStore } from '../../representation/useStore';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { ListNodeData } from '../node/ListNode.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
@@ -117,11 +115,11 @@ const computeLabels = (
 
 export const useArrangeAll = (reactFlowWrapper: React.MutableRefObject<HTMLDivElement | null>): UseArrangeAllValue => {
   const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<NodeData, EdgeData>();
+  const { refreshEventPayloadId } = useStore();
   const viewport = useViewport();
   const { layout } = useLayout();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { diagramDescription } = useDiagramDescription();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
   const { resolveNodeOverlap } = useOverlap();
 
   const elk = new ELK();
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts
index bbdfc8b1558..ea723a4c1b6 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useDistributeElements.ts
@@ -10,18 +10,17 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { useCallback, useContext } from 'react';
+import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
+import { useCallback } from 'react';
 import { Node, XYPosition, useReactFlow } from 'reactflow';
-import { UseDistributeElementsValue } from './useDistributeElements.types';
-import { NodeData, EdgeData } from '../DiagramRenderer.types';
+import { useStore } from '../../representation/useStore';
+import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
-import { useSynchronizeLayoutData } from './useSynchronizeLayoutData';
+import { useOverlap } from '../overlap/useOverlap';
 import { RawDiagram } from './layout.types';
+import { UseDistributeElementsValue } from './useDistributeElements.types';
 import { useLayout } from './useLayout';
-import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
-import { DiagramContextValue } from '../../contexts/DiagramContext.types';
-import { DiagramContext } from '../../contexts/DiagramContext';
-import { useOverlap } from '../overlap/useOverlap';
+import { useSynchronizeLayoutData } from './useSynchronizeLayoutData';
 
 function getComparePositionFn(direction: 'horizontal' | 'vertical') {
   return (node1: Node, node2: Node) => {
@@ -37,10 +36,10 @@ function getComparePositionFn(direction: 'horizontal' | 'vertical') {
 const arrangeGapBetweenElements: number = 32;
 export const useDistributeElements = (): UseDistributeElementsValue => {
   const { getNodes, getEdges, setNodes } = useReactFlow<NodeData, EdgeData>();
+  const { refreshEventPayloadId } = useStore();
   const { layout } = useLayout();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { addMessages } = useMultiToast();
-  const { refreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
   const { resolveNodeOverlap } = useOverlap();
 
   const processLayoutTool = (
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 7dcbec8c969..64082c00c13 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx
@@ -11,22 +11,13 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import { gql, OnDataOptions, useQuery, useSubscription } from '@apollo/client';
+import { gql, useQuery } from '@apollo/client';
 import { RepresentationComponentProps, useMultiToast } from '@eclipse-sirius/sirius-components-core';
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ReactFlowProvider } from 'reactflow';
 import { DiagramContext } from '../contexts/DiagramContext';
 import { DiagramDescriptionContext } from '../contexts/DiagramDescriptionContext';
-import { NodeTypeContext } from '../contexts/NodeContext';
-import { NodeTypeContextValue } from '../contexts/NodeContext.types';
-import { diagramEventSubscription } from '../graphql/subscription/diagramEventSubscription';
-import {
-  GQLDiagramEventPayload,
-  GQLDiagramRefreshedEventPayload,
-} from '../graphql/subscription/diagramEventSubscription.types';
-import { GraphQLNodeStyleFragment } from '../graphql/subscription/nodeFragment.types';
 import { ConnectorContextProvider } from '../renderer/connector/ConnectorContext';
-import { DiagramRenderer } from '../renderer/DiagramRenderer';
 import { DiagramDirectEditContextProvider } from '../renderer/direct-edit/DiagramDirectEditContext';
 import { DropNodeContextProvider } from '../renderer/dropNode/DropNodeContext';
 import { MarkerDefinitions } from '../renderer/edge/MarkerDefinitions';
@@ -39,13 +30,10 @@ import {
   GQLDiagramDescription,
   GQLDiagramDescriptionData,
   GQLDiagramDescriptionVariables,
-  GQLDiagramEventData,
-  GQLDiagramEventVariables,
 } from './DiagramRepresentation.types';
+import { DiagramSubscriptionProvider } from './DiagramSubscriptionProvider';
 import { StoreContextProvider } from './StoreContext';
 
-const subscription = (contributions: GraphQLNodeStyleFragment[]) => gql(diagramEventSubscription(contributions));
-
 export const getDiagramDescription = gql`
   query getDiagramDescription($editingContextId: ID!, $representationId: ID!) {
     viewer {
@@ -77,9 +65,6 @@ export const getDiagramDescription = gql`
   }
 `;
 
-const isDiagramRefreshedEventPayload = (payload: GQLDiagramEventPayload): payload is GQLDiagramRefreshedEventPayload =>
-  payload.__typename === 'DiagramRefreshedEventPayload';
-
 export const DiagramRepresentation = ({
   editingContextId,
   representationId,
@@ -87,29 +72,10 @@ export const DiagramRepresentation = ({
 }: RepresentationComponentProps) => {
   const [state, setState] = useState<DiagramRepresentationState>({
     id: crypto.randomUUID(),
-    diagramRefreshedEventPayload: null,
-    complete: false,
     message: null,
   });
   const { addErrorMessage } = useMultiToast();
 
-  const variables: GQLDiagramEventVariables = {
-    input: {
-      id: state.id,
-      editingContextId,
-      diagramId: representationId,
-    },
-  };
-
-  const onData = ({ data }: OnDataOptions<GQLDiagramEventData>) => {
-    if (data.data) {
-      const { diagramEvent } = data.data;
-      if (isDiagramRefreshedEventPayload(diagramEvent)) {
-        setState((prevState) => ({ ...prevState, diagramRefreshedEventPayload: diagramEvent }));
-      }
-    }
-  };
-
   const {
     loading: diagramDescriptionLoading,
     data: diagramDescriptionData,
@@ -119,7 +85,6 @@ export const DiagramRepresentation = ({
       editingContextId,
       representationId,
     },
-    skip: state.diagramRefreshedEventPayload === null,
   });
 
   useEffect(() => {
@@ -135,32 +100,14 @@ export const DiagramRepresentation = ({
     }
   }, [diagramDescriptionLoading, diagramDescriptionData, diagramDescriptionError]);
 
-  const onComplete = () => {
-    setState((prevState) => ({ ...prevState, diagramRefreshedEventPayload: null, complete: true }));
-  };
-
-  const { graphQLNodeStyleFragments } = useContext<NodeTypeContextValue>(NodeTypeContext);
-
-  const { error } = useSubscription<GQLDiagramEventData>(subscription(graphQLNodeStyleFragments), {
-    variables,
-    fetchPolicy: 'no-cache',
-    onData,
-    onComplete,
-  });
-
   const diagramDescription: GQLDiagramDescription | undefined =
     diagramDescriptionData?.viewer.editingContext.representation.description;
 
   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.diagramRefreshedEventPayload || !diagramDescription) {
+
+  if (!diagramDescription) {
     return <div></div>;
   }
 
@@ -170,7 +117,6 @@ export const DiagramRepresentation = ({
         value={{
           editingContextId,
           diagramId: representationId,
-          refreshEventPayloadId: state.diagramRefreshedEventPayload.id,
           readOnly,
         }}>
         <DiagramDescriptionContext.Provider value={{ diagramDescription }}>
@@ -181,18 +127,12 @@ export const DiagramRepresentation = ({
                   <ConnectorContextProvider>
                     <DropNodeContextProvider>
                       <NodeContextProvider>
-                        <div
-                          style={{ display: 'inline-block', position: 'relative' }}
-                          data-representation-kind="diagram"
-                          data-representation-label={state.diagramRefreshedEventPayload.diagram.metadata.label}>
-                          <MarkerDefinitions />
-                          <FullscreenContextProvider>
-                            <DiagramRenderer
-                              key={state.diagramRefreshedEventPayload.diagram.id}
-                              diagramRefreshedEventPayload={state.diagramRefreshedEventPayload}
-                            />
-                          </FullscreenContextProvider>
-                        </div>
+                        <MarkerDefinitions />
+                        <FullscreenContextProvider>
+                          <DiagramSubscriptionProvider
+                            diagramId={representationId}
+                            editingContextId={editingContextId}></DiagramSubscriptionProvider>
+                        </FullscreenContextProvider>
                       </NodeContextProvider>
                     </DropNodeContextProvider>
                   </ConnectorContextProvider>
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.types.ts
index ec9a8868015..30ff08eb3a7 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.types.ts
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.types.ts
@@ -12,15 +12,10 @@
  *******************************************************************************/
 
 import { GQLNodeDescription } from '../graphql/query/nodeDescriptionFragment.types';
-import {
-  GQLDiagramEventPayload,
-  GQLDiagramRefreshedEventPayload,
-} from '../graphql/subscription/diagramEventSubscription.types';
+import { GQLDiagramEventPayload } from '../graphql/subscription/diagramEventSubscription.types';
 
 export interface DiagramRepresentationState {
   id: string;
-  diagramRefreshedEventPayload: GQLDiagramRefreshedEventPayload | null;
-  complete: boolean;
   message: string | null;
 }
 
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramSubscriptionProvider.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramSubscriptionProvider.tsx
new file mode 100644
index 00000000000..08837a4306d
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramSubscriptionProvider.tsx
@@ -0,0 +1,83 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * 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 { gql, OnDataOptions, useSubscription } from '@apollo/client';
+import { memo, useContext, useState } from 'react';
+import { NodeTypeContext } from '../contexts/NodeContext';
+import { NodeTypeContextValue } from '../contexts/NodeContext.types';
+import { diagramEventSubscription } from '../graphql/subscription/diagramEventSubscription';
+import {
+  GQLDiagramEventPayload,
+  GQLDiagramRefreshedEventPayload,
+} from '../graphql/subscription/diagramEventSubscription.types';
+import { GraphQLNodeStyleFragment } from '../graphql/subscription/nodeFragment.types';
+import { DiagramRenderer } from '../renderer/DiagramRenderer';
+import { GQLDiagramEventData, GQLDiagramEventVariables } from './DiagramRepresentation.types';
+import { DiagramSubscriptionProviderProps, DiagramSubscriptionState } from './DiagramSubscriptionProvider.types';
+
+const subscription = (contributions: GraphQLNodeStyleFragment[]) => gql(diagramEventSubscription(contributions));
+
+const isDiagramRefreshedEventPayload = (payload: GQLDiagramEventPayload): payload is GQLDiagramRefreshedEventPayload =>
+  payload.__typename === 'DiagramRefreshedEventPayload';
+
+export const DiagramSubscriptionProvider = memo(({ diagramId, editingContextId }: DiagramSubscriptionProviderProps) => {
+  const [state, setState] = useState<DiagramSubscriptionState>({
+    id: crypto.randomUUID(),
+    diagramRefreshedEventPayload: null,
+    complete: false,
+    message: '',
+  });
+
+  const variables: GQLDiagramEventVariables = {
+    input: {
+      id: state.id,
+      editingContextId,
+      diagramId,
+    },
+  };
+
+  const onData = ({ data }: OnDataOptions<GQLDiagramEventData>) => {
+    if (data.data) {
+      const { diagramEvent } = data.data;
+      if (isDiagramRefreshedEventPayload(diagramEvent)) {
+        setState((prevState) => ({ ...prevState, diagramRefreshedEventPayload: diagramEvent }));
+      }
+    }
+  };
+
+  const onComplete = () => {
+    setState((prevState) => ({ ...prevState, diagramRefreshedEventPayload: null, complete: true }));
+  };
+
+  const { graphQLNodeStyleFragments } = useContext<NodeTypeContextValue>(NodeTypeContext);
+
+  const { error } = useSubscription<GQLDiagramEventData>(subscription(graphQLNodeStyleFragments), {
+    variables,
+    fetchPolicy: 'no-cache',
+    onData,
+    onComplete,
+    skip: graphQLNodeStyleFragments === null,
+  });
+
+  if (error) {
+    return <div>{error.message}</div>;
+  }
+  if (state.complete) {
+    return <div>The representation is not available anymore</div>;
+  }
+  if (!state.diagramRefreshedEventPayload) {
+    return <div></div>;
+  }
+
+  return <DiagramRenderer diagramRefreshedEventPayload={state.diagramRefreshedEventPayload} />;
+});
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramSubscriptionProvider.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramSubscriptionProvider.types.ts
new file mode 100644
index 00000000000..a1f46515337
--- /dev/null
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramSubscriptionProvider.types.ts
@@ -0,0 +1,30 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * 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 { GQLDiagramRefreshedEventPayload } from '../graphql/subscription/diagramEventSubscription.types';
+
+export type DiagramSubscriptionContextValue = {
+  diagramRefreshedEventPayload: GQLDiagramRefreshedEventPayload | null;
+  refreshEventPayloadId: string;
+};
+
+export type DiagramSubscriptionState = {
+  id: string;
+  diagramRefreshedEventPayload: GQLDiagramRefreshedEventPayload | null;
+  complete: boolean;
+  message: string;
+};
+
+export interface DiagramSubscriptionProviderProps {
+  editingContextId: string;
+  diagramId: string;
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/StoreContext.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/StoreContext.tsx
index 2884389f519..49eceed0659 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/StoreContext.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/StoreContext.tsx
@@ -22,6 +22,8 @@ const defaultValue: StoreContextValue = {
   getEdges: () => [],
   getEdge: () => undefined,
   setEdges: () => {},
+  refreshEventPayloadId: '',
+  setRefreshEventPayloadId: () => {},
   onNodesChange: () => {},
   onEdgesChange: () => {},
 };
@@ -31,6 +33,7 @@ export const StoreContext = React.createContext<StoreContextValue>(defaultValue)
 export const StoreContextProvider = ({ children }) => {
   const [nodes, setNodes] = useState<Node[]>([]);
   const [edges, setEdges] = useState<Edge[]>([]);
+  const [refreshEventPayloadId, setRefreshEventPayloadId] = useState<string>('');
 
   const onNodesChange = useCallback(
     (changes: NodeChange[]) => setNodes((prevState) => applyNodeChanges(changes, prevState)),
@@ -51,6 +54,8 @@ export const StoreContextProvider = ({ children }) => {
         getNodes: () => nodes,
         getEdge: (id: string) => edges.find((edge) => edge.id === id),
         getNode: (id: string) => nodes.find((node) => node.id === id),
+        refreshEventPayloadId,
+        setRefreshEventPayloadId,
         onNodesChange,
         onEdgesChange,
       }}>
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/StoreContext.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/StoreContext.types.ts
index 7f16ccb85f2..31d40704ed7 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/StoreContext.types.ts
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/StoreContext.types.ts
@@ -16,8 +16,6 @@ import { Edge, EdgeChange, Node, NodeChange } from 'reactflow';
 import { EdgeData, NodeData } from '../renderer/DiagramRenderer.types';
 
 export type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
-export type SetNodesRefType = React.MutableRefObject<SetState<Node<NodeData>[]>> | null;
-export type SetEdgesRefType = React.MutableRefObject<SetState<Edge<EdgeData>[]>> | null;
 
 export interface StoreContextState {
   nodes: Node<NodeData>[];
@@ -31,6 +29,8 @@ export type StoreContextValue = {
   getEdges: () => Edge<EdgeData>[];
   getEdge: (id: string) => Edge<EdgeData> | undefined;
   setEdges: Dispatch<SetStateAction<Edge<EdgeData>[]>>;
+  setRefreshEventPayloadId: Dispatch<SetStateAction<string>>;
+  refreshEventPayloadId: string;
   onNodesChange: (changes: NodeChange[]) => void;
   onEdgesChange: (changes: EdgeChange[]) => void;
 };
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/useStore.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/useStore.tsx
index 2564fc4d2b2..6185ac84d09 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/useStore.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/useStore.tsx
@@ -17,8 +17,18 @@ import { StoreContextValue } from './StoreContext.types';
 import { useStoreValue } from './useStore.types';
 
 export const useStore = (): useStoreValue => {
-  const { getEdges, getNodes, onEdgesChange, onNodesChange, setEdges, setNodes, getEdge, getNode } =
-    useContext<StoreContextValue>(StoreContext);
+  const {
+    getEdges,
+    getNodes,
+    onEdgesChange,
+    onNodesChange,
+    setEdges,
+    setNodes,
+    getEdge,
+    getNode,
+    refreshEventPayloadId,
+    setRefreshEventPayloadId,
+  } = useContext<StoreContextValue>(StoreContext);
 
   return {
     getEdges,
@@ -29,5 +39,7 @@ export const useStore = (): useStoreValue => {
     setNodes,
     getEdge,
     getNode,
+    refreshEventPayloadId,
+    setRefreshEventPayloadId,
   };
 };
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/useStore.types.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/useStore.types.ts
index 7de9a7dcee3..eb643c60cbd 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/representation/useStore.types.ts
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/useStore.types.ts
@@ -21,6 +21,8 @@ export interface useStoreValue {
   getEdges: () => Edge<EdgeData>[];
   getEdge: (id: string) => Edge<EdgeData> | undefined;
   setEdges: Dispatch<SetStateAction<Edge<EdgeData>[]>>;
+  refreshEventPayloadId: string;
+  setRefreshEventPayloadId: Dispatch<SetStateAction<string>>;
   onNodesChange: (changes: NodeChange[]) => void;
   onEdgesChange: (changes: EdgeChange[]) => void;
 }
diff --git a/packages/sirius-web/backend/sirius-web-starter/src/main/java/org/eclipse/sirius/web/starter/EditingContextDispatcher.java b/packages/sirius-web/backend/sirius-web-starter/src/main/java/org/eclipse/sirius/web/starter/EditingContextDispatcher.java
index 6a70c872aa9..9cf91ed88f8 100644
--- a/packages/sirius-web/backend/sirius-web-starter/src/main/java/org/eclipse/sirius/web/starter/EditingContextDispatcher.java
+++ b/packages/sirius-web/backend/sirius-web-starter/src/main/java/org/eclipse/sirius/web/starter/EditingContextDispatcher.java
@@ -15,6 +15,8 @@
 import java.util.Objects;
 
 import org.eclipse.sirius.components.collaborative.api.IEditingContextEventProcessorRegistry;
+import org.eclipse.sirius.components.collaborative.diagrams.api.DiagramConfiguration;
+import org.eclipse.sirius.components.collaborative.diagrams.api.IDiagramInput;
 import org.eclipse.sirius.components.core.api.ErrorPayload;
 import org.eclipse.sirius.components.core.api.IInput;
 import org.eclipse.sirius.components.core.api.IPayload;
@@ -42,6 +44,10 @@ public EditingContextDispatcher(IEditingContextEventProcessorRegistry editingCon
 
     @Override
     public Mono<IPayload> dispatchQuery(String editingContextId, IInput input) {
+        if (input instanceof IDiagramInput diagramInput) {
+            var editingContextEventProcessor = this.editingContextEventProcessorRegistry.getOrCreateEditingContextEventProcessor(editingContextId);
+            editingContextEventProcessor.ifPresent(iEditingContextEventProcessor -> iEditingContextEventProcessor.acquireRepresentationEventProcessor(new DiagramConfiguration(diagramInput.representationId()), diagramInput));
+        }
         return this.editingContextEventProcessorRegistry.dispatchEvent(editingContextId, input)
                 .defaultIfEmpty(new ErrorPayload(input.id(), this.messageService.unexpectedError()));
     }