https://github.com/ivankahl/drawio-notion-embed

A super simple project that lets you embed draw.io diagrams directly into Notion.
https://github.com/ivankahl/drawio-notion-embed

drawio notion notion-editor

Last synced: 24 days ago
JSON representation

A super simple project that lets you embed draw.io diagrams directly into Notion.

• Host: GitHub
• URL: https://github.com/ivankahl/drawio-notion-embed
• Owner: ivankahl
• License: mit
• Created: 2020-09-16T16:04:36.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-09-29T15:46:49.000Z (about 2 years ago)
• Last Synced: 2024-09-29T19:02:56.863Z (about 1 month ago)
• Topics: drawio, notion, notion-editor
• Language: HTML
• Homepage: https://drawio-notion-embed.netlify.app/
• Size: 711 KB
• Stars: 173
• Watchers: 2
• Forks: 14
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        







  

    

  

  
draw.io Notion Embed


  


    A super simple project that lets you embed draw.io diagrams directly into Notion.

    


    


    View Demo

    ·

    Report Bug

    ·

    Request Feature

  


## Table of Contents

- [About the Project](#about-the-project)

  - [Built With](#built-with)

- [Getting Started](#getting-started)

- [Usage](#usage)

- [Contributing](#contributing)

- [License](#license)

- [Contact](#contact)

## About The Project

[![draw.io Notion Embed](images/screenshot.png)](https://drawio-notion-embed.netlify.app/)

Embedding draw.io diagrams inside Notion is a bit of pain because it doesn't work. If you have tried to embed a diagram in Notion, you will notice that it breaks.

![This is probably the error you see in Notion](images/the-bad.png)

This is quite frustrating when you are doing project planning or writing technical documentation in Notion and wish to link to your diagrams in Notion.

This very very simple HTML page fixes this. It allows you to specify your draw.io Embed URL and then it will render it in a fullscreen, responsive iFrame that can be embedded into Notion and look good!

### Built With

We don't need no heavy JS framework (not hating on them though). However, this project has been built with the purest forms of web technologies:

- HTML: uhm... Inspect Element to learn more?

- CSS: again... Inspect Element...

- [Vanilla JS](http://vanilla-js.com/)

## Getting Started

You can either use the already deployed version on Netlify ([https://drawio-notion-embed.netlify.app/](https://drawio-notion-embed.netlify.app/)) or if you really want to you can deploy it yourself. It's a single HTML file so just drop it on any public web server and you should be good to go.

If you want to deploy to Netlify, you can simply click the button below:



  



## Usage

1. In draw.io, go to **File -> Export as -> URL...**

   

   ![Export the diagram to URL in draw.io](images/1-export-url.png)

2. Copy the URL that is displayed.

3. Navigate to [https://drawio-notion-embed.netlify.app/](https://drawio-notion-embed.netlify.app/) (or your own URL)

4. Paste the URL that you copied from draw.io into the text box and click **Go**

5. A link will be displayed below that you can copy

6. In Notion, paste the link and in the popup, click _Create embed_

   

   ![The popup](images/6-popup.png)

7. You should see the diagram embedded in Notion now

   

   ![The final result](images/7-result.png)

## Contributing

If you have any contributions you would like to make it would be **greatly appreciated**.

1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

## License

Distributed under the MIT License. See `LICENSE.txt` for more information.

## Contact

Ivan Kahl - [email protected]

Project Link: [https://github.com/ivankahl/drawio-notion-embed](https://github.com/ivankahl/drawio-notion-embed)