Improve docusaurus and mermaid diagrams working

docs/docs/get-started/what-is-openrag.mdx

@@ -17,4 +17,74 @@ OpenRAG builds on Langflow's familiar interface while adding OpenSearch for vect
 
 What's more, every part of the stack is swappable. Write your own custom components in Python, try different language models, and customize your flows to build an agentic RAG system.
 
-Ready to get started? [Install OpenRAG](/install) and then run the [Quickstart](/quickstart) to create a powerful RAG pipeline.
+Ready to get started? [Install OpenRAG](/install) and then run the [Quickstart](/quickstart) to create a powerful RAG pipeline.
+
+## OpenRAG architecture
+
+OpenRAG deploys and orchestrates a lightweight, container-based architecture that combines **Langflow**, **OpenSearch**, and **Docling** into a cohesive RAG platform.
+
+```mermaid
+%%{init: {'theme': 'dark', 'flowchart': {'useMaxWidth': false, 'width': '100%'}}}%%
+flowchart LR
+    %% Encapsulate the entire diagram in a rectangle with black background
+    subgraph DiagramContainer["OpenRAG Architecture"]
+        style DiagramContainer fill:#000000,stroke:#ffffff,color:white,stroke-width:2px
+
+        %% Define subgraphs for the different sections
+        subgraph LocalService["Local Service"]
+            DoclingSrv[Docling Serve]
+            style DoclingSrv fill:#a8d1ff,stroke:#0066cc,color:black,stroke-width:2px
+        end
+
+        subgraph Containers
+            Backend["OpenRAG Backend"]
+            style Backend fill:#e6ffe6,stroke:#006600,color:black,stroke-width:2px
+            Langflow
+            style Langflow fill:#e6ffe6,stroke:#006600,color:black,stroke-width:2px
+            OpenSearch
+            style OpenSearch fill:#e6ffe6,stroke:#006600,color:black,stroke-width:2px
+            Frontend["OpenRAG Frontend"]
+            style Frontend fill:#ffcc99,stroke:#ff6600,color:black,stroke-width:2px
+        end
+
+        subgraph ThirdParty["Third Party Services"]
+            OneDrive
+            style OneDrive fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
+            GoogleDrive["Google Drive"]
+            style GoogleDrive fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
+            SharePoint["SharePoint"]
+            style SharePoint fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
+            More[...]
+            style More fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
+        end
+
+        %% Define connections
+        DoclingSrv --> Backend
+        OneDrive --> Backend
+        GoogleDrive --> Backend
+        SharePoint --> Backend
+        More --> Backend
+        Backend --> Langflow
+        Langflow <--> OpenSearch
+        Backend <--> Frontend
+
+        %% Style subgraphs
+        style LocalService fill:#333333,stroke:#666666,color:white,stroke-width:2px
+        style Containers fill:#444444,stroke:#666666,color:white,stroke-width:2px
+        style ThirdParty fill:#333333,stroke:#666666,color:white,stroke-width:2px
+    end
+
+    %% Ensure Backend and Frontend are on the same level and have enough width for text
+    classDef sameLevel width:180px
+    class Backend,Frontend sameLevel
+```
+
+The **OpenRAG Backend** is the central orchestration service that coordinates all other components.
+
+**Langflow** provides a visual workflow engine for building AI agents, and connects to **OpenSearch** for vector storage and retrieval.
+
+**Docling Serve** is a local document processing service managed by the **OpenRAG Backend**.
+
+**Third Party Services** like **Google Drive** connect to the **OpenRAG Backend** through OAuth authentication, allowing synchronication of cloud storage with the OpenSearch knowledge base.
+
+The **OpenRAG Frontend** provides the user interface for interacting with the system.

docs/docusaurus.config.js

@@ -34,7 +34,12 @@ const config = {
   projectName: 'openrag', // Usually your repo name.
 
   onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+  markdown: {
+    mermaid: true,
+    hooks: {
+      onBrokenMarkdownLinks: 'warn',
+    },
+  },
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
@@ -76,6 +81,8 @@ const config = {
 
   plugins: [require.resolve('docusaurus-plugin-image-zoom')],
 
+  themes: ['@docusaurus/theme-mermaid'],
+
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
@@ -118,6 +125,17 @@ const config = {
         theme: prismThemes.github,
         darkTheme: prismThemes.dracula,
       },
+      mermaid: {
+        theme: {light: 'neutral', dark: 'forest'},
+        options: {
+          maxTextSize: 50000,
+          fontSize: 18,
+          fontFamily: 'Arial, sans-serif',
+          useMaxWidth: false,
+          width: '100%',
+          height: 'auto',
+        },
+      },
       zoom: {
         selector: '.markdown img',
         background: {

docs/package.json

@@ -16,8 +16,9 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.8.1",
-    "@docusaurus/preset-classic": "3.8.1",
+    "@docusaurus/core": "3.9.2",
+    "@docusaurus/preset-classic": "3.9.2",
+    "@docusaurus/theme-mermaid": "3.9.2",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "docusaurus-plugin-image-zoom": "^3.0.1",
@@ -27,9 +28,9 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.8.1",
-    "@docusaurus/tsconfig": "3.8.1",
-    "@docusaurus/types": "3.8.1",
+    "@docusaurus/module-type-aliases": "3.9.2",
+    "@docusaurus/tsconfig": "3.9.2",
+    "@docusaurus/types": "3.9.2",
     "typescript": "~5.6.2"
   },
   "browserslist": {

docs/src/css/custom.css

@@ -142,3 +142,70 @@
   display: inline-block;
   vertical-align: middle;
 }
+
+/* Mermaid Diagram Styling - Force proper sizing */
+.mermaid {
+  text-align: center;
+  margin: 2rem 0;
+  width: 100% !important;
+  min-height: 400px !important;
+  display: block !important;
+}
+
+.mermaid svg {
+  width: 100% !important;
+  min-width: 800px !important;
+  min-height: 400px !important;
+  height: auto !important;
+  display: block !important;
+  margin: 0 auto !important;
+  transform: scale(1) !important;
+}
+
+/* Override any potential conflicts */
+.markdown .mermaid {
+  width: 100% !important;
+  min-height: 400px !important;
+}
+
+.markdown .mermaid svg {
+  width: 100% !important;
+  min-width: 800px !important;
+  min-height: 400px !important;
+  transform: none !important;
+}
+
+/* Target the specific Mermaid container */
+div[class*="mermaid"] {
+  width: 100% !important;
+  min-height: 400px !important;
+}
+
+div[class*="mermaid"] svg {
+  width: 100% !important;
+  min-width: 800px !important;
+  min-height: 400px !important;
+}
+
+/* Additional aggressive targeting for Mermaid sizing */
+.mermaid,
+.mermaid > *,
+.mermaid svg,
+.mermaid div,
+.mermaid div svg {
+  width: 100% !important;
+  min-width: 800px !important;
+  min-height: 400px !important;
+  max-width: none !important;
+  display: block !important;
+  transform: none !important;
+  scale: 1 !important;
+}
+
+/* Force Mermaid to not be constrained */
+.mermaid svg {
+  viewBox: unset !important;
+  width: 100% !important;
+  min-width: 800px !important;
+  min-height: 400px !important;
+}