mermaid-live-editor
mermaid-live-editor copied to clipboard
Formatting of diagram is changed when exported to svg, pdf or png
Describe the bug When editing the mermaid diagram in the live editor it will look fine, but when exporting it to either pdf, svg or png it will look "squashed"
To Reproduce Steps to reproduce the behavior:
- Create a markdown file
foo.md
- Insert the following in the live editor:
flowchart TD
style A fill:#bae1FF,stroke:#000,stroke-width:2px,color:#fff
subgraph A["`**Azure**`"]
subgraph w["`**Container 🐳**`"]
style w fill:#FFFFFF,stroke:#000,stroke-width:2px,color:#fff
subgraph E["`**ETL-Pipeline**`"]
style E fill:#ffb3ba,stroke:#000,stroke-width:2px,color:#fff
direction TB
a[("`Database`")]
c["`**Transform module**
*Transform file formats*
*Parse out noise*`"]
d["`**Load module**
*Vectorize documents
Create index
Load into vector store*`"]
end
end
b[(Azure Blob Storage)]
a -- Extract via FTP--> c
c -- Pass --> d
d -- Push --> b
backend <-- Retrieve --> b
subgraph r["`**Container 🐳**
`"]
style r fill:#FFFFFF,stroke:#000,stroke-width:2px,color:#fff
subgraph R["`**RAG-Application**`"]
style R fill:#ffffba,stroke:#000,stroke-width:2px,color:#fff
frontend["`**Frontend**
(**Streamlit**/Chainlit/React/other)`"]
backend["`**Backend**
(**Python**, **Llamaindex**, LangChain)`"]
frontend <--> backend
end
end
subgraph q["`**Container 🐳**`"]
style q fill:#FFFFFF,stroke:#000,stroke-width:2px,color:#fff
subgraph i["`**Evaluator**`"]
style i fill:#ffdfba,stroke:#000,stroke-width:2px,color:#fff
eval["`**Evaluation module**
(**Llamaindex**)`"]
eval -.Evaluate.-> backend
end
end
end
subgraph S["`**Local-Network**`"]
style S fill:#baffc9,stroke:#000,stroke-width:2px,color:#fff
u("`User
👤`")
u <-- Query --> frontend
end
- type
mmdc -i foo.md -o bar.pdf
- See the errror
Expected behavior I expect that the output will look similar to how it looks in the live editor.
Screenshots If applicable, add screenshots to help explain your problem.
Before exporting
After exporting
Desktop (please complete the following information):
- OS: MacOS Sonoma 14.4
- Browser: Brave
- Version: 123.1.64.109