ぺのめも

Web開発を勉強中。学んだことや思ったことなど

はてなブログのMarkdown編集モードでMermaidの図を書く設定

Mermaid

Mermaidとは、テキストをレンダリングしてグラフやチャートを描けるJavaScriptのライブラリです。
はてなブログで記事を書く際にも利用したかったのですが、デフォルトでは利用できず追加の設定が必要だったので、設定方法をまとめておきます。

mermaid.js.org

設定方法

1)Mermaidのスクリプトをロード・埋め込む

  1. はてなブログの「設定」画面を開き、詳細設定をクリック
  2. <head>要素にメタデータを追加」の項目に、下記のスクリプトを追記
<script type="module">
import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>

2)CSS設定を追加

上記により```mermaidの記法が使えるようになりますが、このままだとはてなブログCSSがきいてコードブロックの背景が黒くなってしまい、mermaidの図がかなり見づらくなります。
それを避けるため、pre.code.mermaidのときはスタイルが当たらないように修正します。

手順:

  1. はてなブログの「デザイン」画面を開き、「カスタマイズ」タブをクリック
  2. 「デザインCSS」をクリックしてテキストボックスを開き、下記のCSSを追記
/*mermaid用*/
.entry-content pre.code.mermaid {
  background: none;
  border: none;
  padding: 0;
}
.entry-content pre.code.mermaid[data-lang="mermaid"]:before {
    content: none;
}

3)Mermaidを書く

ここまでの設定を終えると、Markdownモードの記事編集画面で、```mermaidの記法が使えるようになります。

 ```mermaid
   sequenceDiagram
       Alice->>John: Hello John, how are you?
       John-->>Alice: Great!
       Alice-)John: See you later!
 ```
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

色んなチャートが簡単に書けて便利

フローチャート、シーケンス図、クラス図、ER図など、色々な図を簡単に書くことができます。
元々はGitのブランチ運用の図をサクッと書けないかな〜と思って探していたのですが、それもバッチリありました。

 ```mermaid
 ---
 title: Example Git diagram
 ---
 gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit
 ```
---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit

参考記事