2023-03-01

技術者向けTips: はてなブログでMermaid記法を利用する方法

HowTo お知らせ

いつもはてなブログをご利用いただきありがとうございます。

さて、はてなブログには、

はてなブログは、Mermaid記法に対応する予定はないでしょうか？

というご質問をいただくことがあります。はてなブログはJavaScriptやCSSなどをご自身で記載し、自由にカスタムできるプラットフォームです。Mermaidの対応も、少し設定を加えることでご自身のブログに導入することが可能です。
本記事では、はてなブログへの導入方法を紹介させていただきます。

Mermaidとは

Mermaidとは、テキストでダイアグラムやチャートを記述する仕様のことです。また、その記述方法がMermaid記法と呼ばれています。

例えば、以下の記述が、

graph LR;
    書く-- 読みたくなる -->読む;
    読む-- 書きたくなる -->書く;
    読む-- 共感する -->はてなスター;
    はてなスター-- モチベート -->書く;

以下のようなグラフとして展開されます。

graph LR;
    書く-- 読みたくなる -->読む;
    読む-- 書きたくなる -->書く;
    読む-- 共感する -->はてなスター;
    はてなスター-- モチベート -->書く;

最近ではGitHubやQiita、エディタでのリアルタイムレンダリングなど、Mermaid記法が利用できる環境が増えており、テキストによるダイアグラム表示のデファクトスタンダードとなっています。

より詳しい使い方については、下記の記事をご参照ください。
mermaid.js.org

はてなブログへの導入方法

はてなブログにて利用する場合、ブログの詳細設定 <head>要素にメタデータを追加に以下のスクリプトを挿入してください。

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

2023/03/02 10:16 追記。AMP配信設定をONにしている場合、Google検索やはてなブックマークアプリなどAMPに対応したプラットフォームから記事を開いた場合、AMPページとして記事が開かれ、Mermaid記法が展開されません。詳細設定 > AMPを配信する設定をOFFにしてからご利用ください。

「<head>要素にメタデータを追加」設定は開発者向けの設定となります。正しくない設定を保存した場合、ご自身のブログのデザインが崩れたり正常に閲覧できなくなってしまう可能性があります。ご注意ください。

使い方

編集モード:Markdownをご利用の場合は、コードブロック構文の言語識別子にmermaidを指定してください。

```mermaid
graph LR;
  hoge --> fuga;
```

編集モード:はてな記法をご利用の場合はスーパーPre記法のファイルタイプにmermaidを指定してください。

>|mermaid|
graph LR;
  hoge --> fuga;
||<

なお、いずれの書き方も通常は構文を強調する際の記法ですが、GitHub等の先行してMermaidに対応したウェブサイトとの互換を考慮し、例外的な挙動としてご利用いただけます。

よくある質問

はてなブログのオプションとしてMermaid記法に対応しないのでしょうか？
- 現在のところ、はてなブログとしてMermaid記法に対応する予定はございません。これはMermaid記法が主に技術者に向けた機能であり、一般に広く使われることを想定しないこと、利用ライブラリの変更、バージョンを指定したいなどの事情を考慮したものです。
Mermaid記法のシンタックスハイライトを行いたいときはどうしたら良いでしょうか？
- 現在のところ、はてなブログではMermaid記法のシンタックスハイライトには対応していません。対応する際には mermaid-code など、別のファイルタイプを用意し、レンダリングとシンタックスハイライトを使い分けられるようにしたいと考えています。

技術ブログを書くならはてなブログ

はてなブログは、上記の通りMermaid記法に対応でき、Texによる数式の対応も可能、API経由での更新も可能など、技術ブログを書きやすいプラットフォームです。技術ブログにはてなブログをどうぞよろしくおねがいします。
また、企業様向けにもおすすめです。現在、スタートアップ企業から大手企業まで400社以上にブログを開設いただいており、非常に活発にご利用いただいています。企業の技術ブログをまとめて読めるページも提供し、多くのユーザー様にご利用いただいておりますので、読まれる機会も増やすことが出来ます。
hatena.blog

どうぞご利用ください。