Chinese texts are not shown in charts

[hi-i-m-GTooth]

Problem desciption

Hi, all. I just installed mermaid with npm locally, which means I will execute mermaid via ./node_module/.bin/mmdc. I would like to draw a mindmap with some chinese text. However, the result seems weird(I also got same result when drawing gantt chart.).

Input

Here is my input (I save it as test.md):

```
mindmap
    root((貓的特點))
        (貓的身體)
            [具有彈性的脊柱]
            [特殊的爪子機制]
        (貓的感官)
            [敏銳的視力]
            [重要的嗅覺]
            [靈敏的觸覺]
            [高度靈敏的聽覺]
        (貓的起源)
            [亞洲小亞細亞地區的谱系]
            [埃及的谱系]
            [真正的馴化記錄]
        (貓在文化中的角色)
            [在宗教中扮演重要角色]
            [在童謠、故事和諺語中出現]
        (貓科動物的特點)
            [高度專業化的肉食性哺乳動物]
            [趾行動物]
            [適合刺穿、固定和切割的牙齒]
        (貓的體重)
            [平均體重為2.7至4.5公斤]
            [非純種貓的體重可達12.7公斤]
        (貓的牙齒)
            [所有貓的牙齒公式]
            [初生的奶牙共24顆]
```

Command

Here is the command I executed:

node_modules/.bin/mmdc -i test.md -o rlt.png

Result of chart

Following chart is the result. You could notice that there is no text on it instead of some squares.

Environment

• My OS is: Ubuntu 22.04.3 LTS.
• As mentioned earlier, I installed Mermaid via npm locally.
• node.js == v18.17.1.

Did I do anything wrong with the command? Or Mermaid installed with some dependencies related to OS's language? Thanks for your reading!

Best, Yu-Ze

[yuvictoria0412]

Same problem on my project! Any solution??

[KSR-Yasuda]

Why don't you use utf-8 as input file encode?

[KSR-Yasuda]

test.txt

[hi-i-m-GTooth]

Why don't you use utf-8 as input file encode?

Hi, @KSR-Yasuda! Thanks for your reply!

Actually, I did check my input encoding type. It'll be utf-8 if I type file -bi test_gantt.md:

text/plain; charset=utf-8

And I'll call mmdc via bash in Python like this (I also printed those input strings and they're normally encoded):

subprocess.run(f"{os.path.join('node_modules', '.bin', 'mmdc')} -i - -o "+filename, shell=True, input=text, encoding="utf-8")

By the way, here is an interesting point I found: I can successfully draw a chart with chinese in Windows but not Linux OS.

[KSR-Yasuda]

@hi-i-m-GTooth

By the way, here is an interesting point I found: I can successfully draw a chart with chinese in Windows but not Linux OS.

Is that so? In my env, Ubuntu 18.04.6 LTS, it worked successfully... (checked passing the mmd text directly to mmdc command).

[hi-i-m-GTooth]

@hi-i-m-GTooth

By the way, here is an interesting point I found: I can successfully draw a chart with chinese in Windows but not Linux OS.

Is that so? In my env, Ubuntu 18.04.6 LTS, it worked successfully... (checked passing the mmd text directly to mmdc command).

Hi @KSR-Yasuda ! Sorry for the late reply! I also tried to directly used mmdc to ensure that the problem comes from mermaid. The problem still exists ... ( My Ubuntu is built on Azure's VM. But I think this is not the main reason since my Windows is also built on Azure's VM. )

[aloisklink]

@hi-i-m-GTooth, my gut feeling is that the version of Ubuntu you're using with Azure's VM doesn't have any CJK fonts installed.

Can you try running installing fonts-noto-cjk-extra with sudo apt install fonts-noto-cjk-extra?

My Ubuntu is built on Azure's VM. But I think this is not the main reason since my Windows is also built on Azure's VM.

Generally, Ubuntu's minimal cloud images can be very very small, e.g. only 104MiB, see https://cloud-images.ubuntu.com/minimal/releases/jammy/release-20230828/

Installing fonts-noto-cjk-extra and fonts-noto-cjk uses up 312 MiB of disk space, so it's like a 300% increase in disk space and for most applications, a server install of Ubuntu doesn't need any fonts :)

---

Side-note, you can also use the mermaid-cli Docker image if you're willing to use Alpine Linux instead of Ubuntu, as it already has the fonts-noto-cjk installed for you, see https://github.com/mermaid-js/mermaid-cli/blob/6a6c160277bf4798a794c3e25bbde8d736feafed/install-dependencies.sh#L5

[hi-i-m-GTooth]

Hi @aloisklink ! Thanks for giving me this advice! It works! I didn't know I need this font for chinese mermaid chart.

[CodePothunter]

@hi-i-m-GTooth, my gut feeling is that the version of Ubuntu you're using with Azure's VM doesn't have any CJK fonts installed.

Can you try running installing fonts-noto-cjk-extra with sudo apt install fonts-noto-cjk-extra?

My Ubuntu is built on Azure's VM. But I think this is not the main reason since my Windows is also built on Azure's VM.

Generally, Ubuntu's minimal cloud images can be very very small, e.g. only 104MiB, see https://cloud-images.ubuntu.com/minimal/releases/jammy/release-20230828/

Installing fonts-noto-cjk-extra and fonts-noto-cjk uses up 312 MiB of disk space, so it's like a 300% increase in disk space and for most applications, a server install of Ubuntu doesn't need any fonts :)

Side-note, you can also use the mermaid-cli Docker image if you're willing to use Alpine Linux instead of Ubuntu, as it already has the fonts-noto-cjk installed for you, see

https://github.com/mermaid-js/mermaid-cli/blob/6a6c160277bf4798a794c3e25bbde8d736feafed/install-dependencies.sh#L5

solved my problem!