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

プラグイン[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:新,美
```

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

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」の使い勝手がいいということで連鎖的に見つけたフローチャートやシーケンス図。

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

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

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