Squashed commit of the following:

commit cc6054a
Merge: efff461 a984062
Author: Vadim Tropashko <[email protected]>
Date:   Mon Mar 25 08:18:46 2024 -0700

    Merge pull request #60 from zahariev-oracle/new_diagram_layout

    fix: changed auto layout using rappid's DirectedGraph layout, Resolves #41

commit a984062
Merge: 15ed98f 66277f9
Author: Vadim Tropashko <[email protected]>
Date:   Fri Mar 22 11:35:15 2024 -0700

    Merge branch 'new_diagram_layout' of https://github.com/zahariev-oracle/quicksql into pr/60

commit 15ed98f
Author: Vadim Tropashko <[email protected]>
Date:   Fri Mar 22 11:28:01 2024 -0700

    resolved conflicts

commit 21fda69
Merge: 0fa3b39 efff461
Author: Vadim Tropashko <[email protected]>
Date:   Fri Mar 22 11:27:34 2024 -0700

    Merge remote-tracking branch 'origin/main' into pr/60

commit 66277f9
Author: ivan.zahariev <[email protected]>
Date:   Thu Mar 14 17:40:39 2024 +0200

    doc: updated quick-erd user guide

commit 0fa3b39
Author: ivan.zahariev <[email protected]>
Date:   Tue Mar 12 10:41:47 2024 +0200

    fix: changed auto layout using rappid's DirectedGraph layout

    Changed all shortcuts from alt+* to shift+alt+*

doc/user/quick-erd.md

@@ -20,6 +20,8 @@ You need to add the following dependencies to your HTML:
     - jQuery
     - lodash
     - Backbone JS
+    - graphlib
+    - dagre
 
 ## ERD Browser ESM Example
 
@@ -53,6 +55,8 @@ You need to add the following dependencies to your HTML:
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" integrity="sha256-qXBd/EfAdjOA2FGrGAG+b3YBn2tn5A6bhz+LSgYD96k=" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/backbone-min.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/graphlib.core.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dagre.core.min.js"></script>
 
         <!-- Assuming you put the rappid.min.js file in this path -->
         <script src="./examples/diagram-generator/libs/rappid.min.js"></script>
@@ -119,6 +123,8 @@ view emp_v departments employees
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" integrity="sha256-qXBd/EfAdjOA2FGrGAG+b3YBn2tn5A6bhz+LSgYD96k=" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/backbone-min.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/graphlib.core.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dagre.core.min.js"></script>
 
         <!-- Assuming you put the rappid.min.js file in this path -->
         <script src="./examples/diagram-generator/libs/rappid.min.js"></script>

examples/diagram-generator/index.html

@@ -13,6 +13,8 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" integrity="sha256-qXBd/EfAdjOA2FGrGAG+b3YBn2tn5A6bhz+LSgYD96k=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/backbone-min.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/graphlib.core.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dagre.core.min.js"></script>
 
     <!-- Assuming you put the rappid.min.js file in this path -->
     <script src="libs/rappid.min.js"></script>
@@ -66,7 +68,7 @@
         <div id="sql">
             <pre></pre>
         </div>
-        <div id="quickERD" style="width: 100%; height: 100%;"></div>
+        <div id="quickERD" style="width: 85%; height: 100%;"></div>
     </div>
 
     <script type="module">