Reuse the same SLD when navigating in the VLs or use CTRL

src/components/grid-layout/cards/diagrams/diagram-card.tsx

@@ -171,7 +171,7 @@ export const DiagramCard = forwardRef((props: DiagramCardProps, ref: Ref<HTMLDiv
         // TODO adapt the layout w and h considering those values.
     }, []);
 
-    const handleVoltageLevelClick = useCallback(
+    const handleNadVoltageLevelClick = useCallback(
         (vlId: string): void => {
             createDiagram({
                 diagramUuid: v4() as UUID,
@@ -183,6 +183,27 @@ export const DiagramCard = forwardRef((props: DiagramCardProps, ref: Ref<HTMLDiv
         [createDiagram]
     );
 
+    const handleSldVoltageLevelClick = useCallback(
+        (vlId: string, event: MouseEvent): void => {
+            if (event.ctrlKey) {
+                createDiagram({
+                    diagramUuid: v4() as UUID,
+                    type: DiagramType.VOLTAGE_LEVEL,
+                    voltageLevelId: vlId,
+                    name: '',
+                });
+            } else {
+                updateDiagram({
+                    ...diagram,
+                    type: DiagramType.VOLTAGE_LEVEL,
+                    voltageLevelId: vlId,
+                    name: '',
+                });
+            }
+        },
+        [diagram, createDiagram, updateDiagram]
+    );
+
     const cardTitle = useMemo((): string => {
         if (loading) {
             return intl.formatMessage({ id: 'loadingOptions' });
@@ -214,7 +235,7 @@ export const DiagramCard = forwardRef((props: DiagramCardProps, ref: Ref<HTMLDiv
                             loadingState={loading}
                             diagramSizeSetter={setDiagramSize}
                             visible={visible}
-                            onNextVoltageLevelClick={handleVoltageLevelClick}
+                            onNextVoltageLevelClick={handleSldVoltageLevelClick}
                             diagramTitle={diagram.name}
                         />
                     )}
@@ -246,7 +267,7 @@ export const DiagramCard = forwardRef((props: DiagramCardProps, ref: Ref<HTMLDiv
                             onHideVoltageLevel={handleHideVoltageLevelId}
                             onMoveNode={handleMoveNode}
                             onMoveTextnode={handleMoveTextnode}
-                            onVoltageLevelClick={handleVoltageLevelClick}
+                            onVoltageLevelClick={handleNadVoltageLevelClick}
                             customPositions={diagram.positions}
                         />
                     )}

src/components/grid-layout/cards/diagrams/singleLineDiagram/single-line-diagram-content.tsx

@@ -20,7 +20,12 @@ import {
 } from '../diagram-utils';
 import { styles } from '../diagram-styles';
 import { MapEquipment } from '../../../../menus/base-equipment-menu';
-import { OnBreakerCallbackType, SingleLineDiagramViewer, SLDMetadata } from '@powsybl/network-viewer';
+import {
+    OnBreakerCallbackType,
+    OnNextVoltageCallbackType,
+    SingleLineDiagramViewer,
+    SLDMetadata,
+} from '@powsybl/network-viewer';
 import { isNodeReadOnly } from '../../../../graph/util/model-functions';
 import { useIsAnyNodeBuilding } from '../../../../utils/is-any-node-building-hook';
 import { useTheme } from '@mui/material/styles';
@@ -52,7 +57,7 @@ interface SingleLineDiagramContentProps {
     readonly diagramSizeSetter: (id: UUID, type: DiagramType, width: number, height: number) => void;
     readonly diagramId: UUID;
     readonly visible: boolean;
-    readonly onNextVoltageLevelClick: (voltageLevelId: string) => void;
+    readonly onNextVoltageLevelClick: OnNextVoltageCallbackType;
     readonly diagramTitle: string;
 }