マインドマップ
マインドマップは、情報をグラフィカルに整理し、全体の各部分間の関係を表示するために使用される図です。通常、1 つのトピックを中心に作成され、トピックは空白ページの中央に描かれ、その後それに関連するアイデアの表現が周囲に追加されます。主要なアイデアはトピックに直接接続され、他のアイデアはこれらの主要なアイデアから分岐します。
マインドマップの例：
コピー
埋め込み
mindmap
root((mindmap))
Origins
Long history
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
構文
マインドマップを作成する構文は簡単で、インデントに依存して階層構造のレベルを設定します。
以下の例では、3 つの異なる階層を確認できます。第 1 層はテキストの左側から始まります。第 2 層には同じ列から始まる 2 つの行があり、ノード A を定義します。第 3 層のテキストは前の行より多くインデントされ、ノード B と C を定義します。
コピー
埋め込み
mindmap
Root
A
B
C
要するに、これはシンプルなテキストアウトラインで、ルートノードは Root という名前で、子ノード A があります。A にはさらに 2 つの子 B と C があります。以下の図では、これがマインドマップのスタイルでレンダリングされることを確認できます。
コピー
埋め込み
mindmap
Root
A
B
C
このようにして、テキストアウトラインを使用して階層的なマインドマップを生成できます。
異なる図形
Mermaid マインドマップは、異なる図形を使用してノードを表示できます。ノードの図形を指定する際、構文はフローチャートのノードに似ており、まず ID、次に図形定義、テキストは図形の表示ボックスに配置します
マインドマップは以下の図形を表示できます:
長方形
コピー
埋め込み
mindmap
id[I am a square]
角丸長方形
コピー
埋め込み
mindmap
id(I am a rounded square)
円
コピー
埋め込み
mindmap
id((I am a circle))
爆発バブル
コピー
埋め込み
mindmap
id))I am a bang((
雲
コピー
埋め込み
mindmap
id)I am a cloud(
六角形
コピー
埋め込み
mindmap
id{{I am a hexagon}}
デフォルト
コピー
埋め込み
mindmap
I am the default shape
アイコンとクラス
アイコン
フローチャートと同様に、ノードにアイコンを追加できますが、より新しい構文を使用します。フォントベースのアイコンスタイルは統合プロセスで追加され、ウェブページで使用可能になります。::icon() 構文を使用してそれらをマインドマップのノードに追加できます。
コピー
埋め込み
mindmap
Root
A
::icon(fa fa-book)
B(B)
::icon(mdi mdi-skull-outline)
クラス
同様に、クラスを追加する構文はフローチャートに似ています。3 つのコロン ::: を使用してクラスを追加でき、クラス名の間はスペースで区切ります。以下の例では、そのうちの 1 つのノードに 2 つのカスタムクラスが付加されています：urgent は背景を赤に、テキストを白にします。large はフォントサイズを大きくします:
コピー
埋め込み
mindmap
Root
A[A]
:::urgent large
B(B)
C
Markdown 文字列
Markdown 文字列機能は、より柔軟な文字列タイプを提供することでマインドマップを強化し、太字や斜体などのテキスト書式オプションをサポートし、ラベル内で自動的に折り返すことができます。
コピー
埋め込み
mindmap
id1["`**Root** with
a second line
Unicode works too: 🤓`"]
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
id3[Regular labels still works]
書式設定：
- テキストを太字にするには、テキストの前後に二重アスタリスク ** を使用します。
- テキストを斜体にするには、テキストの前後に単一のアスタリスク * を使用します。
