Notionに編集できる図を貼り付ける(diagrams.net)

Notionはメモだけでなくカンバン的なタスク管理等もできるいい感じのツールです。とても便利なのですが図を作成して貼り付けるような機能が今の所ない様なのでそれをdiagrams.netを使って補完してみたいと思います。また、この記事の公開時点ではまだの様ですが、diagrams.netの方がNotionに対応するらしく、ここで紹介するより手順が少なくなるかもしれないので、先にこの記事のまとめをみた方が良いかもしれません。

# Notionに編集できる図を貼り付ける
Notion上に図(Network図やUML図等)を表示させ、後から編集できるようにしたいと思います。
手順は以下のようになります。

1. diagrams.netで図を作る
2. Notionのembed用URLを生成
3. Notionに貼り付ける
4. Notionに貼り付けた図を後から編集する


## diagrams.netで図を作る
[diagrams.net](https://www.diagrams.net/index.html)(以前はDraw.ioという名前だった)は図の作成・画像の取り込み・テキスト埋め込み等ができ、様々な形式で出力できるWebサービス・またはデスクトップアプリです。ユーザー登録不要で無料なのでWebサービスの方で十分だと思います。

今回は、このdiagrams.netを使ってまずは図を作ります。「Save diagrams to」と最初に出るかもしれませんが、今回に限って言えば保存しないので「Decide later」を選択で大丈夫です。

diagrams.netの使い方は省略します。diagrams.netで図を作成したらFile > Embded > IFrameをクリックし
![スクリーンショット 2020-12-31 1.50.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/8b73b663-b883-6345-3fd0-3e67f9b3a366.png)

Createをクリック

![スクリーンショット 2020-12-31 1.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/0aa42051-d526-e735-e703-866f6a1859ba.png)

iflameのコードが表示されるのでCopyをクリックして、コピーされたiflameのコードをどこかにメモしておいてください。

![スクリーンショット 2020-12-31 1.57.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/397c7336-df8f-9f7c-e01c-3d5126e4a972.png)

## Notionのembed用URLを生成

Notionには[Embeds](https://www.notion.so/Embeds-6b7133323590447b9d8e963c136ebce5)というオンラインコンテンツを埋め込める機能があります。この機能を使うために先ほどのiflameコードを埋め込めるURLに変換します。

変換にはこの[DIY Embed URL](https://apption.co/embeds/new)を使います。
「HTML Code」にiflameコードを貼り付けて「Generate URL」してください。

urlが`https://apption.co/embeds/******`のように表示されるのでメモしてください。


## Notionに貼り付ける
Notionの図を貼り付けたいページを開いてください。貼り付けたい場所で`/embded`を入力します。

![スクリーンショット 2020-12-31 2.22.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/60b9f17d-04b8-022d-b49e-90a36f8a7851.png)

linkの貼り付け画面が表示されるので先ほどの[DIY Embed URL](https://apption.co/embeds/new)で生成したurlを貼り付けます。

![スクリーンショット 2020-12-31 2.22.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/fb66d0ae-afdb-acfb-b686-8630f50ebe1c.png)

図が表示されます。

![スクリーンショット 2020-12-31 2.34.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/1b05fafe-4fff-3ba7-d131-05bbba19da8e.png)

### 貼り付けたけどうまく表示されない時
diagrams.netでiflameではなくhtml形式での出力を試してみてください。それ以外の手順はほぼ同じになります。iflameの文字数が長くなってくると?うまくいかない時がある気がします。

## Notionに貼り付けた図を後から編集する

先ほどの図の右上のOriginalをクリックします。

![スクリーンショット 2020-12-31 2.34.43のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/43b890ae-ef38-8dd9-29b3-1889c8dbb7aa.png)

ブラウザで図が表示されます。ブラウザに表示された図の下部にマウスカーソルを持っていくとアイコンがいくつか表示されます。鉛筆マークをクリックしてください。

![スクリーンショット 2020-12-31 2.39.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/b702d10c-0f73-e12a-d116-71d829e49ae3.png)

diagrams.netが表示され、図の編集画面になっているはずです。

![スクリーンショット 2020-12-31 2.42.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86684/c28cc78d-22c7-c904-f8e9-371d15324672.png)

後は同様の手順でiflame生成→embed用URLを生成→Notionに貼り付けを行なってください。
※ 編集しただけではNotionには保存されません。

# まとめ

Notionで編集可能な図を表示するためにdiagrams.netを利用する方法を紹介しました。実はdiagrams.netの[ブログ](https://www.diagrams.net/blog/embed-diagrams-notion)でNotion用のembded urlを生成できるような機能の追加が紹介されているので、近いうちにもう少し手順が短くなるかもしれません。