Mermaidでスペーシングを設定する方法

Mermaidでスペーシングを設定する方法

qiitaのmermaidにおいて、%%init構文が反映されないことがわかったため、記事中のmermaidは画像のスクショとなっています。qiitaで採用しているmermaidのversionは2025.05時点で11.3.0を採用しているところまではわかりましたが、%%init構文が使用できない理由まで突き止めることができず。

Notion, Obsidianでは下記の文法が通じることがわかっています。

通常のmermaid chartの書き方は以下のとおりです。

flowchart TD
    Start --> Stop

1. rankSpacing: 異なる階層とのノード間距離

• これに対して、block間のspanを自由に設定することができます

flowchart TD
    Start --> Stop
%%{init: {'flowchart': {'nodeSpacing': 10, 'rankSpacing': 10}}}%%

2. nodeSpacing: 同じ階層のノード間距離

• デフォルトだとこのようなスペースになります
• 見やすいですが、5個以上になると少し広がりすぎてしまいます。

flowchart LR
    Fruit --> Apple
    Fruit --> Orange
    Fruit --> Banana
    Fruit --> BlueBerry
    Fruit --> Pine-Apple

• 同じ階層同士のノード間距離を縮めるには、nodeSpacingの値をいじります。

flowchart LR
    Fruit --> Apple
    Fruit --> Orange
    Fruit --> Banana
    Fruit --> BlueBerry
    Fruit --> Pine-Apple
%%{ init: {'flowchart': {'nodeSpacing': 20} } }%%

• ちなみに、%%{init: {}}%%というパラメータは、mermaidの先頭と末尾どちらに記載しても通るようです。