From 5ee440b78b6f28ffb6ae8b8e41430805a5383873 Mon Sep 17 00:00:00 2001
From: Zeger-Jan van de Weg <ZJvandeWeg@users.noreply.github.com>
Date: Tue, 30 Apr 2024 13:37:02 +0200
Subject: [PATCH 1/2] docs: script later is module too

---
 README.md | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index e5c295c..f8b6848 100644
--- a/README.md
+++ b/README.md
@@ -41,11 +41,13 @@ To scroll the container horizontally, use the mouse wheel + <kbd>Shift</kbd> key
 <div id="nr-flow-1" class="flow-renderer" style="height: 300px"></div>
 ```
 
-```javascript
-const renderer = new FlowRenderer()
-const container1 = document.getElementById('nr-flow-1');
-const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
-renderer.renderFlows(flow, { container: container1 })
+```html
+<script>
+  const renderer = new FlowRenderer()
+  const container1 = document.getElementById('nr-flow-1');
+  const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
+  renderer.renderFlows(flow, { container: container1 })
+</script>
 ```
 
 ### Inline Options example
@@ -56,11 +58,13 @@ Options can be set by data attributes `scope`, `grid-lines`, `zoom`, `images`, `
 <div id="nr-flow-2" style="height: 300px" data-scope="my-scope" data-grid-lines="true" data-zoom="true" data-images="true" data-link-lines="false" data-labels="true"></div>
 ```
 
-```javascript
-const renderer = new FlowRenderer()
-const container2 = document.getElementById('nr-flow-2');
-const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
-renderer.renderFlows(flow, { container: container2 })
+```html
+<script type="module">
+  const renderer = new FlowRenderer()
+  const container2 = document.getElementById('nr-flow-2');
+  const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
+  renderer.renderFlows(flow, { container: container2 })
+</script>
 ```
 
 

From e63577d705cfd2b648da259fac87d279fe933d08 Mon Sep 17 00:00:00 2001
From: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
Date: Wed, 1 May 2024 10:31:26 +0100
Subject: [PATCH 2/2] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f8b6848..b56a394 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ To scroll the container horizontally, use the mouse wheel + <kbd>Shift</kbd> key
 Options can be set by data attributes `scope`, `grid-lines`, `zoom`, `images`, `link-lines`, `labels`
 
 ```html
-<div id="nr-flow-2" style="height: 300px" data-scope="my-scope" data-grid-lines="true" data-zoom="true" data-images="true" data-link-lines="false" data-labels="true"></div>
+<div id="nr-flow-2" style="height: 300px" data-scope="my-scope" data-grid-lines="true" data-zoom="true" data-images="true" data-link-lines="false" data-labels="true" data-auto-zoom="true"  data-auto-scroll="true"></div>
 ```
 
 ```html