日: 2021年10月2日

これで、一手間が省けます。

プラグイン[WP Mermaid]

テキスト主体でフローチャートやシーケンス図、はたまたZENタイル（的な感情の動き）まで表示できるため重宝するようになったmermaid記法。

これを自ブログでもっと効率的に表示できないか？

と検索したところ、そのものズバリを発見しました。

WP Mermaid
https://ja.wordpress.org/plugins/wp-mermaid/

Mermaid導入

導入方法は通常のプラグインと同じく

1. ダッシュボード＞プラグイン
2. 「新規追加」から「mermaid」を検索
3. 出てきたものをインストール。

で完了です。

埋め込み

ブロックエディタから

「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:新,美
```

すると、表示結果はこうなります。

これにより、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>ゲーム終了]

表示結果

埋め込んだ結果が下記。

まだ詰めるところはありますが、形になっているとは思います。

まとめと今後の課題

元々はMarkdownエディタ「Typora」の使い勝手がいいということで連鎖的に見つけたフローチャートやシーケンス図。

これがエディタで書けるのは革命的な出来事ですし、更にブログに表示できるようになったのは更なる驚きと喜び。

• 横長だと文字が潰れる
• まだサンプルのコピペに過ぎない

など、改善点は山積み。ではありますが、これは一つのマイルストーン達成です。