mermaid layout improvements

src/public/app/entities/note_short.js

@@ -16,7 +16,7 @@ const NOTE_TYPE_ICONS = {
     "relation-map": "bx bx-map-alt",
     "book": "bx bx-book",
     "note-map": "bx bx-map-alt",
-    "mermaid": "bx bx-water"
+    "mermaid": "bx bx-selection"
 };
 
 /**

src/public/app/services/note_content_renderer.js

@@ -86,14 +86,15 @@ async function getRenderedContent(note, options = {}) {
         await libraryLoader.requireLibrary(libraryLoader.MERMAID);
 
         const noteComplement = await froca.getNoteComplement(note.noteId);
-        const graph = noteComplement.content || "";
+        const content = noteComplement.content || "";
 
-        const updateWithContent = (content) => {
+        $renderedContent
-            $renderedContent.append($(content))
+            .css("display", "flex")
-        }
+            .css("justify-content", "space-around");
 
         try {
-            mermaid.mermaidAPI.render('graphDiv', graph, updateWithContent);
+            mermaid.mermaidAPI.render("mermaid-graph", content,
+                    content => $renderedContent.append($(content)));
         } catch (e) {
             const $error = $("<p>The diagram could not displayed.</p>");
 

src/public/app/services/note_create.js

@@ -32,6 +32,16 @@ async function createNote(parentNotePath, options = {}) {
 
     const parentNoteId = treeService.getNoteIdFromNotePath(parentNotePath);
 
+    console.log(options);
+
+    if (options.type === 'mermaid' && !options.content) {
+        options.content = `graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;`
+    }
+
     const {note, branch} = await server.post(`notes/${parentNoteId}/children?target=${options.target}&targetBranchId=${options.targetBranchId}`, {
         title: newNoteName,
         content: options.content || "",

src/public/app/services/tree_context_menu.js

@@ -33,7 +33,7 @@ class TreeContextMenu {
             { title: "Note Map", command: command, type: "note-map", uiIcon: "map-alt" },
             { title: "Render HTML note", command: command, type: "render", uiIcon: "extension" },
             { title: "Book", command: command, type: "book", uiIcon: "book" },
-            { title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "water" }
+            { title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "selection" }
         ];
     }
 

src/public/app/widgets/mermaid.js

@@ -63,7 +63,7 @@ export default class MermaidWidget extends NoteContextAwareWidget {
 
             this.$errorContainer.hide();
         } catch (e) {
-            this.$errorMessage.text(e.message);
+            this.$errorMessage.text(e.message).append(`<br/><br/><p>See <a href="https://mermaid-js.github.io/mermaid/#/flowchart?id=graph">help and examples</a>.</p>`);
             this.$errorContainer.show();
         }
     }

src/services/notes.js

@@ -50,7 +50,7 @@ function deriveMime(type, mime) {
 
     if (type === 'text') {
         mime = 'text/html';
-    } else if (type === 'code') {
+    } else if (type === 'code' || type === 'mermaid') {
         mime = 'text/plain';
     } else if (['relation-map', 'search'].includes(type)) {
         mime = 'application/json';
@@ -115,6 +115,8 @@ function createNewNote(params) {
             mime: deriveMime(params.type, params.mime)
         }).save();
 
+        console.log(params);
+
         note.setContent(params.content);
 
         const branch = new Branch({

src/services/utils.js

@@ -168,7 +168,7 @@ const STRING_MIME_TYPES = [
 
 function isStringNote(type, mime) {
     // render and book are string note in the sense that they are expected to contain empty string
-    return ["text", "code", "relation-map", "search", "render", "book"].includes(type)
+    return ["text", "code", "relation-map", "search", "render", "book", "mermaid"].includes(type)
         || mime.startsWith('text/')
         || STRING_MIME_TYPES.includes(mime);
 }