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

いつもはてなブログをご利用いただきありがとうございます。 さて、はてなブログには、 はてなブログは、Mermaid記法に対応する予定はないでしょうか？ というご質問をいただくことがあります。はてなブログはJavaScriptやCSSなどをご自身で記載し、自由にカスタムできるプラットフォームです。Mermaidの対応も、少し設定を加えることでご自身のブログに導入することが可能です。 本記事では、はてなブログへの導入方法を紹介させていただきます。 Mermaidとは Mermaidとは、テキストでダイアグラムやチャートを記述する仕様のことです。また、その記述方法がMermaid記法と呼ばれています。 例えば、以下の記述が、 graph LR; 書く-- 読みたくなる -->読む; 読む-- 書きたくなる -->書く; 読む-- 共感する -->はてなスター; はてなスター-- モチベート --

[hatenablog]

はてなブログのAMP配信設定をONにしている場合、Google検索やはてなブックマークアプリなどAMPに対応したプラットフォームから記事を開いた場合、記法が展開されない旨追記しました。設定をOFFにしてご利用ください。

[kyoruni]

はてなブログアプリではグラフになっていなかった

[Windymelt]

便利

[rna]

スーパーPREにmermaid記法使うとレンダリングしてくれるのか。しらんかった。例外的な挙動、かー。

[roirrawedoc]

展開されてない

[tattyu]

はてブのアプリブラウザからだとグラフにならず元のソースが出るので混乱した。グラフ記法良いね。

[Shinwiki]

展開されてねえww アプリのブラウザはダメなんか？

[elve]

ツイッターの調子が悪いのでコレで遊ぶかー／mindmapセミコロンつけてたら表示されんよhttps://snack.elve.club/entry/2023/03/02/065045

[pojama]

面白い

[ytRino]

へ〜

[honeybe]

デフォで使える様になったのかと思った。でも導入方法あるの助かるので後で参考にする(最近ブログ書いてねーだろ)