はてなブログ開発ブログ 技術者向け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
