マインドマップ

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

「マインドマップとは、情報を視覚的に階層化して整理し、全体の一部間の関係を示すために使用される図です。多くの場合、空白のページの中央に画像として描かれた単一の概念を中心に作成され、画像、単語、単語の一部などの関連するアイデアの表現が追加されます。主要なアイデアは中心概念に直接接続され、他のアイデアはそれらの主要なアイデアから分岐します。」ウィキペディア

マインドマップの例。

構文

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

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

mindmap
    Root
        A
            B
            C

要約すると、これはテキストのアウトラインであり、ルートレベルにRootという名前のノードが1つあり、その子としてAが1つあります。Aには、さらに2つの子BとCがあります。下の図では、これがマインドマップとしてレンダリングされていることがわかります。

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

異なる形状

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

マインドマップでは、次の形状を表示できます。

正方形

角丸正方形

円

感嘆符

雲

六角形

デフォルト

フローチャートで利用可能な形状から始めて、さらに形状を追加する予定です。

アイコンとクラス

アイコン

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

クラス

クラスを追加するための構文もフローチャートと似ています。スペースで区切られた多数のCSSクラスに続くトリプルコロンを使用してクラスを追加できます。次の例では、ノードの1つに、背景を赤、テキストを白、フォントサイズを大きくする2つのカスタムクラスであるurgentがアタッチされています。

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

不明確なインデント

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

mindmap
    Root
        A
            B
          C

このアウトラインは、Bが明らかにAの子であるため、不明確です。しかし、Cに移ると、明確さが失われます。Cは、インデントが高いBの子ではなく、Bと同じインデントもありません。明確なことは、親を示すインデントが小さい最初のノードがAであるということだけです。その後、Mermaidはこの既知の真実に依存し、不明確なインデントを補正し、Cの親としてAを選択して、BとCが兄弟である同じ図につながります。

マークダウン文字列

「マークダウン文字列」機能は、太字や斜体などのテキスト書式設定オプションをサポートし、ラベル内のテキストを自動的に折り返す、より汎用性の高い文字列タイプを提供することで、マインドマップを拡張します。

書式設定

太字にするには、テキストの前後に二重のアスタリスク ** を使用します。
斜体にするには、テキストの前後に一重のアスタリスク * を使用します。
従来の文字列では、次を追加する必要がありました
ノードでテキストを折り返すためのタグ。ただし、マークダウン文字列は、長くなりすぎるとテキストを自動的に折り返し、
の代わりに改行文字を使用するだけで新しい行を開始できます
タグ。

ライブラリ/Webサイトとの統合。

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

それでも、9.4.0より前の方法を使用して、マインドマップを使用してMermaidをWebページに追加できます。

html

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

バージョン9.4.0以降では、このコードを次のように簡略化できます。

html

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

また、ライブエディターの実装を参照して、非同期読み込みがどのように行われるかを確認することもできます。

マインドマップ ​