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 #1422

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

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

nshern opened this issue Mar 22, 2024 · 0 comments
Labels
bug Something isn't working

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 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
  1. type mmdc -i foo.md -o bar.pdf
  2. 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
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 added the bug Something isn't working label Mar 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant