mermaid-live-editor icon indicating copy to clipboard operation
mermaid-live-editor copied to clipboard

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

Open nshern opened this issue 11 months ago • 0 comments

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 avatar Mar 22 '24 11:03 nshern