added mermaid guide

1 files changed, 101 insertions, 0 deletions

diff --git a/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts b/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts
index b4c21f6e3..a55f901e1 100644
--- a/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts
+++ b/src/client/views/nodes/chatbot/tools/DocumentMetadataTool.ts
@@ -291,6 +291,106 @@ Here is a detailed example:
         </answer>
     </stage>
 </interaction>
+
+<MermaidMindmapGuide>
+  <Overview>
+    <Description>
+      Mermaid mindmaps are hierarchical diagrams used to visually organize ideas. Nodes are created using indentation to show parent-child relationships.
+    </Description>
+    <Note>This is an experimental feature in Mermaid and may change in future versions.</Note>
+  </Overview>
+
+  <BasicSyntax>
+    <CodeExample language="mermaid">
+      <![CDATA[
+      mindmap
+          Root
+              Branch A
+                  Leaf A1
+                  Leaf A2
+              Branch B
+                  Leaf B1
+      ]]>
+    </CodeExample>
+    <Explanation>
+      <Point><code>mindmap</code> declares the diagram.</Point>
+      <Point>Indentation determines the hierarchy.</Point>
+      <Point>Each level must be indented more than its parent.</Point>
+    </Explanation>
+  </BasicSyntax>
+
+  <NodeShapes>
+    <Description>Nodes can be styled with various shapes similar to flowchart syntax.</Description>
+    <Shapes>
+      <Shape name="Square"><Code>id[Square Text]</Code></Shape>
+      <Shape name="Rounded Square"><Code>id(Rounded Square)</Code></Shape>
+      <Shape name="Circle"><Code>id((Circle))</Code></Shape>
+      <Shape name="Bang"><Code>id))Bang((</Code></Shape>
+      <Shape name="Cloud"><Code>id)Cloud(</Code></Shape>
+      <Shape name="Hexagon"><Code>id{{Hexagon}}</Code></Shape>
+      <Shape name="Default"><Code>Default shape without any brackets</Code></Shape>
+    </Shapes>
+  </NodeShapes>
+
+  <Icons>
+    <Description>Nodes can include icons using the <code>::icon(class)</code> syntax.</Description>
+    <CodeExample>
+      <![CDATA[
+      mindmap
+          Root
+              Node A
+              ::icon(fa fa-book)
+              Node B
+              ::icon(mdi mdi-lightbulb)
+      ]]>
+    </CodeExample>
+    <Note>Icon fonts must be included by the site administrator for proper rendering.</Note>
+  </Icons>
+
+  <CSSClasses>
+    <Description>Add custom styling classes using <code>:::</code>.</Description>
+    <CodeExample>
+      <![CDATA[
+      mindmap
+          Root
+              Important Node
+              :::urgent large
+              Regular Node
+      ]]>
+    </CodeExample>
+    <Note>Classes must be defined in your website or application CSS.</Note>
+  </CSSClasses>
+
+  <MarkdownSupport>
+    <Description>Supports markdown-style strings for rich text, line breaks, and auto-wrapping.</Description>
+    <CodeExample>
+      <![CDATA[
+      mindmap
+          id1["**Bold Root** with new line"]
+              id2["*Italicized* and long text that wraps"]
+              id3[Plain label]
+      ]]>
+    </CodeExample>
+  </MarkdownSupport>
+
+  <RenderingNote>
+    <Note>Indentation is relative, not absolute — Mermaid will infer hierarchy based on surrounding context even with inconsistent spacing.</Note>
+  </RenderingNote>
+
+  <Integration>
+    <Description>
+      From Mermaid v11, mindmaps are included natively. For older versions, use external imports with lazy loading.
+    </Description>
+    <CodeExample>
+      <![CDATA[
+      <script type="module">
+        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+      </script>
+      ]]>
+    </CodeExample>
+  </Integration>
+</MermaidMindmapGuide>
+
 `;
 
 // Extensive usage guidelines for the tool
@@ -336,6 +436,7 @@ RECOMMENDED WORKFLOW:
 3. Get document metadata with action="get" to see current values
 4. Edit fields with action="edit" using proper dependencies
 OR
+0. Understand the state of the currently available documents and their metadata using action="get" (this includes spacial positioning).
 1. Create a new document with action="create"
 2. Get its ID from the response
 3. Edit the document's properties with action="edit"