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の使い方に関する記事
- 基本的な使い方について、アニメーション画像付きで解説してくれてます。普段、業務で使っている方でも知らないような便利なショートカットキーの使い方、HTML埋め込み方法など色々なTipsを紹介してくれていてとても役に立ちます。
- VSCodeでdiagrams.netを使う方法を解説した記事です。
Notionに図を埋め込む方法
diagrams.netで作成したアクティビティ図を事前に用意したので、それを使って説明します。
- 以下URLより、diagrams.netファイルを開く(Googleドライブにアクセスが必要なのでGoogleログインしてください)
- 事前に用意したファイルが開くので「diagrams.netで開く」を実行してください。
- 「ファイル > 埋め込み > Notion」を選択してください。
- 設定は変更せず、「作成する」を実行して、リンク(URL)を「コピー」してください。
- 図を埋め込みたいNotionページを開いて、 から「埋め込み」を選択してください。
- 4でコピーしたリンク(URL)を貼り付けてください。
- Notionに図が埋め込まれるので、表示サイズ調整してください。
- 修正する場合は「編集アイコン」を実行してください。
まとめ
- Notionはメモだけでなくカンバン的なタスク管理等もできる万能ツールですが、作画機能が無いので、必然的に何か作図ツールを使う必要があります。
- 今回の記事では、Notionで使える作図ツールとしてdiagrams.net(旧 Draw.io)を紹介しました。
- Notionの埋め込みブロックを使えば簡単に貼り付けることができますし、Notionと連携しているので編集も簡単にできます。
- Notionで「作図したい！」ってなった時に、今回の記事が少しでもお役に立てれば幸いです。
関連ブログ
[宣伝] GASプログラミング入門の教材 - Udemy
- 2023年11月時点で、約3,000人の受講生を獲得し、「Udemy Business」に選定されてます。
- 「Udemy Business」とは、Udemyが「企業研修」向けに提供しているサービスのことです。
- Udemyで販売している全ての講座の中から、「企業研修」に提供できる高品質な講座をレビューや内容を加味して厳選していることが特徴のサービスです。
- その「Udemy Business」で、このGAS講座は採用されております。
- 教材の詳細は、以下のUdemyに記載しておりますので内容ご確認ください
- 以下のバナーから購入すると、通常、定価27,800円が1,600円に割引される特別クーポンが適用されます！