Notionにdiagrams.net(旧 Draw.io)を埋め込む方法

Home > TECH BLOG > Notionにdiagrams.net(旧名 Draw.io)を埋め込む方法
公開日:2022年8月18日 更新日:2022年8月18日
著者:藤澤 勇樹(FUJISAWA Yuki)

記事概要


Notionには作図機能がないので必然的に何か作図ツールを使う必要があります
作図ツールとしては、個人的に「diagrams.net(旧 Draw.io)」がオススメです。エンジニアで使っている人が多い印象ですし、無料にもかかわらず豊富な機能が用意されています。
そんなステキなdiagrams.netで作成した図をNotionに埋め込む方法をこの記事では紹介します。

diagrams.netとは


diagrams.netとは、フローチャート、ネットワーク図、UML、ER図など様々な図を作成できる無料の作図ツールです。ブラウザ(GoogleChromeのような)で操作ができ、作成した図はGoogleドライブやGithubなどと連携させて保存が可能です。
*公式サイトはこちら
弊社でもシステム要件定義でフル活用していて、シーケンス図、ER図など作図するのに幅広く使っております。何よりもGoogleドライブにデータが保存できるのが嬉しいです。
*今回の記事ではdiagrams.netの使い方は扱いません。もし、diagrams.netの使い方に興味のある方は以下の記事がオススメなので参照して頂ければです。

diagrams.netの使い方に関する記事

Notionに図を埋め込む方法


diagrams.netで作成したアクティビティ図を事前に用意したので、それを使って説明します。
  1. 以下URLより、diagrams.netファイルを開く(Googleドライブにアクセスが必要なのでGoogleログインしてください)
  1. 事前に用意したファイルが開くので「diagrams.netで開く」を実行してください。
    1. Googleドライブのdiagrams.netファイルを開く
      Googleドライブのdiagrams.netファイルを開く
  1. 「ファイル > 埋め込み > Notion」を選択してください。
    1. 「ファイル > 埋め込み > Notion」を選択
      「ファイル > 埋め込み > Notion」を選択
  1. 設定は変更せず、「作成する」を実行して、リンク(URL)を「コピー」してください。
    1. Notion埋め込み用のリンク(URL)の作成
      Notion埋め込み用のリンク(URL)の作成
      リンク(URL)のコピー
      リンク(URL)のコピー
  1. 図を埋め込みたいNotionページを開いて、/emb から「埋め込み」を選択してください。
    1. Notion埋め込みコマンド「/embed」の選択
      Notion埋め込みコマンド「/embed」の選択
  1. 4でコピーしたリンク(URL)を貼り付けてください。
    1. Plain Text
      リンク(URL)の入力
      リンク(URL)の入力
  1. Notionに図が埋め込まれるので、表示サイズ調整してください。
diagrams.netの埋め込み
  1. 修正する場合は「編集アイコン」を実行してください。
    1. diagrams.netファイルを編集する
      diagrams.netファイルを編集する

まとめ


  • Notionはメモだけでなくカンバン的なタスク管理等もできる万能ツールですが、作画機能が無いので、必然的に何か作図ツールを使う必要があります。
  • 今回の記事では、Notionで使える作図ツールとしてdiagrams.net(旧 Draw.io)を紹介しました。
  • Notionの埋め込みブロックを使えば簡単に貼り付けることができますし、Notionと連携しているので編集も簡単にできます。
  • Notionで「作図したい!」ってなった時に、今回の記事が少しでもお役に立てれば幸いです。