Notion+PotionはCode BlockのMermaid記法に対応していない

NotionのCode Block内でMermaid記法を使ったフローチャートを作ってもPotionではうまくそれを表示できないよ、という話。

Code Blockの中身

以下の記事の中で使った映像の出力フローを表すコード。

異なる解像度のデュアルモニター環境においてAbleton Live上で映像を表示する際の注意点

Ableton Live11のアレンジメントビューに映像ファイル（mp4, mov）をインポートして、ディスプレイ間をまたがるプレビューウィンドウの移動操作を行ったところ、Liveごとクラッシュするというバグに見舞われたため、その記録を残しておく。完全に対処はできていないため、あくまでも同じ症状があるんだな、という確認のためにご利用くださいまし。 Ableton Live11のアレンジメントビュー上にmp4ファイル（もしくはffmpegで変換したmovファイル）を取り込むプレビューウィンドウで再生するプレビューウィンドウをFHDモニターからWQHDモニターに移動する再度、プレビューウィンドウをWQHDモニターからFHDモニターへ移動する Ableton Live11がフリーズする or プレビュー画面にCould not decode video fileと表示されるプレビューウィンドウのディスプレイを跨いだ移動を行わないアレンジメントのタイムラインと同期できるMax For Liveデバイスで映像をプレビューする試していないけど海外フォーラムにそのような対処法を紹介しているページがあった（リンクは忘れた） Ableton Live 11 Suite (11.0.12 Build: 2021-11-04_b232c5df34) 制作環境の映像系接続は以下の通り（ついでに気になっていたMermaid記法を試してみた）。

https://kobayashihawtin.com/dualmonior-ableton


flowchart
	A["Galleria GR2060RGF-T(GeFoerce RTX2060 GDDR 6GB、FHDモニター)"] --> |miniDP to DP ケーブル| B["Dell P2419 HC(デイジーチェーン対応のFHDモニター)"]
	B --> |"DP to DP(デイジーチェーン)"| C["LG ‎32GN600-BAJP(WQHDモニター)"]

本当はこうやって表示したかった

Notion+Potion環境だとこうやって表示されちゃう

対処法

Notion側でCode Blockの表示方法を preview にして、表示されたフローチャートのスクショを取り、画像として貼り付け、Code Blockを消す。

Code Block内のコードを保存しておきたかったら、CSS側でCode Blockのパスを指定して display: none しちゃえばいいのでは。自分は面倒なのでやらない。

一応、Potionに機能改善リクエストを送ったのでそのうち改善されるかも。