Marpでmermaidは簡単だときいたけど

https://github.com/LTDD/Sessions/wiki/LT%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA27.05

Transcript

1. Marpでmermaidは簡単だときいたけど ひむらともひこ LT駆動開発 25.07 1
2. 自己紹介 ひむらともひこ ソフトウェアエンジニア 関心のある技術：Nix、GNU Emacs 2
3. ひさしぶりにLTをつくろう 3
4. どうやってスライドを作ろう？ 4
5. 流行りにのって生成AIさんにお願いしたい markdownでつくるのがお互い変更しやすそう ならばMarpを使ってみよう 5
6. 図はMermaidでかけるんだろう 6
7. なにかしないとでない ```mermaid sequenceDiagram participant U as ユーザー participant API as WebAPI participant Q as 後続処理 U->>API: 注文リクエスト API-->>U: 注文完了レスポンス API->>Q: 非同期処理開始 Q->>Q: 在庫確認 Q->>Q: 決済・発送処理完了 ``` 7
8. scriptタグをかいてしまえばいいらしい markdownはHTMLのスーパーセットだしね 8
9. <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script> 9
10. <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script> 10
11. エスケープされるやん 11
12. HTMLがレンダリングされるようにすればいいらしい セキュリティとは… 12
13. marp-cliのhtmlオプションとやらを有効にすればいいらしい 設定ファイルで有効にしてみる # .marprc.yml html: true 13
14. sequenceDiagram participant U as ユーザー participant API as WebAPI participant Q as 後続処理 U->>API: 注文リクエスト API-->>U: 注文完了レスポンス API->>Q: 非同期処理開始 Q->>Q: 在庫確認 Q->>Q: 決済・発送処理完了 14
15. まだでない… 15
16. classにmermaidをつけると出るらしい Doing so commands the mermaid parser to look for the div or pre tags with class="mermaid". From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts. https://mermaid.js.org/intro/#mermaid-api <pre class="mermaid"> sequenceDiagram participant U as ユーザー participant API as WebAPI participant Q as 後続処理 U->>API: 注文リクエスト API-->>U: 注文完了レスポンス API->>Q: 非同期処理開始 Q->>Q: 在庫確認 Q->>Q: 決済・発送処理完了 </pre> 16
17. やっと出た 後続処理 WebAPI ユーザー 後続処理 WebAPI ユーザー 注文リクエスト 注文完了レスポンス 非同期処理開始 在庫確認 決済・発送処理完了 17
18. でもこう書きたい ```mermaid sequenceDiagram participant U as ユーザー participant API as WebAPI participant Q as 後続処理 U->>API: 注文リクエスト API-->>U: 注文完了レスポンス API->>Q: 非同期処理開始 Q->>Q: 在庫確認 Q->>Q: 決済・発送処理完了 ``` 18
19. 展開結果を確認してみよう <code class=lanugage-mermaid> sequenceDiagram participant U as ユーザー participant API as WebAPI participant Q as 後続処理 U->>API: 注文リクエスト API-->>U: 注文完了レスポンス API->>Q: 非同期処理開始 Q->>Q: 在庫確認 Q->>Q: 決済・発送処理完了 </code> 19
20. language-mermaidに対してmermaidに変換するように伝えるとよさそう 20
21. いかにもそれっぽいものがある。 querySelector? The query selector to use when finding elements to render. Default: ".mermaid". https://mermaid.js.org/config/setup/mermaid/interfaces/RunOptions.html#querysele ctor 21
22. <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: false }); await mermaid.run({ querySelector: '.language-mermaid', }); </script> とすればよさそう。 22
23. でるようになった。 後続処理 WebAPI ユーザー 後続処理 WebAPI ユーザー 注文リクエスト 注文完了レスポンス 非同期処理開始 在庫確認 決済・発送処理完了 23
24. いやしかし、html オプションを有効にしたくない 24
25. HTMLを生成するときに差し込めばいいんじゃないだろうか。 25
26. marp-cliはmarp-coreを使ってHTMLを生成し、marp-coreはmarpitを継承していて、 marpitはmarkdown-itのパーサをpluginで拡張しているらしい。 利用 継承 利用 marp-cl marp-cor marpit markdown 26
27. markdown-itのpluginの仕組みを使って拡張されているため、 このあたりを学べばなんとかなりそう // marp-plugin-mermaid.mjs export default (md) => { const { marpit_slide_close } = md.renderer.rules md.renderer.rules.marpit_slide_close = (tokens, idx, opts, env, self) => { const renderer = marpit_slide_close || self.renderToken const original = renderer.call(self, tokens, idx, opts, env, self) // mermaid読み込みのコード const mermaidScript = `中略` return `${original}${mermaidScript}`; }; }; 27
28. と作ってみたものの、もちろんnpmにもすでにありそう。 公式と言えるものは見当たらない https://www.npmjs.com/search?ranking=popularity&q=markdown-it mermaid 28
29. まとめ 29
30. markdownでスライドをつくるmarpを試してみたが mermaid連携したかったけど良さげな連携はどれなのかわからん 仕組みを把握までの流れを追った Marpの仕組みは少し詳しくなった 30
31. ありがとうございました 31