Mermaidでマインドマップを簡単に作成！

Mermaid

2024.11.06

この記事は約4分で読めます。

マインドマップは、アイデアを整理したり、複雑な情報を視覚化したりするのに非常に便利です。この記事では、Mermaidでマインドマップを作成する方法を解説していきます。

Mermaidとは？
基本的なマインドマップ
- 2. ブランチの階層化
- 3. テーマの変更
ノードのシェイプの変更
- まとめ

Mermaidとは？

Mermaidとは?という方は、VScodeでのインストールの方法等以下にまとめていますので、こちらを参照ください。

基本的なマインドマップ

mindmap
    root((マインドマップ))
        思考の整理
            アイデア出し
            問題解決
        情報の可視化
            複雑な関係
            理解促進

中心に「マインドマップ」という単語を配置し、そこから「思考の整理」と「情報の可視化」という2つのブランチを展開しています。それぞれのブランチには、さらに詳細な項目が記述されています。

2. ブランチの階層化

mindmap
    root((マインドマップ))
         思考の整理
            アイデア出し
                フリーライティング
                ブレインストーミング
            問題解決
                問題の定義
                解決策の探索
        情報の可視化
            複雑な関係
                データ分析
                プロジェクト管理
            理解促進
                教育
                プレゼンテーション

この例では、「思考の整理」と「情報の可視化」というブランチの下に、さらに深い階層の項目を追加しています。このように、階層化することでより詳細な情報を表現できます。

3. テーマの変更

%%{init:{'theme':'default'}}%%
mindmap
    root((マインドマップ))
        思考の整理
            アイデア出し
                フリーライティング
                ブレインストーミング
            問題解決
                問題の定義
                解決策の探索
        情報の可視化
            複雑な関係
                データ分析
                プロジェクト管理
            理解促進
                教育
                プレゼンテーション

%%{init:{‘theme’:’default’}}%%の部分のdefaultを書き換えることでテーマの変更ができます。これにより色合いを変更できます。

テーマ: default

テーマ: 設定なし

ほかにも、forestやneutralなどのテーマが存在します。

ノードのシェイプの変更

mindmap
    root[I am a square]
        (I am a rounded square)
        ((I am a circle))
        ))I am a bang((
        )I am a cloud(
        {{I am a hexagon}}
        defalut

上記のようにノード名の前後に()を囲うことでノードの形を変更できます。