これで、一手間が省けます。
プラグイン[WP Mermaid]
テキスト主体でフローチャートやシーケンス図、はたまたZENタイル（的な感情の動き）まで表示できるため重宝するようになったmermaid記法。
これを自ブログでもっと効率的に表示できないか？
と検索したところ、そのものズバリを発見しました。
WP Mermaid
https://ja.wordpress.org/plugins/wp-mermaid/
Mermaid導入
導入方法は通常のプラグインと同じく
- ダッシュボード＞プラグイン
- 「新規追加」から「mermaid」を検索
- 出てきたものをインストール。
で完了です。
埋め込み
ブロックエディタから
「WP Mermaid」を選択。ここにスクリプトを以下のように埋め込みます。
```mermaid
journey
title 2021/09/28 ZENタイル
section 出勤前
5-6:1: 嫌
7-8: 4: 味
8-9: 5: 驚
section 勤務中
10-11:0: 怒
11-12:4:恩
15-16: 1: 惑
section 帰宅
17-18:5:癒,独
19-20:5:新,美
```すると、表示結果はこうなります。
journey
title 2021/09/28 ZENタイル
section 出勤前
5-6:1: 嫌
7-8: 4: 味
8-9: 5: 驚
section 勤務中
10-11:0: 怒
11-12:4:恩
15-16: 1: 惑
section 帰宅
17-18:5:癒,独
19-20:5:新,美
これにより、LiveEditorで画像変換する必要はなくなりました。
そこで、これを描いてみます。
ボードゲーム『アリスガーデン』簡易フローチャート
シンプルなルールながらも遊び応え十分なタイルプレースメント『アリスガーデン』。
これを以下のように書いてみました。
コード
graph TB
A((ラウンド開始))-->B(ボーナスタイル以外の袋を全て左側に置く)-->C(1.左側の任意の袋から2枚をピックする)
C-->D[2.タイル1枚をボードに配置する]
D-->E[3.配置しなかったタイルを脇によける<br />ボーナスチップは手元に置く]
E-->F[4.1の袋を右側に置く]
F-->G{5.左側に袋がある}
G--Yes-->C
G--NO-->H{6.ボードにボーナス<br />タイル以外を配置できる}
H--YES-->I[全ての袋を左側に戻す]
I--次のラウンドへ-->A
H--NO-->J[ボーナスチップを<br />任意のスペースに配置<br />配置できないチップは手元に置く]
J-->K((得点計算))
K-->L>ゲーム終了]表示結果
埋め込んだ結果が下記。
graph TB
A((ラウンド開始))-->B(ボーナスタイル以外の袋を全て左側に置く)-->C(1.左側の任意の袋から2枚をピックする)
C-->D[2.タイル1枚をボードに配置する]
D-->E[3.配置しなかったタイルを脇によける<br />ボーナスチップは手元に置く]
E-->F[4.1の袋を右側に置く]
F-->G{5.左側に袋がある}
G--Yes-->C
G--NO-->H{6.ボードにボーナス<br />タイル以外を配置できる}
H--YES-->I[全ての袋を左側に戻す]
I--次のラウンドへ-->A
H--NO-->J[ボーナスチップを<br />任意のスペースに配置<br />配置できないチップは手元に置く]
J-->K((得点計算))
K-->L>ゲーム終了]
まだ詰めるところはありますが、形になっているとは思います。
まとめと今後の課題
元々はMarkdownエディタ「Typora」の使い勝手がいいということで連鎖的に見つけたフローチャートやシーケンス図。
これがエディタで書けるのは革命的な出来事ですし、更にブログに表示できるようになったのは更なる驚きと喜び。
- 横長だと文字が潰れる
- まだサンプルのコピペに過ぎない
など、改善点は山積み。ではありますが、これは一つのマイルストーン達成です。
