マインドマップ

マインドマップ: これは現在のところ実験的な図です。構文とプロパティは今後のリリースで変更される可能性があります。構文は安定していますが、アイコン統合は実験的な部分です。

「マインドマップは、情報を階層的に視覚的に整理するための図であり、全体の構成要素間の関係を示します。通常、中心に単一の概念を描いた画像の周りに作成され、関連するアイデアの表現（画像、単語、単語の部分など）が追加されます。主要なアイデアは中央の概念に直接接続され、他のアイデアはそれらの主要なアイデアから分岐します。」ウィキペディア

マインドマップの例

構文

マインドマップを作成するための構文はシンプルで、階層のレベルを設定するためにインデントに依存しています。

次の例では、3つの異なるレベルがあることがわかります。テキストの左から始まり、同じ列で2行から始まる別のレベルを持つノードAがあります。最後には、前の行よりもさらにインデントされたテキストにより、ノードBとCが定義されています。

mindmap
    ルート
        A
            B
            C

要約すると、ルートレベルに「ルート」と呼ばれる1つのノードがあり、その子ノードが「A」です。「A」はさらに子ノード「B」と「C」を持っています。以下の図では、これがマインドマップとして表示されます。

このように、テキストのアウトラインを使用して階層的なマインドマップを生成できます。

異なる形状

Mermaidマインドマップは、異なる形状を持つノードを示すことができます。ノードの形状を指定する構文はフローチャートのノードと似ており、IDの後に形状の定義が続き、その形状の区切り内にテキストがあります。可能な限り、フローチャートと同じ形状を維持するように努めますが、最初からすべてがサポートされているわけではありません。

マインドマップは次の形状を示すことができます。

正方形

Code:

丸い四角

Code:

円

Code:

バン

Code:

雲

Code:

六角形

Code:

デフォルト

Code:

より多くの形状が追加され、フローチャートで利用できる形状から始まります。

アイコンとクラス

アイコン

フローチャートと同様に、ノードにアイコンを追加できますが、更新された構文を使用します。フォントベースのアイコンのスタイリングは、統合中に追加され、ウェブページで利用できるようになります。これは図の作成者が行うことではなく、サイト管理者または統合者が行う必要があります。 アイコンフォントが配置されたら、::icon()構文を使用して、マインドマップノードに追加します。以下の例のように、アイコンのクラスを括弧内に配置します。これにより、マテリアルデザインやFont Awesome 5のアイコンが表示されます。このアプローチは、アイコンをサポートするすべての図に使用されるべきです。**実験的機能：**このスコープの広さが、マインドマップが実験的である理由でもあります。構文とアプローチは変更される可能性があります。

Code:

クラス

クラスを追加する構文もフローチャートと似ています。3つのコロンを使用して、空白で区切られたCSSクラスの数を追加できます。以下の例では、ノードの1つに2つのカスタムクラスが追加され、背景が赤くなり、テキストが白く大きくなります。

Code:

これらのクラスはサイト管理者によって提供される必要があります。

不明瞭なインデント

実際のインデントは、前の行と比べた場合にのみ重要です。前の例を取り上げて、少し混乱させると、計算がどのように行われるかを見ることができます。Cを、Bよりもインデントが小さいがAよりは大きい位置に置くことから始めてみましょう。

mindmap
    ルート
        A
            B
          C

このアウトラインは不明瞭です。Bは明らかにAの子ですが、Cに進むと明確さが失われます。CはBの子ではなく、Bと同じインデントを持っていません。明確なのは、最初の小さいインデントのノードが親であること、つまりAであるということのみです。その後、Mermaidはこの既知の事実を利用して不明瞭なインデントを補正し、Cの親としてAを選択し、BとCが兄弟であるという同じ図を導きます。

Markdown文字列

「Markdown文字列」機能は、太字や斜体といったテキストフォーマットオプションをサポートする、より多用途の文字列タイプを提供することでマインドマップを強化します。また、ラベル内のテキストを自動的にラップします。

Code:

フォーマット:

• 太字のテキストには、テキストの前後に二重アスタリスク ** を使用します。
• 斜体のテキストには、テキストの前後に単一のアスタリスク * を使用します。
• 従来の文字列では、ノード内のテキストをラップするために
  タグを追加する必要がありました。しかし、Markdown文字列はテキストが長くなると自動的にラップし、
  タグの代わりに単に改行文字を使用して新しい行を開始することを可能にします。

ライブラリ/ウェブサイトとの統合

マインドマップは、実験的なレイジーローディングと非同期レンダリング機能を使用しており、今後変更される可能性があります。バージョン9.4.0から、この図はmermaidに含まれますが、レイジーローディングを使用してmermaidのサイズを小さく保ちます。これは、将来の追加図を追加できるようにするために重要です。

バージョン9.4.0以前の方法を使用して、マインドマップ付きのmermaidをウェブページに追加することもできます：

<script type="module">
  import mermaid from '<CDN_URL>/mermaid@9.3.0/dist/mermaid.esm.min.mjs';
  import mindmap from '<CDN_URL>/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
  await mermaid.registerExternalDiagrams([mindmap]);
</script>

バージョン9.4.0から、このコードを簡略化できます：

<script type="module">
  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
</script>

非同期読み込みがどのように行われるかを見るために、ライブエディタの実装をこちらで参照できます。