Notionはメモだけでなくカンバン的なタスク管理等もできるいい感じのツールです。とても便利なのですが図を作成して貼り付けるような機能が今の所ない様なのでそれをdiagrams.netを使って補完してみたいと思います。また、この記事の公開時点ではまだの様ですが、diagrams.netの方がNotionに対応するらしく、ここで紹介するより手順が少なくなるかもしれないので、先にこの記事のまとめをみた方が良いかもしれません。
Notionに編集できる図を貼り付ける
Notion上に図(Network図やUML図等)を表示させ、後から編集できるようにしたいと思います。
手順は以下のようになります。
- diagrams.netで図を作る
- Notionのembed用URLを生成
- Notionに貼り付ける
- Notionに貼り付けた図を後から編集する
diagrams.netで図を作る
diagrams.net(以前はDraw.ioという名前だった)は図の作成・画像の取り込み・テキスト埋め込み等ができ、様々な形式で出力できるWebサービス・またはデスクトップアプリです。ユーザー登録不要で無料なのでWebサービスの方で十分だと思います。
今回は、このdiagrams.netを使ってまずは図を作ります。「Save diagrams to」と最初に出るかもしれませんが、今回に限って言えば保存しないので「Decide later」を選択で大丈夫です。
diagrams.netの使い方は省略します。diagrams.netで図を作成したらFile > Embded > IFrameをクリックし
Createをクリック
iflameのコードが表示されるのでCopyをクリックして、コピーされたiflameのコードをどこかにメモしておいてください。
Notionのembed用URLを生成
NotionにはEmbedsというオンラインコンテンツを埋め込める機能があります。この機能を使うために先ほどのiflameコードを埋め込めるURLに変換します。
変換にはこのDIY Embed URLを使います。
「HTML Code」にiflameコードを貼り付けて「Generate URL」してください。
urlがhttps://apption.co/embeds/******のように表示されるのでメモしてください。
Notionに貼り付ける
Notionの図を貼り付けたいページを開いてください。貼り付けたい場所で/embdedを入力します。
linkの貼り付け画面が表示されるので先ほどのDIY Embed URLで生成したurlを貼り付けます。
図が表示されます。
貼り付けたけどうまく表示されない時
diagrams.netでiflameではなくhtml形式での出力を試してみてください。それ以外の手順はほぼ同じになります。iflameの文字数が長くなってくると?うまくいかない時がある気がします。
Notionに貼り付けた図を後から編集する
先ほどの図の右上のOriginalをクリックします。
ブラウザで図が表示されます。ブラウザに表示された図の下部にマウスカーソルを持っていくとアイコンがいくつか表示されます。鉛筆マークをクリックしてください。
diagrams.netが表示され、図の編集画面になっているはずです。
後は同様の手順でiflame生成→embed用URLを生成→Notionに貼り付けを行なってください。
※ 編集しただけではNotionには保存されません。
まとめ
Notionで編集可能な図を表示するためにdiagrams.netを利用する方法を紹介しました。実はdiagrams.netのブログでNotion用のembded urlを生成できるような機能の追加が紹介されているので、近いうちにもう少し手順が短くなるかもしれません。