mermaid missing text in svg

[kwatman]

Describe the bug i created a simple mmdc file. and when generated to an svg it is missing text.

To Reproduce i made a file called test.mmdc wit this code:

graph TD id1[This is the text in the box]

then I converted it with this command: mmdc -i test.mmdc

it then generated this: https://imgur.com/a/FmDRxV3

Expected behavior I expected that the text "This is the text in the box" would appear in the box

Screenshots https://imgur.com/a/FmDRxV3

Desktop (please complete the following information):

• OS: windows 10
• Browser chrome
• Version89.0.4389.90

[MindaugasLaganeckas]

@dolfijn3000 : please, check with Mermaid live editor: https://mermaid-js.github.io/mermaid-live-editor If you get the same behavior, then please, move your issue to https://github.com/mermaid-js/mermaid, because it is a generic mermaid problem not related to the CLI tool. I have actually tried your diagram snippet, and the live editor gives a syntax error.

[merrickluo]

I can confirm the issue exists with @mermaid-js/mermaid-cli@8.9.2, it seems this problem only exists for graph/flowchart, sequence Diagram seems fine

graph TD
id1[This is the text in the box]

This produces screenshot

generated svg

```svg ```

[merrickluo]

Did a little digging, it seems that when using graph, mermaid generated svg is using foreignObject to render the text in node, and emacs and some other svg viewer is not handling it well (browser renders it fine).

Update: This can be workaround by adding a custom config file set htmlLabels to false.

[MindaugasLaganeckas]

@merrickluo : can you provide a sample config file and how to use it together with a mermaid-cli docker? I can include this config file in the docker image and document how to access it if anyone needs it. If the config file does not have side effects, I can set it in use by default for docker.

[merrickluo]

@MindaugasLaganeckas the config file I use is like this

{
  "flowchart": {
    "useMaxWidth": false,
    "htmlLabels": false
  }
}

only the htmlLabels part matters though. I just use it by passing the file to mermaid-cli mmdc -c ~/.config/mermaid/config.json

[yevhene]

Hi. same issue. SVG in browser is ok but in viewer is not.

[ShaoHao-Chen]

"htmlLabels": false

above config can solve text missing issue. But I face another issue, my connection line is missing. Is there a way to show the connection line?

[abject]

I need to use "htmlLabels": false config to have text in SVG graphics. However this force a double escaping sequence of special characters. In fact the following markdown code:

```mermaid
   graph TD
      A["<"]
      B["<"]
      A --> B

provides this SVG picture with the above configuration:
![test_amp-1](https://user-images.githubusercontent.com/1702172/155500175-4fe189ba-44f9-4e37-9aac-473f77c62a3d.svg)
Looking at the SVG code I found that escaped characters are escape two times: `<` became `&amp;lt;` which prevent good rendering.

-----
EDIT: 

Mermaid-cli was installed with npm. Here are the Npm and Mermaid-cli version used on Ubuntu 20.04 OS:

* Npm: 6.14.4
* Mermaid-cli: 8.14.0

Full version log is available here: [versions.log](https://github.com/mermaid-js/mermaid-cli/files/8131497/versions.log)

[craigmac]

@MindaugasLaganeckas did this ever get document/put anywhere?

[MindaugasLaganeckas]

@craigmac : please, create a PR if you think that the documentation can be improved. We have already a section with known issues 👍 Thank you for your help! 😄

[datalifenyc]

Potential workarounds:

1. Comments (%%) above an abbreviated form of the text.

<div class="mermaid">
  graph TD
    ...
    subgraph Dremio Data Lakehouse
      direction TB
      E1[Data Lake]
      %% Table Format
      F1[Apache Iceberg]
      %% Transactional Catalog
      G1[Project Nessie]
      E1 -->|Managed By| F1
      F1 -->|Versioned By| G1
    end
    ...
</div>

2. Use <br/> tags, which increases the height rather than the width.

<div class="mermaid">
  graph TD
    ...
    subgraph Dremio Data Lakehouse
      direction TB
      E1[Data Lake]
      F1[<b>Table Format:</b><br/>Apache Iceberg]
      G1[<b>Transactional Catalog:</b><br/>Project Nessie]
      E1 -->|Managed By| F1
      F1 -->|Versioned By| G1
    end
    ...
</div>

Note: The approach for rendering .svg may be different, but hopefully this provides clues to another method for resolving this issue.

[Amer-Jabar]

I faced the same issue when rendering mermaid graphs using mermaid.js and this was the fix for me.

Cause Of Issue

For me the issue arose when having nodes with text that were long - longer than 27 letters. Then the text in the node would disappear. The reason was that the <g class="label"> tag has a translation of (0, 0) - perhaps some JS logic skips nodes with a text of longer than 27 letters.

Quick Fix

Using htmlLabels: false fixed the issue by changing the children html tags of the <g class="label"> to texts and spans. However, the text was still being wrapped.

Another Fix

By adding wrappingWidth: 1000 to the mermaid.initialize() method, I was able to fix the issue without using the htmlLabels: false flag:

mermaid.initialize({
    startOnLoad: true, flowchart: {
      wrappingWidth: 1000
    }
})

The problem is that, a node would still disappear if the text is longer than 1000 letters. So, you can set it to -1 and it will never be wrapped.