はじめに
ChatGPTを使っているとフローチャートやダイアグラムといった図は、 Mermaid
と呼ばれる記法で返されることがある。
これをブログに乗せようとした場合、Notionは問題ないが、WordpressだとはデフォルトではMermaid記法に対応しておらず図が上手く表示されないのでうまく表示できるようにしてみる。
Notionの場合はこんな感じ。
![](https://ashitaka-blog.com/wp-content/uploads/2023/08/Image-115.png)
プラグインの追加
Woredpressの管理者画面のプラグインから WP Mermaid
を探してインストールする
![](https://ps.w.org/wp-mermaid/assets/banner-772x250.png?rev=2305315)
WP Mermaid
mermaid.js を使用してマークダウンと同様の方法でテキストからの図やフローチャートを生成
WP Mermaidブロックの使用
プラグインが完了したら記事のブロック選択候補に WP Mermaid
が追加されているので選択する。
![](https://ashitaka-blog.com/wp-content/uploads/2023/08/Image-116.png)
本文にブロックが追加されるので、Mermaid記法で入力すると、下側に図が表示される。
![](https://ashitaka-blog.com/wp-content/uploads/2023/08/Image-117.png)
投稿した記事の見え方はこんな感じ。
![](https://ashitaka-blog.com/wp-content/uploads/2023/08/Image-118.png)
これでWoredpressでもMermaidを使えるようになる。