ひとりマーメイド19日目
マインドマップ
概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。
この記事ではマインドマップの記述について紹介します！
↓↓前回の記事はこちら
マーメイドで記述するマインドマップ
前回の記事では円グラフの記法について紹介しました。
今日はマインドマップを見ていきます。マインドマップはキーワードから連想される単語を放射状につなげていくダイアグラムです。
mindmap
top((diagram))
flowchart
element
node
edge
algorithm
sequenceDiagram
declaration
participant
actor
action
request
response
gitGraph
action
commit
id
label
merge
宣言と枝分かれ
マインドマップはmindmapで宣言されます。
要素の関連はインデントを元に定義されます。マーメイドにおいてインデントが影響するダイアグラムはマインドマップが初めてです。
mindmap
top
idea1
idea2
idea3
同じインデントレベルに記述した要素が同一階層にレンダリングされます。
mindmap
top
idea1
idea1_1
idea1_1_1
idea1_1_2
idea1_2
idea2
idea2_1
idea2_2
idea3
idea3_1
idea3_2
idea3_3
idea3_4
インデントのレンダリング
マインドマップのノードは自分よりも先に上位のインデントレベルで定義されたノードのうち最も近いものを親と認識します。そのため、奇妙なインデントで記述しても補正してレンダリングされることがあります。
以下のように記述した場合を考えます。idea3以降のインデントが気持ち悪いですね。
まずidea4の親がidea3であることは直感的に分かると思います。
ではidea5はどうでしょうか。自分よりも先に上位のインデントレベルで定義されたノードのうち最も近いものを選ぶので、こちらもidea3が親になります。
mindmap
idea0((idea0))
ieda1
idea2
idea3
idea4
idea5
続いて以下のように記述した場合を考えます。idea1のインデントがおかしいですね。
ここでidea1の親を探します。自分よりも先に上位のインデントレベルで定義されたノードのうち最も近いものを選びますが、idea1より先に上位のインデントレベルで定義されたノードが存在しません。よってidea1は親を持たないためSyntax errorを起こします。
mindmap
idea0((idea0))
ieda1
idea2
idea3
idea4
idea5
ノードの形
ノードの形を変更することができます。現在サポートされているノードは以下の7種類です。
mindmap
defolt
id[Square]
id(Rounded square)
id((Circle))
id))Bang((
id)Cloud(
id{{Hexagon}}
デフォルト
ここで定義されているのはノードIDであり、デフォルトではこれがそのままノード名前となってダイアグラム中に表示されます。
mindmap
idea
四角
ノードの形を変更する際はノードIDとノード名前をそれぞれ定義する必要があります。
ID[NAME]
mindmap
id[idea]
スタジアム形
mindmap
id(idea)
円
mindmap
id((idea))
ギザギザ
mindmap
id))idea((
もくもく
mindmap
id)idea(
ヘキサゴン
mindmap
id{{idea}}
ヘキサゴン
mindmap
id{{idea}}
アイコン
ノード中にアイコンを埋め込むことができます。
Material Design IconsとFont Awesome 4がサポートされています。
NODE
::icon(fa CLASS)
NODE
::icon(mdi CLASS)
mindmap
top
idea1
idea2
::icon(fa fa-car)
idea3
::icon(mdi mdi-skull-outline)
公式エディタではMDIが正しくレンダリングされないようです。
まとめ
マインドマップの記述について紹介しました！
↓↓直の記事はこちら！！
参考