diff --git a/src/component/options.ts b/src/component/options.ts
index 02b26465d1..923b0b126e 100644
--- a/src/component/options.ts
+++ b/src/component/options.ts
@@ -65,7 +65,7 @@ export interface FitOptions {
 export enum FitType {
   /** No fit, use dimensions and coordinates from the BPMN diagram. */
   None,
-  /** Fit the whole viewport. */
+  /** Fit the whole html container available to render the BPMN diagram. */
   HorizontalVertical,
   /** Fit only horizontally. */
   Horizontal,
diff --git a/src/index.html b/src/index.html
index 9cb0bdbc51..e3deedd059 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,7 +38,7 @@ <h3>Options</h3>
     </div>
 
     <div style="position:relative; width:100%; height:800px">
-      <div id="graph"/>
+      <div id="bpmn-container"></div>
     </div>
 
 
diff --git a/src/lib-integration.html b/src/lib-integration.html
index ee97002e30..6f7ab1a8a6 100644
--- a/src/lib-integration.html
+++ b/src/lib-integration.html
@@ -6,7 +6,7 @@
   <link rel="shortcut icon" href="./static/img/favicon.ico">
 </head>
 <body>
-  <div id="bpmn-visualization-viewport"></div>
+  <div id="bpmn-container-custom"></div>
 
   <!-- load global settings -->
   <script src="./static/js/configureMxGraphGlobals.js"></script>
diff --git a/src/non-regression.html b/src/non-regression.html
index b54272a786..2910aa03a8 100644
--- a/src/non-regression.html
+++ b/src/non-regression.html
@@ -5,7 +5,7 @@
     <title>BPMN Visualization Non Regression</title>
     <link rel="shortcut icon" href="./static/img/favicon.ico">
     <style>
-      .graph-container {
+      #bpmn-container {
         top: 10px;
         bottom: 10px;
         left: 10px;
@@ -21,7 +21,7 @@
 </head>
 <body>
     <div id="fetch-status"></div>
-    <div id="viewport" class="graph-container"></div>
+    <div id="bpmn-container"></div>
 
     <!-- load global settings -->
     <script src="./static/js/configureMxGraphGlobals.js"></script>
diff --git a/src/static/js/demo.js b/src/static/js/demo.js
index e23baf89f1..96a0731d64 100644
--- a/src/static/js/demo.js
+++ b/src/static/js/demo.js
@@ -19,14 +19,14 @@ let fitOnLoad = true;
 let fitOptions = {};
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function configureBpmnViewport() {
-  const viewport = document.getElementById('graph');
+function configureBpmnContainer() {
+  const container = document.getElementById('bpmn-container');
 
   const useFixedSize = !(fitOptions.type && FitType[fitOptions.type] === 'None'); // !== 'None'
   if (useFixedSize) {
-    viewport.classList.add('fixed-size');
+    container.classList.add('fixed-size');
   } else {
-    viewport.classList.remove('fixed-size');
+    container.classList.remove('fixed-size');
   }
 }
 
@@ -61,7 +61,7 @@ function configureFitTypeSelect() {
   const fitTypeSelectedElt = document.getElementById('fitType-selected');
   fitTypeSelectedElt.onchange = event => {
     updateFitConfig({ type: event.target.value });
-    configureBpmnViewport();
+    configureBpmnContainer();
     fit(fitOptions);
   };
 
@@ -71,7 +71,7 @@ function configureFitTypeSelect() {
     updateFitConfig({ type: fitTypeSelectedElt.value });
   }
 
-  configureBpmnViewport();
+  configureBpmnContainer();
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -98,7 +98,7 @@ function configureControlPanel() {
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function startDemo() {
-  startBpmnVisualization({ container: 'graph' });
+  startBpmnVisualization({ container: 'bpmn-container' });
 
   // Configure custom html elements
   document.getElementById('bpmn-file').addEventListener('change', handleFileSelect, false);
diff --git a/src/static/js/lib-integration.js b/src/static/js/lib-integration.js
index 39c05e5836..3beab9cd35 100644
--- a/src/static/js/lib-integration.js
+++ b/src/static/js/lib-integration.js
@@ -26,7 +26,7 @@ if (bpmnParameterValue) {
   bpmn = bpmnDefaultContent();
 }
 //
-const bpmnVisualizationIntegration = new BpmnVisualization(window.document.getElementById('bpmn-visualization-viewport'));
+const bpmnVisualizationIntegration = new BpmnVisualization(window.document.getElementById('bpmn-container-custom'));
 bpmnVisualizationIntegration.load(bpmn);
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
diff --git a/src/static/js/non-regression.js b/src/static/js/non-regression.js
index a2f7a91809..468687582b 100644
--- a/src/static/js/non-regression.js
+++ b/src/static/js/non-regression.js
@@ -22,4 +22,4 @@ function statusFetchKO(errorMsg) {
   statusElt.className = 'status-ko';
 }
 
-documentReady(() => startBpmnVisualization({ container: 'viewport', statusFetchKoNotifier: statusFetchKO }));
+documentReady(() => startBpmnVisualization({ container: 'bpmn-container', statusFetchKoNotifier: statusFetchKO }));
diff --git a/test-bundle/lib-integration-iife.html b/test-bundle/lib-integration-iife.html
index c2da6dd785..613fc093ab 100644
--- a/test-bundle/lib-integration-iife.html
+++ b/test-bundle/lib-integration-iife.html
@@ -5,12 +5,12 @@
   <title>BPMN Visualization IIFE bundle</title>
 </head>
 <body>
-<div id="bpmn-viewport"></div>
+<div id="bpmn-container"></div>
 
 <!-- iife bundle -->
 <script src="../dist/bpmn-visualization.js"></script>
 <script>
-  const bpmnVisualization = new bpmnvisu.BpmnVisualization(document.getElementById('bpmn-viewport'))
+  const bpmnVisualization = new bpmnvisu.BpmnVisualization(document.getElementById('bpmn-container'))
   bpmnVisualization.load(bpmnContent());
 
   function bpmnContent() {
diff --git a/test/e2e/bpmn.navigation.test.ts b/test/e2e/bpmn.navigation.test.ts
index b6c655ea06..8726e76eb9 100644
--- a/test/e2e/bpmn.navigation.test.ts
+++ b/test/e2e/bpmn.navigation.test.ts
@@ -43,8 +43,8 @@ describe('diagram navigation', () => {
   let viewportCenterX: number;
   let viewportCenterY: number;
   beforeEach(async () => {
-    const bpmnViewportElementHandle = await pageTester.expectBpmnDiagramToBeDisplayed(fileName);
-    const bounding_box = await bpmnViewportElementHandle.boundingBox();
+    const bpmnContainerElementHandle = await pageTester.expectBpmnDiagramToBeDisplayed(fileName);
+    const bounding_box = await bpmnContainerElementHandle.boundingBox();
     viewportCenterX = bounding_box.x + bounding_box.width / 2;
     viewportCenterY = bounding_box.y + bounding_box.height / 2;
   });
diff --git a/test/e2e/bpmn.rendering.test.ts b/test/e2e/bpmn.rendering.test.ts
index a525ed090d..041cb4d21e 100644
--- a/test/e2e/bpmn.rendering.test.ts
+++ b/test/e2e/bpmn.rendering.test.ts
@@ -119,7 +119,7 @@ describe('no BPMN elements visual regression', () => {
     'non-regression',
   );
 
-  const pageTester = new PageTester(bpmnDiagramPreparation, 'viewport', 'BPMN Visualization Non Regression');
+  const pageTester = new PageTester(bpmnDiagramPreparation, 'bpmn-container', 'BPMN Visualization Non Regression');
 
   const bpmnFileNames = findFiles('../fixtures/bpmn/non-regression/')
     .filter(filename => {
diff --git a/test/e2e/diagram.rendering.test.ts b/test/e2e/diagram.rendering.test.ts
index 7bdf9fc0b4..e0db56853c 100644
--- a/test/e2e/diagram.rendering.test.ts
+++ b/test/e2e/diagram.rendering.test.ts
@@ -130,7 +130,7 @@ describe('no diagram visual regression', () => {
         const bpmnDiagramPreparation = new BpmnDiagramPreparation(new Map<string, BpmnLoadMethod>([]), { name: 'non-regression' }, 'diagram', {
           fit: { type: fitType, margin: margin },
         });
-        const pageTester = new PageTester(bpmnDiagramPreparation, 'viewport', 'BPMN Visualization Non Regression');
+        const pageTester = new PageTester(bpmnDiagramPreparation, 'bpmn-container', 'BPMN Visualization Non Regression');
 
         await pageTester.expectBpmnDiagramToBeDisplayed(fileName);
 
diff --git a/test/e2e/helpers/visu-utils.ts b/test/e2e/helpers/visu-utils.ts
index a6d29e598b..c939e7238d 100644
--- a/test/e2e/helpers/visu-utils.ts
+++ b/test/e2e/helpers/visu-utils.ts
@@ -140,7 +140,7 @@ export class BpmnDiagramPreparation {
 }
 
 export class PageTester {
-  constructor(readonly bpmnDiagramPreparation: BpmnDiagramPreparation, readonly bpmnViewportContainerId: string, readonly expectedPageTitle: string) {}
+  constructor(readonly bpmnDiagramPreparation: BpmnDiagramPreparation, readonly bpmnContainerId: string, readonly expectedPageTitle: string) {}
 
   async expectBpmnDiagramToBeDisplayed(fileName: string): Promise<ElementHandle<Element>> {
     const url = this.bpmnDiagramPreparation.prepareTestResourcesAndGetPageUrl(fileName);
@@ -152,11 +152,11 @@ export class PageTester {
     expect(response.status()).toBe(200);
 
     const waitForSelectorOptions = { timeout: 5_000 };
-    const bpmnViewportElementHandle = await page.waitForSelector(`#${this.bpmnViewportContainerId}`, waitForSelectorOptions);
+    const bpmnContainerElementHandle = await page.waitForSelector(`#${this.bpmnContainerId}`, waitForSelectorOptions);
     await expect(page.title()).resolves.toMatch(this.expectedPageTitle);
 
     // Prior loading a BPMN diagram, the DOM looks like
-    // <div id="viewport" class="graph-container" style="touch-action: none;">
+    // <div id="bpmn-container" style="touch-action: none;">
     //   <svg style="left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 1px; min-height: 1px;">
     //     <g>
     //       <g></g>
@@ -168,7 +168,7 @@ export class PageTester {
     // </div>
     //
     // After loading, the DOM looks like
-    // <div id="viewport" class="graph-container" style="touch-action: none;">
+    // <div id="bpmn-container" style="touch-action: none;">
     //   <svg style="left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 900px; min-height: 181px;">
     //     <g>
     //       <g></g>
@@ -182,9 +182,9 @@ export class PageTester {
     // </div>
     //
     // In the 2nd 'g' node, children 'g' nodes with the 'data-cell-id' attribute (extra attribute generated by the lib) are only available when the rendering is done
-    await page.waitForSelector(`#${this.bpmnViewportContainerId} > svg > g > g > g[data-cell-id]`, waitForSelectorOptions);
+    await page.waitForSelector(`#${this.bpmnContainerId} > svg > g > g > g[data-cell-id]`, waitForSelectorOptions);
 
-    return bpmnViewportElementHandle;
+    return bpmnContainerElementHandle;
   }
 }
 
diff --git a/test/e2e/mxGraph.view.test.ts b/test/e2e/mxGraph.view.test.ts
index 557e90a9f7..27352891cd 100644
--- a/test/e2e/mxGraph.view.test.ts
+++ b/test/e2e/mxGraph.view.test.ts
@@ -15,19 +15,19 @@
  */
 import { loadBpmnContentForUrlQueryParam } from '../helpers/file-helper';
 
-let graphContainerId = 'graph';
+let bpmnContainerId = 'bpmn-container';
 
 async function expectLabel(cellId: string, expectedText?: string): Promise<void> {
   if (!expectedText) {
     return;
   }
-  const svgElementHandle = await page.waitForSelector(`#${graphContainerId} svg g g[data-cell-id="${cellId}"] g foreignObject`);
+  const svgElementHandle = await page.waitForSelector(`#${bpmnContainerId} svg g g[data-cell-id="${cellId}"] g foreignObject`);
   // contains 3 div
   expect(await svgElementHandle.evaluate(node => (node.firstChild.firstChild.firstChild as HTMLElement).innerHTML)).toBe(expectedText);
 }
 
 async function expectEvent(cellId: string, expectedText: string): Promise<void> {
-  const svgElementHandle = await page.waitForSelector(`#${graphContainerId} svg g g[data-cell-id="${cellId}"]`);
+  const svgElementHandle = await page.waitForSelector(`#${bpmnContainerId} svg g g[data-cell-id="${cellId}"]`);
   // TODO do we test class?
   expect(await svgElementHandle.evaluate(node => node.firstChild.nodeName)).toBe('ellipse');
   expect(await svgElementHandle.evaluate(node => (node.firstChild as SVGGElement).getAttribute('rx'))).toBe('18');
@@ -36,7 +36,7 @@ async function expectEvent(cellId: string, expectedText: string): Promise<void>
 }
 
 async function expectTask(cellId: string, expectedText: string): Promise<void> {
-  const svgElementHandle = await page.waitForSelector(`#${graphContainerId} svg g g[data-cell-id="${cellId}"]`);
+  const svgElementHandle = await page.waitForSelector(`#${bpmnContainerId} svg g g[data-cell-id="${cellId}"]`);
   expect(await svgElementHandle.evaluate(node => node.getAttribute('class'))).toBe('class-state-cell-style-task');
   expect(await svgElementHandle.evaluate(node => node.firstChild.nodeName)).toBe('rect');
   expect(await svgElementHandle.evaluate(node => (node.firstChild as SVGGElement).getAttribute('width'))).toBe('100');
@@ -45,20 +45,20 @@ async function expectTask(cellId: string, expectedText: string): Promise<void> {
 }
 
 async function expectSequenceFlow(cellId: string, expectedText?: string): Promise<void> {
-  const svgElementHandle = await page.waitForSelector(`#${graphContainerId} svg g g[data-cell-id="${cellId}"]`);
+  const svgElementHandle = await page.waitForSelector(`#${bpmnContainerId} svg g g[data-cell-id="${cellId}"]`);
   expect(await svgElementHandle.evaluate(node => node.getAttribute('class'))).toBe('class-state-cell-style-sequenceFlow-normal');
   expect(await svgElementHandle.evaluate(node => node.firstChild.nodeName)).toBe('path');
   await expectLabel(cellId, expectedText);
 }
 
-describe('BpmnVisu view - index page', () => {
+describe('demo page', () => {
   it('should display page title', async () => {
     await page.goto('http://localhost:10002');
-    await page.waitForSelector(`#${graphContainerId}`);
+    await page.waitForSelector(`#${bpmnContainerId}`);
     await expect(page.title()).resolves.toMatch('BPMN Visualization Demo');
   });
 
-  it('should display graph in page', async () => {
+  it('should display diagram in page', async () => {
     await page.goto(`http://localhost:10002?bpmn=${loadBpmnContentForUrlQueryParam('../fixtures/bpmn/simple-start-task-end.bpmn')}`);
 
     await expectEvent('StartEvent_1', 'Start Event 1');
@@ -69,12 +69,12 @@ describe('BpmnVisu view - index page', () => {
   });
 });
 
-describe('BpmnVisu view - lib-integration page', () => {
-  it('should display graph in page', async () => {
-    graphContainerId = 'bpmn-visualization-viewport';
+describe('lib-integration page', () => {
+  it('should display diagram in page', async () => {
+    bpmnContainerId = 'bpmn-container-custom';
     await page.goto(`http://localhost:10002/lib-integration.html?bpmn=${loadBpmnContentForUrlQueryParam('../fixtures/bpmn/simple-start-only.bpmn')}`);
     await expect(page.title()).resolves.toMatch('BPMN Visualization Lib Integration');
-    await page.waitForSelector(`#${graphContainerId}`);
+    await page.waitForSelector(`#${bpmnContainerId}`);
 
     await expectEvent('StartEvent_1', 'Start Event Only');
   });
diff --git a/test/e2e/performance/bpmn.navigation.performance.test.ts b/test/e2e/performance/bpmn.navigation.performance.test.ts
index 9fc56f0fc1..e0b11e5b13 100644
--- a/test/e2e/performance/bpmn.navigation.performance.test.ts
+++ b/test/e2e/performance/bpmn.navigation.performance.test.ts
@@ -32,8 +32,8 @@ describe.each([1, 2, 3, 4, 5])('zoom performance', run => {
   let viewportCenterY: number;
 
   beforeEach(async () => {
-    const bpmnViewportElementHandle = await pageTester.expectBpmnDiagramToBeDisplayed(fileName);
-    const bounding_box = await bpmnViewportElementHandle.boundingBox();
+    const bpmnContainerElementHandle = await pageTester.expectBpmnDiagramToBeDisplayed(fileName);
+    const bounding_box = await bpmnContainerElementHandle.boundingBox();
     viewportCenterX = bounding_box.x + bounding_box.width / 2;
     viewportCenterY = bounding_box.y + bounding_box.height / 2;
   });
