Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Formatting of diagram is changed when exported to svg, pdf or png #670

Open
nshern opened this issue Mar 22, 2024 · 0 comments
Open

Formatting of diagram is changed when exported to svg, pdf or png #670

nshern opened this issue Mar 22, 2024 · 0 comments

Comments

@nshern
Copy link

nshern commented Mar 22, 2024

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:

  1. Create a markdown file foo.md
  2. Insert the following:
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
  1. type mmdc -i foo.md -o bar.pdf
  2. See the errror

The same error occurs when exporting via the live editor*

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
Screenshot 2024-03-22 at 10 22 08

After exporting
mermaid-diagram-2024-03-22-102232

Desktop (please complete the following information):

  • OS: MacOS Sonoma 14.4
  • Browser: Brave
  • Version: 123.1.64.109
@nshern nshern changed the title Formatting of diagram is changed when exported to svg or pdf Formatting of diagram is changed when exported to svg Mar 22, 2024
@nshern nshern changed the title Formatting of diagram is changed when exported to svg Formatting of diagram is changed when exported to svg, pdf or png Mar 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant