この記事はこんな人におすすめ！
WP Mermaidを使ってWordPressブログでフローチャートを作ってみたいけど、よく分かんないから要点だけ誰か教えてくれないかな？
そんな人におすすめの記事です。
WP Mermaidで出てくる用語の解説や、テキストボックスの形状、矢印の方向を下から上にする方法など、比較的簡単にできる編集について紹介していきます！
本記事のフローチャート
事前準備（WP Mermaidの導入と基本形フローチャートの作成）
ほとんどの人はWordPressブログにWP Mermaidを導入済みという人だと思うのですが、もし未導入の人がいたら下の記事を参考にインストールしてみて下さい！
WordPressブログで手軽にフローチャートを作成する方法！（WP Mermaidの導入） - かえる主任ブログ (kaeru-chief.com)
WP Mermaidを導入済みの人はこの段落は飛ばして大丈夫です！
WP Mermaidの基本スキル6選（筆者の勝手なチョイス）
私が勝手にチョイスしたWP Mermaid基本スキルの6つを紹介します！これを身に付ければ、ほとんどのフローチャートは書けるようになりますよ♪
- 作成されるフローチャートの構成要素
- フローチャートを作成するための基本構文
- フローチャートの向きの変え方
- エッジの変え方
- ノードに番号を振り分ける
- ノード図形の変え方
※本記事の内容は本家：mermaidで解説されている以下の内容を、私で再構成して紹介しています。
フローチャート (mermaid-js.github.io)
（※本家で紹介している内容で十分という人はもちろんいると思います。元が英文なので自動翻訳だと読みずらいかもしれない、初心者向けに表現を変えたい、という観点から本記事作成しました。）
作成されるフローチャートの構成要素
例えば、「A」という作業の後に「B」という作業をする、というのをフローチャートで示す場合、以下のようになります。
mermaidでは上記フローチャートの各要素を、以下のように定義しています。
- 「エッジ」 ＝ 上記フローチャートの矢印
- 「ノード」 ＝ 上記フローチャートでテキストが記載されている枠
- 「テキスト」 ＝ 枠内のテキスト（※普通の内容だけど念のため記載）
本記事ではここで紹介したエッジ、ノードといった単語がよく出てくるので、覚えておきましょう！
フローチャートを作成するための基本構文
前項で例示したフローチャートは最も基本的なもので、以下のような構文で構成にされています。
flowchart TD;
A-->B;以下にそれぞれの単語、記号の意味を解説します。
- 「flowchart」 ： フローチャートを作成する際に最初に記載する必要があるコマンド。 「graph」でも代用できる。
- 「TD」 ： フローチャートの方向を表すコマンド。（※エッジ先端の種類はコマンドで変えられるます。矢印の向きと覚えてしまうと頭の中でごちゃつくので注意しましょう）
- 「；（セミコロン）」 ： 行の終了を表す記号（改行すれば省略可）
- 「A 、 B」 ： ノード枠内に表示されるテキスト。任意に記入可能。ただ、「；」「：」といった記号を表示させたい時は構文エラーになる場合があるので、特殊文字コードを使用した方がいいです。
- 「-->」 ： エッジを通常の矢印で表示させるコマンドです。
最小限の構成ですが、それぞれに意味があるので、誤記の場合は当然「Syntax error（構文エラー）」と表示され、フローチャートが作成されません。
mermaidでは構文に間違いがなければ編集画面でもプレビューを見ることができるので、自分が意図したフローチャートになっているか確認しながら作成するようにしましょう♪
それと、以下の記述の順番は基本になるので是非覚えていって下さい！
- 文頭に「flowchart」と入力する
- 「TD」等でフローチャートの向きを指定する
- 上記1と2の後に、ノードやエッジ、テキストを記述していく
※基本的にコマンドは半角英数入力です。ノード内に表示させるテキストのみ全角に対応するので注意して下さい。
フローチャートの向きの変え方
フローチャートの向きを表すコマンドには以下の4つがあります。
- TB - 上から下へ（※TDと記載しても同じ）
- BT - 下から上へ
- RL - 右から左へ
- LR - 左から右へ
状況に応じて使い分けるようにしましょう！
エッジの変え方
エッジは以下の3つの線種があります。
- 実線（矢印あり／なし）
- 太い実践（矢印あり／なし）
- 点線（矢印あり／なし）
一つずつ紹介していきますね！
エッジの種類：実線
実線のエッジは「-」：ハイフンで表します。
flowchart LR;
A-->B;エッジの種類：太い実線
太い実線のエッジは「=」：イコールで表します。
flowchart LR;
A==>B;エッジの種類：点線
点線のエッジは「-」：ハイフンと「.」コンマを組み合わせて表します。
flowchart LR;
A-.->B;エッジのカスタマイズ
前述した線種に対して以下のカスタマイズが可能です。
- エッジ先端形状の変更
- エッジの長さ調整
- エッジの中間に枠無しでテキストを配置
エッジ先端形状の変更
大抵のフロチャートではエッジは矢印になると思いますが、矢印部分を「〇」や「×」に変更可能です。それぞれ以下のように表します。
- 「--o」：ハイフンとアルファベット小文字o（オー）の組み合わせ
- 「--x」：ハイフンとアルファベット小文字x（エックス）の組み合わせ
flowchart LR;
A--oB;
B--xC;エッジの長さ調整
エッジの長さは制限がありますが「-」：ハイフンの数で調整できます。
「-」は通常2つ記入します。3つ記入すると2倍程度の長さのエッジを作成可能です。
flowchart LR;
A-->B;
B--->C;
太い実線でも同様の調整は可能です。
flowchart LR;
A==>B;
B===>C;※試してみたところ、点線では長さ調整はできませんでした。長さ調整機能は実線限定の機能なのかもしれません。
エッジの中間に枠無しでテキストを配置
以下のように記述することで、エッジの中間部分にテキストを配置可能です。
flowchart LR
A--紹介文--->Bこの時、Aの後に「-」が２つ、Bの前に「-」3つの記述ルールは必ず守るようにしましょう！「-」の数が違うと「Syntax error（構文エラー）」となります。
以下の記述でも、先程と同様にテキストを配置可能です。もちろん「-」、「|」の位置や数が違うと「Syntax error（構文エラー）」になるので注意しましょう。
flowchart LR
A--->|紹介文|Bノードに番号を振り分ける
先程のエッジの例ではノード内のテキストはさAとかBとかで記述しやすかったですが、このテキストが20文字程度になるとフローチャートを作成する時に面倒になります。
その理由は、以下のように途中に出てくるテキストの記載内容を完全に一致させる必要が出てくるからです。不一致の場合は「Syntax error（構文エラー）」になります。
flowchart LR;
最初に実行するコード-->二番目に実行するコード;
二番目に実行するコード-->三番目に実行するコード;そこで、それぞれのノードに番号：「id*」を割り振って以下のように記述することで「Syntax error（構文エラー）」を回避できます。
flowchart LR;
id1[最初に実行するコード]-->id2[二番目に実行するコー];
id2[二番目に実行するコード]-->id3[三番目に実行するコード];上のコードではid2の記載内容が2行目と3行目で一致しませんが「Syntax error（構文エラー）」を回避できています。id2記載内容のノードへの反映は、2行目よりも3行目の内容が優先されるようです。3行目が誤記の場合は、誤記した内容が表示されました。
ノード図形の変え方
mermaidで標準的に準備してくれているノード図形は、なんと12種類もあります。表示させたいテキストを、様々な括弧の組み合わせで囲むことで使い分けが可能です。
- 長方形
- 角部が丸い長方形
- スタジアム形
- サブルーチン形
- 非対称形
- 六角形
- 平行四辺形
- 台形
- ひし形
- 円筒形
- 円形
- 二重円
長方形
idを割り振った後、 テキストを[ ]で囲むと、ノードを長方形の枠で表示できます。
flowchart LR
id1[長方形]角部が丸い長方形
idを割り振った後、 テキストを( )で囲むと、ノードを角部が丸い長方形の枠で表示できます。
flowchart LR
id1(角が丸い長方形)スタジアム形
idを割り振った後、 テキストを([ ])で囲むと、ノードをスタジアム形の枠で表示できます。
flowchart LR
id1([スタジアム形])サブルーチン形
idを割り振った後、 テキストを[[ ]]で囲むと、ノードをサブルーチン形の枠で表示できます。
flowchart LR
id1[[サブルーチン形]]非対称形
idを割り振った後、 テキストを> ]で囲むと、ノードを非対称形の枠で表示できます。
flowchart LR
id1>非対称形]※この形のノードは左右対称にはできないので注意してください！
六角形
idを割り振った後、 テキストを{{ }}で囲むと、ノードを六角形の枠で表示できます。
flowchart LR
id1{{六角形}}平行四辺形
idを割り振った後、 テキストを[/ /]で囲むと、ノードを平行四辺形の枠で表示できます。
flowchart LR
id1[/平行四辺形/]台形
idを割り振った後、 テキストを[/ \]（※￥はバックスラッシュに置き換えて読んでください）で囲むと、ノードを台形の枠で表示できます。
flowchart LR
id1[/台形\]※キーボードのバックスラッシュ（ろ）を押してくれていれば、表示が半角の\のままでも、ソースコードとしてはバックスラッシュとして認識されるので問題ありません。
ひし形
idを割り振った後、 テキストを{ }で囲むと、ノードをひし形の枠で表示できます。
flowchart LR
id1{ひし形}円筒形
idを割り振った後、 テキストを[( )]で囲むと、ノードを円筒形の枠で表示できます。
flowchart LR
id1[(円筒形)]円形
idを割り振った後、 テキストを(( ))で囲むと、ノードを円形の枠で表示できます。
flowchart LR
id1((円形))二重円
本家Mermaidでは二重円のノードも作成可能と紹介されていましたが、私の動作環境では「Syntax error（構文エラー）」となって表示できませんでした。原因は不明なので、今後もし判明したらここで報告します！
感想
エッジの線種はそれなりな感じでしたが、ノードの数が多かったのが意外でした。それだけ表現の幅が広いということなのでユーザーとしてはうれしいですよね！
これだけ身に付けたら大抵のフローチャートは作れちゃいます。
Mermaidは作成した資料に対して、後から修正したり、追加したりという作業を実施する前提で作られたツールなので、今回身に付けたことで今後記事をブラッシュアップしていこうと思います！
※調べていく過程でサブグラフとかリンクとか、他にも色々できる事がわかってきたので、そちらについても今後深堀りしていこうと思います。
まとめ
- WP Mermaidでは手軽に内容を変更できるように、使いやすい簡単なコマンドが装備されている
- エッジは3種類、ノードは12種類から指定できる
- 最初は億劫かもしれないが、内容自体は重くないので覚えやすい
- 後から色んな修正や追加がしやすいので、基本を身に付けておくとのちのち便利
是非、ランキングへの協力をお願いします！
にほんブログ村
コメント