diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 35d33a6d0b5..99f3e617119 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -80,6 +80,8 @@ More existing APIs will be migrated to this new common pattern.
 - 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/backend/sirius-components-diagrams-graphql/src/main/java/org/eclipse/sirius/components/diagrams/graphql/datafetchers/diagram/DiagramDescriptionDropNodeCompatibilityDataFetcher.java b/packages/diagrams/backend/sirius-components-diagrams-graphql/src/main/java/org/eclipse/sirius/components/diagrams/graphql/datafetchers/diagram/DiagramDescriptionDropNodeCompatibilityDataFetcher.java
index 12631909c5a..f1043cbb74e 100644
--- a/packages/diagrams/backend/sirius-components-diagrams-graphql/src/main/java/org/eclipse/sirius/components/diagrams/graphql/datafetchers/diagram/DiagramDescriptionDropNodeCompatibilityDataFetcher.java
+++ b/packages/diagrams/backend/sirius-components-diagrams-graphql/src/main/java/org/eclipse/sirius/components/diagrams/graphql/datafetchers/diagram/DiagramDescriptionDropNodeCompatibilityDataFetcher.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023 Obeo.
+ * Copyright (c) 2023, 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
@@ -20,11 +20,12 @@
 import java.util.concurrent.CompletableFuture;
 
 import org.eclipse.sirius.components.annotations.spring.graphql.QueryDataFetcher;
-import org.eclipse.sirius.components.collaborative.api.IEditingContextEventProcessorRegistry;
 import org.eclipse.sirius.components.collaborative.diagrams.dto.DropNodeCompatibilityEntry;
 import org.eclipse.sirius.components.collaborative.diagrams.dto.GetDropNodeCompatibilitySuccessPayload;
 import org.eclipse.sirius.components.collaborative.diagrams.dto.GetDropNodeCompatibiliyInput;
 import org.eclipse.sirius.components.graphql.api.IDataFetcherWithFieldCoordinates;
+import org.eclipse.sirius.components.graphql.api.IEditingContextDispatcher;
+import org.eclipse.sirius.components.graphql.api.IExceptionWrapper;
 import org.eclipse.sirius.components.graphql.api.LocalContextConstants;
 
 import graphql.schema.DataFetchingEnvironment;
@@ -37,21 +38,24 @@
  */
 @QueryDataFetcher(type = "DiagramDescription", field = "dropNodeCompatibility")
 public class DiagramDescriptionDropNodeCompatibilityDataFetcher  implements IDataFetcherWithFieldCoordinates<CompletableFuture<List<DropNodeCompatibilityEntry>>> {
-    private final IEditingContextEventProcessorRegistry editingContextEventProcessorRegistry;
 
-    public DiagramDescriptionDropNodeCompatibilityDataFetcher(IEditingContextEventProcessorRegistry editingContextEventProcessorRegistry) {
-        this.editingContextEventProcessorRegistry = Objects.requireNonNull(editingContextEventProcessorRegistry);
+    private final IExceptionWrapper exceptionWrapper;
+    private final IEditingContextDispatcher editingContextDispatcher;
+
+    public DiagramDescriptionDropNodeCompatibilityDataFetcher(IExceptionWrapper exceptionWrapper, IEditingContextDispatcher editingContextDispatcher) {
+        this.exceptionWrapper = Objects.requireNonNull(exceptionWrapper);
+        this.editingContextDispatcher = Objects.requireNonNull(editingContextDispatcher);
     }
 
     @Override
     public CompletableFuture<List<DropNodeCompatibilityEntry>> get(DataFetchingEnvironment environment) throws Exception {
         Map<String, Object> localContext = environment.getLocalContext();
-        String editingContextId = Optional.ofNullable(localContext.get(LocalContextConstants.EDITING_CONTEXT_ID)).map(Object::toString).orElse(null);
-        String representationId = Optional.ofNullable(localContext.get(LocalContextConstants.REPRESENTATION_ID)).map(Object::toString).orElse(null);
-        if (editingContextId != null && representationId != null) {
-            GetDropNodeCompatibiliyInput input = new GetDropNodeCompatibiliyInput(UUID.randomUUID(), editingContextId, representationId);
+        var editingContextId = Optional.ofNullable(localContext.get(LocalContextConstants.EDITING_CONTEXT_ID)).map(Object::toString);
+        var representationId = Optional.ofNullable(localContext.get(LocalContextConstants.REPRESENTATION_ID)).map(Object::toString);
 
-            return this.editingContextEventProcessorRegistry.dispatchEvent(input.editingContextId(), input)
+        if (editingContextId.isPresent() && representationId.isPresent()) {
+            GetDropNodeCompatibiliyInput input = new GetDropNodeCompatibiliyInput(UUID.randomUUID(), editingContextId.get(), representationId.get());
+            return this.exceptionWrapper.wrapMono(() -> this.editingContextDispatcher.dispatchQuery(input.editingContextId(), input), input)
                     .filter(GetDropNodeCompatibilitySuccessPayload.class::isInstance)
                     .map(GetDropNodeCompatibilitySuccessPayload.class::cast)
                     .map(GetDropNodeCompatibilitySuccessPayload::entries)
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.tsx
similarity index 53%
rename from packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts
rename to packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.tsx
index 3dc62d88791..959749857aa 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.ts
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/contexts/DiagramContext.tsx
@@ -10,14 +10,37 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import React from 'react';
-import { DiagramContextValue } from './DiagramContext.types';
+import React, { useState } from 'react';
+import { DiagramContextProviderProps, DiagramContextValue } from './DiagramContext.types';
 
 const value: DiagramContextValue = {
   editingContextId: '',
   diagramId: '',
-  refreshEventPayloadId: '',
   readOnly: false,
+  refreshEventPayloadId: '',
+  setRefreshEventPayloadId: () => {},
 };
 
 export const DiagramContext = React.createContext<DiagramContextValue>(value);
+
+export const DiagramContextProvider = ({
+  diagramId,
+  editingContextId,
+  readOnly,
+  children,
+}: DiagramContextProviderProps) => {
+  const [refreshEventPayloadId, setRefreshEventPayloadId] = useState<string>('');
+
+  return (
+    <DiagramContext.Provider
+      value={{
+        diagramId,
+        editingContextId,
+        readOnly,
+        refreshEventPayloadId,
+        setRefreshEventPayloadId,
+      }}>
+      {children}
+    </DiagramContext.Provider>
+  );
+};
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..00434be9aa5 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
@@ -11,9 +11,19 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
+import { Dispatch, SetStateAction } from 'react';
+
 export interface DiagramContextValue {
   editingContextId: string;
   diagramId: string;
+  readOnly: boolean;
   refreshEventPayloadId: string;
+  setRefreshEventPayloadId: Dispatch<SetStateAction<string>>;
+}
+
+export interface DiagramContextProviderProps {
+  editingContextId: string;
+  diagramId: string;
   readOnly: boolean;
+  children: React.ReactNode;
 }
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..7bf8e0a3678 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx
+++ b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/DiagramRenderer.tsx
@@ -80,6 +80,7 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
   const { readOnly } = useContext<DiagramContextValue>(DiagramContext);
   const { diagramDescription } = useDiagramDescription();
   const { getEdges, onEdgesChange, getNodes, setEdges, setNodes } = useStore();
+  const { setRefreshEventPayloadId } = useContext<DiagramContextValue>(DiagramContext);
   const nodes = getNodes();
   const edges = getEdges();
 
@@ -132,6 +133,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 +147,7 @@ export const DiagramRenderer = memo(({ diagramRefreshedEventPayload }: DiagramRe
 
         setNodes(laidOutDiagram.nodes);
         setEdges(laidOutDiagram.edges);
+        setRefreshEventPayloadId(diagramRefreshedEventPayload.id);
         closeAllPalettes();
 
         synchronizeLayoutData(diagramRefreshedEventPayload.id, laidOutDiagram);
@@ -285,80 +288,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/representation/DiagramRepresentation.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/representation/DiagramRepresentation.tsx
index 7dcbec8c969..d3563ca5392 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 { memo, useEffect, useState } from 'react';
 import { ReactFlowProvider } from 'reactflow';
-import { DiagramContext } from '../contexts/DiagramContext';
+import { DiagramContextProvider } 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,131 +65,76 @@ export const getDiagramDescription = gql`
   }
 `;
 
-const isDiagramRefreshedEventPayload = (payload: GQLDiagramEventPayload): payload is GQLDiagramRefreshedEventPayload =>
-  payload.__typename === 'DiagramRefreshedEventPayload';
+export const DiagramRepresentation = memo(
+  ({ editingContextId, representationId, readOnly }: RepresentationComponentProps) => {
+    const [state, setState] = useState<DiagramRepresentationState>({
+      id: crypto.randomUUID(),
+      message: null,
+    });
+    const { addErrorMessage } = useMultiToast();
 
-export const DiagramRepresentation = ({
-  editingContextId,
-  representationId,
-  readOnly,
-}: RepresentationComponentProps) => {
-  const [state, setState] = useState<DiagramRepresentationState>({
-    id: crypto.randomUUID(),
-    diagramRefreshedEventPayload: null,
-    complete: false,
-    message: null,
-  });
-  const { addErrorMessage } = useMultiToast();
+    const {
+      loading: diagramDescriptionLoading,
+      data: diagramDescriptionData,
+      error: diagramDescriptionError,
+    } = useQuery<GQLDiagramDescriptionData, GQLDiagramDescriptionVariables>(getDiagramDescription, {
+      variables: {
+        editingContextId,
+        representationId,
+      },
+    });
 
-  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 }));
+    useEffect(() => {
+      if (!diagramDescriptionLoading) {
+        setState((prevState) => ({
+          ...prevState,
+          diagramDescription: diagramDescriptionData?.viewer.editingContext.representation.description,
+        }));
       }
-    }
-  };
+      if (diagramDescriptionError) {
+        const { message } = diagramDescriptionError;
+        addErrorMessage(message);
+      }
+    }, [diagramDescriptionLoading, diagramDescriptionData, diagramDescriptionError]);
 
-  const {
-    loading: diagramDescriptionLoading,
-    data: diagramDescriptionData,
-    error: diagramDescriptionError,
-  } = useQuery<GQLDiagramDescriptionData, GQLDiagramDescriptionVariables>(getDiagramDescription, {
-    variables: {
-      editingContextId,
-      representationId,
-    },
-    skip: state.diagramRefreshedEventPayload === null,
-  });
+    const diagramDescription: GQLDiagramDescription | undefined =
+      diagramDescriptionData?.viewer.editingContext.representation.description;
 
-  useEffect(() => {
-    if (!diagramDescriptionLoading) {
-      setState((prevState) => ({
-        ...prevState,
-        diagramDescription: diagramDescriptionData?.viewer.editingContext.representation.description,
-      }));
-    }
-    if (diagramDescriptionError) {
-      const { message } = diagramDescriptionError;
-      addErrorMessage(message);
+    if (state.message) {
+      return <div>{state.message}</div>;
     }
-  }, [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) {
-    return <div></div>;
-  }
+    if (!diagramDescription) {
+      return <div></div>;
+    }
 
-  return (
-    <ReactFlowProvider>
-      <DiagramContext.Provider
-        value={{
-          editingContextId,
-          diagramId: representationId,
-          refreshEventPayloadId: state.diagramRefreshedEventPayload.id,
-          readOnly,
-        }}>
-        <DiagramDescriptionContext.Provider value={{ diagramDescription }}>
-          <StoreContextProvider>
-            <DiagramDirectEditContextProvider>
-              <DiagramPaletteContextProvider>
-                <DiagramElementPaletteContextProvider>
-                  <ConnectorContextProvider>
-                    <DropNodeContextProvider>
-                      <NodeContextProvider>
-                        <div
-                          style={{ display: 'inline-block', position: 'relative' }}
-                          data-representation-kind="diagram"
-                          data-representation-label={state.diagramRefreshedEventPayload.diagram.metadata.label}>
+    return (
+      <ReactFlowProvider>
+        <DiagramContextProvider diagramId={representationId} editingContextId={editingContextId} readOnly={readOnly}>
+          <DiagramDescriptionContext.Provider value={{ diagramDescription }}>
+            <StoreContextProvider>
+              <DiagramDirectEditContextProvider>
+                <DiagramPaletteContextProvider>
+                  <DiagramElementPaletteContextProvider>
+                    <ConnectorContextProvider>
+                      <DropNodeContextProvider>
+                        <NodeContextProvider>
                           <MarkerDefinitions />
                           <FullscreenContextProvider>
-                            <DiagramRenderer
-                              key={state.diagramRefreshedEventPayload.diagram.id}
-                              diagramRefreshedEventPayload={state.diagramRefreshedEventPayload}
-                            />
+                            <DiagramSubscriptionProvider
+                              diagramId={representationId}
+                              editingContextId={editingContextId}></DiagramSubscriptionProvider>
                           </FullscreenContextProvider>
-                        </div>
-                      </NodeContextProvider>
-                    </DropNodeContextProvider>
-                  </ConnectorContextProvider>
-                </DiagramElementPaletteContextProvider>
-              </DiagramPaletteContextProvider>
-            </DiagramDirectEditContextProvider>
-          </StoreContextProvider>
-        </DiagramDescriptionContext.Provider>
-      </DiagramContext.Provider>
-    </ReactFlowProvider>
-  );
-};
+                        </NodeContextProvider>
+                      </DropNodeContextProvider>
+                    </ConnectorContextProvider>
+                  </DiagramElementPaletteContextProvider>
+                </DiagramPaletteContextProvider>
+              </DiagramDirectEditContextProvider>
+            </StoreContextProvider>
+          </DiagramDescriptionContext.Provider>
+        </DiagramContextProvider>
+      </ReactFlowProvider>
+    );
+  }
+);
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/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()));
     }
diff --git a/packages/starters/backend/sirius-components-starter/src/main/java/org/eclipse/sirius/components/starter/services/EditingContextDispatcher.java b/packages/starters/backend/sirius-components-starter/src/main/java/org/eclipse/sirius/components/starter/services/EditingContextDispatcher.java
index 13ce34eae26..cbafd71f5d0 100644
--- a/packages/starters/backend/sirius-components-starter/src/main/java/org/eclipse/sirius/components/starter/services/EditingContextDispatcher.java
+++ b/packages/starters/backend/sirius-components-starter/src/main/java/org/eclipse/sirius/components/starter/services/EditingContextDispatcher.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 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
@@ -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,10 +44,12 @@ public EditingContextDispatcher(IEditingContextEventProcessorRegistry editingCon
 
     @Override
     public Mono<IPayload> dispatchQuery(String editingContextId, IInput input) {
-        // @formatter:off
+        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.messageSourceAccessor.getMessage("UNEXPECTED_ERROR")));
-        // @formatter:on
     }
 
     @Override