2 files changed, 18 insertions, 9 deletions
diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index 323638bff..8a7863c14 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -1,5 +1,3 @@
-$searchbarHeight: 50px;
-
 .DIYNodeBox {
     width: 100%;
     height: 100%;
@@ -23,7 +21,6 @@ $searchbarHeight: 50px;
         justify-content: center;
         align-items: center;
         width: 100%;
-        height: $searchbarHeight;
         padding: 10px;
 
         input[type='text'] {
@@ -42,7 +39,6 @@ $searchbarHeight: 50px;
         justify-content: center;
         align-items: center;
         width: 100%;
-        height: calc(100% - $searchbarHeight);
         .diagramBox {
             flex: 1;
             display: flex;
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 36deb2d8d..0d755fdbe 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -18,7 +18,9 @@ import { InkingStroke } from '../InkingStroke';
 import './DiagramBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
-
+/**
+ * this is a class for the diagram box doc type that can be found in the tools section of the side bar
+ */
 @observer
 export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
@@ -50,7 +52,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         mermaid.initialize({
             securityLevel: 'loose',
             startOnLoad: true,
-            flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
+            darkMode: true,
+            flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'cardinal' },
+            gantt: { useMaxWidth: true, useWidth: 2000 },
         });
         // when a new doc/text/ink/shape is created in the freeform view, this generates the corresponding mermaid diagram code
         reaction(
@@ -59,14 +63,21 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             { fireImmediately: true }
         );
     }
+    /**
+     * helper method for renderMermaidAsync
+     * @param str string containing the mermaid code
+     * @returns
+     */
     renderMermaid = (str: string) => {
         try {
             return mermaid.render('graph' + Date.now(), str);
-        } catch (error) {
+        } catch {
             return { svg: '', bindFunctions: undefined };
         }
     };
-
+    /**
+     * will update the div containing the mermaid diagram to render the new mermaidCode
+     */
     renderMermaidAsync = async (mermaidCode: string, dashDiv: HTMLDivElement) => {
         try {
             const { svg, bindFunctions } = await this.renderMermaid(mermaidCode);
@@ -97,7 +108,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             res
         );
     }, 'set mermaid code');
-
+    /**
+     * will generate mermaid code with GPT based on what the user requested
+     */
     generateMermaidCode = action(() => {
         this._generating = true;
         const prompt = 'Write this in mermaid code and only give me the mermaid code: ' + this._inputValue;