From f4dde84f063543caaa73551eda2540456c33bbc1 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Thu, 30 Sep 2021 09:48:03 +0200
Subject: [PATCH] mermaid layout improvements

---
 src/public/app/layouts/desktop_layout.js |  2 +-
 src/public/app/widgets/mermaid.js        | 21 ++++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index cfc204998..e6459b996 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -148,11 +148,11 @@ export default class DesktopLayout {
                                         .button(new NoteActionsWidget())
                                 )
                                 .child(new NoteUpdateStatusWidget())
+                                .child(new MermaidWidget())
                                 .child(
                                     new ScrollingContainer()
                                         .filling()
                                         .child(new SqlTableSchemasWidget())
-                                        .child(new MermaidWidget())
                                         .child(new NoteDetailWidget())
                                         .child(new NoteListWidget())
                                         .child(new SearchResultWidget())
diff --git a/src/public/app/widgets/mermaid.js b/src/public/app/widgets/mermaid.js
index 05e320d12..758406a21 100644
--- a/src/public/app/widgets/mermaid.js
+++ b/src/public/app/widgets/mermaid.js
@@ -3,6 +3,19 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
 import froca from "../services/froca.js";
 
 const TPL = `<div class="mermaid-widget">
+    <style>
+        .mermaid-widget {
+            flex-grow: 2;
+            overflow: auto;
+            min-height: 200px;
+            border-bottom: 1px solid var(--main-border-color);
+            padding: 20px;
+            display: flex;
+            justify-content: space-around; /* centering rendered SVG */
+            flex-basis: 0;
+        }
+    </style>
+
     <div class="mermaid-error alert alert-warning">
         <p><strong>The diagram could not displayed.</strong></p>
         <p class="error-content">Rendering diagram...</p>
@@ -12,6 +25,12 @@ const TPL = `<div class="mermaid-widget">
 </div>`;
 
 export default class MermaidWidget extends NoteContextAwareWidget {
+    constructor() {
+        super();
+
+        this.idCounter = 1;
+    }
+
     isEnabled() {
         return super.isEnabled() && this.note && this.note.type === 'mermaid';
     }
@@ -40,7 +59,7 @@ export default class MermaidWidget extends NoteContextAwareWidget {
         this.$errorMessage.text('Rendering diagram...');
 
         try {
-            mermaid.mermaidAPI.render('graphDiv', content, content => this.$display.html(content));
+            mermaid.mermaidAPI.render('graphDiv-' + this.idCounter++, content, content => this.$display.html(content));
 
             this.$errorContainer.hide();
         } catch (e) {