marp × mermaidでelkレンダリングを使用したいとき

私はモナディコスという屋号でマニュアル代理作成×RPAツール作成を請け負っています。

私はちょいちょいVScode上でmarpとmermaidを使って、客観的に自身の事業内容を見直すために事業計画書を書いては修正しています。
別に銀行に融資してもらうために書いているわけではないのですが、客観的に自身の事業内容を見直すためにちょいちょい書いています。
今回はその中での話です。

問題

VScode上ではelkベースのレイアウトが描画されているのに

HTMLで出力すると無視される。

markdown(marp)は下記の通り。

---
theme: base
_class: lead
paginate: true
backgroundColor: #fff
marp: true
backgroundImage: url('https://marp.app/assets/hero-background.svg')
---

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs';
  mermaid.initialize({startOnLoad: true});
</script>

<!--
_header: test
-->
### elkを適用したmarpスライド

<pre class="mermaid" style="height:500px">
---
config:
  theme: neutral
  layout: elk
---
flowchart LR
 subgraph awake["起床"]
        洗顔
        歯磨き
  end
 subgraph active["活動中"]
        作業
        営業活動
        ごはん
  end
 subgraph pre_sleep["就寝前"]
        入浴
        読書
        スマホ弄り
  end

  awake --> active
  active --> pre_sleep
  pre_sleep --> awake
  
</pre>

解決

下記のように、elkを読み込む行（コメントアウトのsからeまでの2行）を追記したら解決した。

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs';

  // elkを適用させる s
  import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@0/dist/mermaid-layout-elk.esm.min.mjs';
  mermaid.registerLayoutLoaders(elkLayouts);
  // elkを適用させる e
  mermaid.initialize({startOnLoad: true});
</script>

HTMLで再出力し、解消されたことを確認。

参考

下記のgithubのissueによれば、デフォルトのmermaidにelkがなぜか含まれておらず、明示しなければならないようです。
https://github.com/mermaid-js/mermaid/issues/5782#issuecomment-2581943038

プチ宣伝

非専門的、事務的な作業をマニュアル化することで、業務効率化をお手伝いします。
日々の業務で

• マニュアル化しないといけないけど時間がないし、面倒くさい
• 新人研修をその場のノリで乗り切ってしまっている
• 非効率を感じるけど、具体的に何が非効率なのか分からない
• あの作業、あの人しか分からないんだけど大丈夫かな

など、ちょっとした不満・心配がございましたらモナディコスまで是非お問い合わせください。