Implement mermaid diagram additions

This commit is contained in:
Madhavan Sridharan 2025-10-25 19:32:25 -04:00 committed by Madhavan
parent 052547cac1
commit 0815a26970
2 changed files with 19 additions and 21 deletions

View file

@ -48,10 +48,10 @@ flowchart LR
end end
subgraph ThirdParty["Third Party Services"] subgraph ThirdParty["Third Party Services"]
OneDrive
style OneDrive fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
GoogleDrive["Google Drive"] GoogleDrive["Google Drive"]
style GoogleDrive fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px style GoogleDrive fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
OneDrive
style OneDrive fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
SharePoint["SharePoint"] SharePoint["SharePoint"]
style SharePoint fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px style SharePoint fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
More[...] More[...]
@ -60,8 +60,8 @@ flowchart LR
%% Define connections %% Define connections
DoclingSrv --> Backend DoclingSrv --> Backend
OneDrive --> Backend
GoogleDrive --> Backend GoogleDrive --> Backend
OneDrive --> Backend
SharePoint --> Backend SharePoint --> Backend
More --> Backend More --> Backend
Backend --> Langflow Backend --> Langflow
@ -73,10 +73,6 @@ flowchart LR
style Containers fill:#444444,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 style ThirdParty fill:#333333,stroke:#666666,color:white,stroke-width:2px
end 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. The **OpenRAG Backend** is the central orchestration service that coordinates all other components.

View file

@ -148,46 +148,49 @@
text-align: center; text-align: center;
margin: 2rem 0; margin: 2rem 0;
width: 100% !important; width: 100% !important;
min-height: 400px !important; min-height: 500px !important;
display: block !important; display: block !important;
overflow: visible !important;
} }
.mermaid svg { .mermaid svg {
width: 100% !important; width: 100% !important;
max-width: none !important;
min-width: 800px !important; min-width: 800px !important;
min-height: 400px !important; min-height: 500px !important;
height: auto !important; height: auto !important;
display: block !important; display: block !important;
margin: 0 auto !important; margin: 0 auto !important;
transform: scale(1) !important; transform: scale(1) !important;
} }
/* Override any potential conflicts */ /* Force Mermaid diagram sizing */
.markdown .mermaid { .markdown .mermaid {
width: 100% !important; width: 100% !important;
min-height: 400px !important; min-height: 500px !important;
display: block !important;
} }
.markdown .mermaid svg { .markdown .mermaid svg {
width: 100% !important; width: 100% !important;
min-width: 800px !important; min-width: 800px !important;
min-height: 400px !important; min-height: 500px !important;
transform: none !important; transform: scale(1) !important;
} }
/* Target the specific Mermaid container */ /* Target the specific Mermaid container */
div[class*="mermaid"] { div[class*="mermaid"] {
width: 100% !important; width: 100% !important;
min-height: 400px !important; min-height: 500px !important;
} }
div[class*="mermaid"] svg { div[class*="mermaid"] svg {
width: 100% !important; width: 100% !important;
min-width: 800px !important; min-width: 800px !important;
min-height: 400px !important; min-height: 500px !important;
} }
/* Additional aggressive targeting for Mermaid sizing */ /* Force Mermaid to render at full size */
.mermaid, .mermaid,
.mermaid > *, .mermaid > *,
.mermaid svg, .mermaid svg,
@ -195,17 +198,16 @@ div[class*="mermaid"] svg {
.mermaid div svg { .mermaid div svg {
width: 100% !important; width: 100% !important;
min-width: 800px !important; min-width: 800px !important;
min-height: 400px !important; min-height: 500px !important;
max-width: none !important; max-width: none !important;
display: block !important; display: block !important;
transform: none !important; transform: none !important;
scale: 1 !important; scale: 1 !important;
} }
/* Force Mermaid to not be constrained */ /* Override any potential scaling issues */
.mermaid svg { .mermaid svg {
transform: none !important;
scale: 1 !important;
viewBox: unset !important; viewBox: unset !important;
width: 100% !important;
min-width: 800px !important;
min-height: 400px !important;
} }