2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

お題は不問!Qiita Engineer Festa 2024で記事投稿!
Qiita Engineer Festa20242024年7月17日まで開催中!

QiitaのMermaidでmindmapを正しく表示させるのに悩んだ話

Last updated at Posted at 2024-06-14

背景

QiitaではMermaidでちょっとした図を描けて便利です。ただちょっとmindmapを描いてみようという時に「あれ?」となった事があったのでメモです。

解決策

タブがスペースにならないテキストエディタで入力したりタブだけコピペするなどしてがんばる💪

結論

QiitaでMermaidのmindmapを正しく表示できないときは本当のタブの代わりにスペース4つを使っていることが原因だったのでそこを注意!

本当のタブに変えたらちゃんと意図した通りの図が出ました!

悩んだ内容の説明

```mermaid
mindmap
root
    node
        leaf
        leaf
        leaf
    node
        leaf
        leaf
        leaf
    node
        leaf
        leaf
        leaf
```

↑こう書いたら
↓こう出てほしいってのが人情ってもんですが、

↓Qiitaでふつうにやろうとするとこうなります。

↑は下書き画面では↓こう見えています。
↑の2つが同じに見えるようになっていればQiitaが便利になったという事です。

image.png

注意点1: Qiitaでタブキーを押すとスペースが4つ出る

ここから原因がスタートしているようです。これはいつものことですが、本件以外に関しても、いつでも意識した方が良さそうです。

注意点2: QiitaのMermaidのmindmapでは必ずタブでなければならない可能性

本当のつらい箇所はここでしょうね。QiitaではMermaidのmindmapのタブが本当にタブでなければならないようです。

おまけ: ちなみにNotionでは……

NotionでもMermaidが使えるので念のため調べてみました。

image.png

タブの代わりにスペースを使っても意図した図がちゃんと出ます!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?