テキストで図を書けるWordPressのMermaidプラグインは最高だぜ

ブログ記事を書いていると、ちょっとした図を書きたくなることがある。だがブログ書きにとって、図は一つの鬼門である。というかめんどくさい。ただただめんどくさい。いくつかのコンポーネントを矢印で繋ぐ程度のしょっぱいシステム図を書くために、編集ソフトを起動し、エクスポートし、アップロードして貼り付けるのは苦行である。そんなことはやりたくない。

できるぞ、Mermaid記法なら。

目次

救いのMermaidプラグイン

Mermaid記法とは図をテキストで記述するもので、図の種類によっては手で頑張って書くより余程楽に書ける。テキストであるため、最近ならばAIに下書きさせることも可能だ。Notionなんかも対応している。というかNotionで図を書く方法は標準的にはこれしかない(Draw.ioがブラウザで使えるエクステンション出していたりするが)。WordPressでもプラグインを導入してMermaid記法に対応することにより、手をキーボードから離すことなくブログで図を書くことができるというわけだ。

graph LR hoge(Hoge) fuga(Fuga) db[(謎のデータベース)] hoge -->|hogehoge| fuga hoge -.- db

こんな感じでさらっと図が書ける。描けるじゃなくて書ける。正直これくらいの絵でも、あるのとないのとではわかりやすさが全然違うことはよくあるのだが、そうは言ってもこの程度の絵でも描くのは非常に面倒なので、ブログ記事だとついつい端折ってしまいがちである。でもテキストなら書ける。

Gutenbergとの相性よし

実際これは非常に便利で、手放せないプラグインの一つになった。また、このプラグインはブロックエディターであるGutenbergと非常に相性が良い。

Screenshot

このように/mermaidと記述するだけで、ブロックを呼び出してコードを書くことができる。これがクラシックエディタだとそうはいかない。

Gutenbergは出始めは全文コピペすらままならず阿鼻叫喚で、その時の印象が悪すぎたためにクラシックエディタをずっと使い続けていたのだが、ひたすら改良されていったようで、今はだいぶ使いやすくなった。箇条書きをシフトでインデントできない(スペースでできるけど……)のはなんとかしてもらいたいし、htmlコードのタグも複雑になってしまっている(REST APIで頑張ろうと思った時に壁になりそうなんだよなぁ)が、エディタとして使う分には良いと思う。

記法は覚える価値あり

Mermaid記法はテキストベースであるので、ChatGPTをはじめとする昨今の生成AIとは非常に相性が良い。言えばスニペットを書いてくれる。書いてくれるが、そもそも「編集ソフト起動するのめんどくせぇ」が根幹にあるわけで、当然「AIに聞くのもめんどくせぇ」のである

したがって、いちいち調べながら書かずに、書きたい図が書ける程度には覚える必要はある。必要はあるが、これは気合いを入れて2,3時間ほどチュートリアルを頑張ればほぼほぼやりたいことはできるようになると思われる。

この知識はずっと使えるうえに実践的なので、学習コストという観点で見たとき、非常にコスパ・タイパに優れる。Mermaid記法はWordPressだけではなく、Notionで使えるし、拡張機能入れればVSCodeでも使える。テキストで書けるということはコード管理することも可能である。まぁあまり複雑な図を書くのには向いていないので、本格的にやるならそれ用のツールを使うべきだけれど、そんな図を書くことばかりじゃない、というか書きたい図の9割はドラフトだと思う。そんな9割の需要をMermaid記法は汲んでくれるのです

ということで、WordPressでMermaidは最高だぜという記事でした。Mermaid記法は食わず嫌いの人が多いように思うのですが(というか自分がそうだった)、学習する価値はあるので是非やると良いと思います。使う人を増やしたい。自分はプラグインでWP Mermaid Plugin — WordPress.comを使っているのですが、もう一年ほどメンテされてないのですよね。良いプラグインだけれど、インストール数も1000+程度。使う人が増えればお金にもできるだろうしメンテナンス意欲も沸くはず……。

みんなで使おうMermaid。

本サイトはUXを悪くするevilなGoogle広告を消しました。応援してくださる方は おすすめガジェット を見ていってください!
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次