![](https://i0.wp.com/worker1188.com/wp-content/uploads/2024/01/2-1.png?resize=920%2C518&ssl=1)
待望のNotionで、マインドマップが描けるようになりました!
なので、早速試してみました。
以前はエラーでマインドマップが表示されませんでしたが、2023年5月6日時点でエラーが解消されていることが確認できました。今は問題なくマインドマップを表示することができます。
どんな感じ?
こんな感じになりました。かっこいい。
![](https://i0.wp.com/worker1188.com/wp-content/uploads/2023/04/スクリーンショット-2023-04-04-10.47.14.png?resize=920%2C924&ssl=1)
表示方法は3つありました。
![](https://i0.wp.com/worker1188.com/wp-content/uploads/2023/04/スクリーンショット-2023-04-04-11.07.20.png?resize=486%2C352&ssl=1)
- コードのみ表示する
- マインドマップのみ表示する
- コードとマインドマップを表示する
コードのみ | マインドマップのみ | コードとマインドマップ |
---|---|---|
![]() | ![]() | ![]() |
描き方
コードブロックを使ってMermaid記法で書いていきます。
Mermaidの書き方はこちらを参照ください。
https://mermaid.js.org/syntax/mindmap.html
スラッシュを入力して、code
を選択します。
![](https://i0.wp.com/worker1188.com/wp-content/uploads/2023/04/スクリーンショット-2023-04-04-10.48.05.png?resize=920%2C176&ssl=1)
言語はMermaid
を選択します。
![](https://i0.wp.com/worker1188.com/wp-content/uploads/2023/04/スクリーンショット-2023-04-04-10.49.02.png?resize=920%2C159&ssl=1)
これで、Mermaidでマインドマップを描けるようになりました。
![](https://i0.wp.com/worker1188.com/wp-content/uploads/2023/04/スクリーンショット-2023-04-04-10.46.33.png?resize=645%2C1024&ssl=1)
サンプルのコードはこちらです。
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