概要

Mermaid記法は、グラフやフローチャートを描画するためのシンプルで直感的な言語です。Markdown形式で簡単に描画でき、多くの文書作成プラットフォームでサポートされています。

前回の記事で、はてなブログでも使えるという情報があったにもかかわらず「Syntax Error」が出てうまくいきませんでした。そこで、リベンジとして改めて試してみました。

Google I/O 2023 と Google Bardが日本語対応したらしいので試す - Blue Lagoon (hatenablog.com)

見たままモードでは作成できない

見たままモードでは、mermaid.jsを埋め込み、HTML編集モードで呼び出しても、「Syntax Error」が発生します。

色々調べたところ、はてなブログの自動ワードリンクが原因だと判断しましたが、有料プランにしないとこの機能を無効にできないようです。

誰も見ていないこのブログに、月額料金を払いたくないので、影響を受けないmarkdown方式で試してみます。

例

graph TD
A(Bing AIに質問) -->|的確で中立的な情報| B(Bing AIの回答を精査)
A -->|偏った情報| C(ChatGPTに質問)
C -->|インスピレーションや専門用語| D(ChatGPTの回答を精査)
D -->|問題を解決できる| F(解決!)
D -->|問題を解決できない| G
C -->|2021年またはそれ以降の情報| G(Google Bardに質問)
G -->|問題を解決できる| F
G -->|問題を解決できない| E(対話型AI以外での調査)
B -->|問題を解決できる| F
B -->|問題を解決できない| C

うん、うまくいきますね。

結論

Mermaid記述ははてなブログでも使えるが、見たままモードではどう頑張っても使えない。Markdown方式であれば問題なく使用できる。

ただし、見たままモードの編集の方が記事的には綺麗であり、使える機能も多くて簡単なので、わざわざmarkdownで毎回記事を書かないかなと思う。

Mermaidを別で記述して画像キャプチャして載せるとか、でもそれならMermaidを使う意味がなくなるし、便利そうではあるがブログでは結局使いこなせないですね。

参考

技術者向けTips: はてなブログでMermaid記法を利用する方法 - はてなブログ開発ブログ (hatenablog.com)

Blue Lagoon

はてなブログでMermaid記法を試す(リベンジ)

目次

概要

見たままモードでは作成できない

例

結論

参考