はじめに

みなさんはNotionを使ってますか？もちろん使ってますよね。

最近、Notionでシーケンス図を埋め込もうとしたときに見つけたkuroki.ioが、非常に簡単に使えて便利だったので紹介したいと思います。

kroki.ioとは

kroki.ioは、PlantUMLやMermaidをはじめとするDiagram as Codeを使って描いた図を、埋め込みURLに変換し提供してくれるAPIサービスです。この記事の執筆時で21種類の記法が使用できます。

kroki.ioにはフリーサービスとセルフマネージド（自分の環境に構築）の２種類ありますが、シンプルに埋め込むだけならサイト（ kroki.io）のテキストボックスに書いてクリップボードにコピーしたリンクをNotionの /Embed ブロックで埋め込むだけです。

NotionにはすでにFigmaやMiro、Whimsicalといったグラフや図の埋め込み連携も用意されています。しかし、それらと比べてDiagram as Codeのいいところは更新、編集のしやすさです。

他の方法で埋め込んでいる場合は、ツールで書き換えて図に変換されたものをキャプチャ、トリミング、ペーストする必要がありますが、krokiであればコードを書き換えて更新されたリンクをもとの箇所に置き換えるだけです。これが非常に簡単でいいと思いました。

おすすめは画像リンクの埋め込みと一緒に、以下のような折りたたみ記法でコードを書いておくことです。

（残念ながら現時点ではWordpressの埋め込みには対応していないようです…）

折りたたみでコードを記述


@startuml

actor User
participant kroki.io

User -> kroki.io : Diagram as Code
kroki.io --> User : 埋め込みURL

@enduml

私自身まだPlantUMLで作ったシーケンス図を埋め込むのに使った程度なので、これからも色々な図を描くのに使ってみたいと思います！また、オープンソースプロジェクトとしてソースコードも公開されています。興味のある人は覗いてみてはいかがでしょうか👀