Notion은 메모뿐만 아니라 칸반적인 작업 관리 등도 할 수있는 좋은 느낌의 도구입니다. 매우 편리합니다만 그림을 작성해 붙이는 것 같은 기능이 지금의 없는 것 같기 때문에 그것을 diagrams.net를 사용해 보완해 보고 싶습니다. 또, 이 기사의 공개 시점에서는 아직과 같습니다만, diagrams.net 쪽이 Notion에 대응하는 것 같고, 여기서 소개하는 것보다 순서가 적어질지도 모르기 때문에, 먼저 이 기사의 정리를 본 것이 좋을지도 모릅니다.

Notion에 편집할 수 있는 그림 붙여넣기

Notion 위에 그림(Network 그림이나 UML 그림 등)을 표시시켜 나중에 편집할 수 있도록 하고 싶습니다.
절차는 다음과 같습니다.

diagrams.net으로 그림 만들기

Notion의 임베디드 URL 생성

Notion에 붙여 넣기

나중에 붙여 넣은 그림을 나중에 편집합니다.

diagrams.net으로 다이어그램 만들기

ぢあgらMS. 뿌리 t (이전에는 Draw.io라는 이름이었다)는 그림의 작성·이미지의 캡처·텍스트 임베딩 등을 할 수 있어 다양한 형식으로 출력할 수 있는 Web 서비스·또는 데스크탑 앱입니다. 유저 등록 불필요하고 무료이므로 Web 서비스로 충분하다고 생각합니다.

이번에는 diagrams.net을 사용하여 먼저 다이어그램을 만듭니다. 「Save diagrams to」라고 최초로 나올지도 모릅니다만, 이번에 한정해서 말하면 보존하지 않기 때문에 「Decide later」를 선택으로 괜찮습니다.

diagrams.net의 사용법은 생략합니다. diagrams.net에서 다이어그램을 만든 후 File > Embded > IFrame을 클릭하십시오.


Create를 클릭



iflame 코드가 표시되므로 Copy를 클릭하여 복사한 iflame 코드를 어딘가에 적어 두십시오.

Notion의 임베디드 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을 생성할 수 있는 기능의 추가가 소개되어 있으므로, 조만간 좀 더 절차가 짧아질지도 모릅니다.