
待望のNotionで、マインドマップが描けるようになりました!
なので、早速試してみました。
以前はエラーでマインドマップが表示されませんでしたが、2023年5月6日時点でエラーが解消されていることが確認できました。今は問題なくマインドマップを表示することができます。
どんな感じ?
こんな感じになりました。かっこいい。

表示方法は3つありました。

- コードのみ表示する
- マインドマップのみ表示する
- コードとマインドマップを表示する
コードのみ | マインドマップのみ | コードとマインドマップ |
---|---|---|
![]() | ![]() | ![]() |
描き方
コードブロックを使ってMermaid記法で書いていきます。
Mermaidの書き方はこちらを参照ください。
https://mermaid.js.org/syntax/mindmap.html
スラッシュを入力して、code
を選択します。

言語はMermaid
を選択します。

これで、Mermaidでマインドマップを描けるようになりました。

サンプルのコードはこちらです。
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid