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
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
OneDrive
style OneDrive fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
SharePoint["SharePoint"]
style SharePoint fill:#f2e6ff,stroke:#6600cc,color:black,stroke-width:2px
More[...]
@ -60,8 +60,8 @@ flowchart LR
%% Define connections
DoclingSrv --> Backend
OneDrive --> Backend
GoogleDrive --> Backend
OneDrive --> Backend
SharePoint --> Backend
More --> Backend
Backend --> Langflow
@ -73,10 +73,6 @@ flowchart LR
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.

View file

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