はてなブログでMermaidを表示できるようにした

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

設定方法は上記を見ればわかるので特に説明の必要もないぐらい簡単に導入できた。

Mermaidのサンプル

sequenceDiagram
    participant Main
    participant task1
    participant task2

    Main->>+task1: task1(1)
    note over task1: sleep(1)
    task1-->>-Main: return

    Main->>+task2: task2(2)
    note over task2: sleep(2)
    task2-->>-Main: return

表示が変?

記事の編集(Markdown)でPC向けのプレビューを見ると下のような表示になってしまう。

プレビューでスマートフォン向けで見ると正しい表示になる。

原因がよくわからない…。 Mermaidの編集はPCで行ってから記事にすればよいので、問題はないのかも知れないけれどもなんだか気持ち悪い。

プレビューだけじゃなくて、公開してもPC向けは表示がおかしいままだった。。。

CSSの設定がおかしくて、ちゃんと表示できているのに背景が黒だったのでうまく表示できていないように見えていたようだ。 peno022.hatenablog.com