├── .prettierrc
├── images
    ├── 6-popup.png
    ├── 7-result.png
    ├── the-bad.png
    ├── screenshot.png
    ├── 1-export-url.png
    └── Drawio_Notion.png
├── LICENSE.txt
├── README.md
└── index.html


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "tabWidth": 2,
3 |   "useTabs": false
4 | }
5 | 


--------------------------------------------------------------------------------
/images/6-popup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivankahl/drawio-notion-embed/HEAD/images/6-popup.png


--------------------------------------------------------------------------------
/images/7-result.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivankahl/drawio-notion-embed/HEAD/images/7-result.png


--------------------------------------------------------------------------------
/images/the-bad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivankahl/drawio-notion-embed/HEAD/images/the-bad.png


--------------------------------------------------------------------------------
/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivankahl/drawio-notion-embed/HEAD/images/screenshot.png


--------------------------------------------------------------------------------
/images/1-export-url.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivankahl/drawio-notion-embed/HEAD/images/1-export-url.png


--------------------------------------------------------------------------------
/images/Drawio_Notion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivankahl/drawio-notion-embed/HEAD/images/Drawio_Notion.png


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) [year] [fullname]
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <!--
  2 | *** Thanks for checking out this README Template. If you have a suggestion that would
  3 | *** make this better, please fork the repo and create a pull request or simply open
  4 | *** an issue with the tag "enhancement".
  5 | *** Thanks again! Now go create something AMAZING! :D
  6 | -->
  7 | 
  8 | <!-- PROJECT LOGO -->
  9 | <br />
 10 | <p align="center">
 11 |   <a href="https://github.com/ivankahl/drawio-notion-embed">
 12 |     <img src="images/Drawio_Notion.png" alt="Logo" width="100" height="100">
 13 |   </a>
 14 | 
 15 |   <h3 align="center">draw.io Notion Embed</h3>
 16 | 
 17 |   <p align="center">
 18 |     A super simple project that lets you embed draw.io diagrams directly into Notion.
 19 |     <br />
 20 |     <br />
 21 |     <a href="https://drawio-notion-embed.netlify.app/">View Demo</a>
 22 |     ·
 23 |     <a href="https://github.com/ivankahl/drawio-notion-embed/issues">Report Bug</a>
 24 |     ·
 25 |     <a href="https://github.com/ivankahl/drawio-notion-embed/issues">Request Feature</a>
 26 |   </p>
 27 | </p>
 28 | 
 29 | <!-- TABLE OF CONTENTS -->
 30 | 
 31 | ## Table of Contents
 32 | 
 33 | - [About the Project](#about-the-project)
 34 |   - [Built With](#built-with)
 35 | - [Getting Started](#getting-started)
 36 | - [Usage](#usage)
 37 | - [Contributing](#contributing)
 38 | - [License](#license)
 39 | - [Contact](#contact)
 40 | 
 41 | <!-- ABOUT THE PROJECT -->
 42 | 
 43 | ## About The Project
 44 | 
 45 | [![draw.io Notion Embed](images/screenshot.png)](https://drawio-notion-embed.netlify.app/)
 46 | 
 47 | 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.
 48 | 
 49 | ![This is probably the error you see in Notion](images/the-bad.png)
 50 | 
 51 | 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.
 52 | 
 53 | 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!
 54 | 
 55 | ### Built With
 56 | 
 57 | 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:
 58 | 
 59 | - HTML: uhm... Inspect Element to learn more?
 60 | - CSS: again... Inspect Element...
 61 | - [Vanilla JS](http://vanilla-js.com/)
 62 | 
 63 | <!-- GETTING STARTED -->
 64 | 
 65 | ## Getting Started
 66 | 
 67 | 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.
 68 | 
 69 | If you want to deploy to Netlify, you can simply click the button below:
 70 | 
 71 | <a href="https://app.netlify.com/start/deploy?repository=https://github.com/ivankahl/drawio-notion-embed">
 72 |   <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify">
 73 | </a>
 74 | 
 75 | ## Usage
 76 | 
 77 | 1. In draw.io, go to **File -> Export as -> URL...**
 78 |    
 79 |    ![Export the diagram to URL in draw.io](images/1-export-url.png)
 80 | 2. Copy the URL that is displayed.
 81 | 3. Navigate to [https://drawio-notion-embed.netlify.app/](https://drawio-notion-embed.netlify.app/) (or your own URL)
 82 | 4. Paste the URL that you copied from draw.io into the text box and click **Go**
 83 | 5. A link will be displayed below that you can copy
 84 | 6. In Notion, paste the link and in the popup, click _Create embed_
 85 |    
 86 |    ![The popup](images/6-popup.png)
 87 | 7. You should see the diagram embedded in Notion now
 88 |    
 89 |    ![The final result](images/7-result.png)
 90 | 
 91 | <!-- CONTRIBUTING -->
 92 | 
 93 | ## Contributing
 94 | 
 95 | If you have any contributions you would like to make it would be **greatly appreciated**.
 96 | 
 97 | 1. Fork the Project
 98 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
 99 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
100 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
101 | 5. Open a Pull Request
102 | 
103 | <!-- LICENSE -->
104 | 
105 | ## License
106 | 
107 | Distributed under the MIT License. See `LICENSE.txt` for more information.
108 | 
109 | <!-- CONTACT -->
110 | 
111 | ## Contact
112 | 
113 | Ivan Kahl - hello@ivankahl.com
114 | 
115 | Project Link: [https://github.com/ivankahl/drawio-notion-embed](https://github.com/ivankahl/drawio-notion-embed)
116 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Embed draw.io in Notion</title>
  7 | 
  8 |     <style>
  9 |       html {
 10 |         font-family: Arial, Helvetica, sans-serif;
 11 |       }
 12 | 
 13 |       .form-container {
 14 |         display: flex;
 15 |         align-items: center;
 16 |         justify-content: center;
 17 |       }
 18 | 
 19 |       .container {
 20 |         position: fixed;
 21 |         top: 0;
 22 |         left: 0;
 23 |         right: 0;
 24 |         bottom: 0;
 25 |       }
 26 | 
 27 |       #form {
 28 |         display: flex;
 29 |         flex-direction: column;
 30 |         gap: 20px;
 31 |         align-items: center;
 32 |       }
 33 | 
 34 |       #draw-iframe {
 35 |         width: 100%;
 36 |         height: 100%;
 37 |         border: 0;
 38 |       }
 39 | 
 40 |       input[type="submit"] {
 41 |         user-select: none;
 42 |         transition: background 20ms ease-in 0s;
 43 |         cursor: pointer;
 44 |         display: inline-flex;
 45 |         align-items: center;
 46 |         justify-content: center;
 47 |         white-space: nowrap;
 48 |         height: 36px;
 49 |         border-radius: 3px;
 50 |         color: white;
 51 |         font-size: 14px;
 52 |         line-height: 1;
 53 |         padding-left: 12px;
 54 |         padding-right: 12px;
 55 |         font-weight: 500;
 56 |         background: rgb(225, 98, 89) none repeat scroll 0% 0%;
 57 |         border: 1px solid rgb(190, 86, 67);
 58 |         box-shadow: rgba(15, 15, 15, 0.1) 0px 1px 2px;
 59 |         text-align: center;
 60 |         width: 90px;
 61 |       }
 62 | 
 63 |       input[type="url"],
 64 |       input[type="text"] {
 65 |         font-size: inherit;
 66 |         line-height: inherit;
 67 |         border: medium none;
 68 |         background: rgba(0, 0, 0, 0)
 69 |           url("data:image/svg+xml;base64,PHN2ZyBvcGFjaXR5PSIuNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTAgNTAiPjxwYXRoIGQ9Ik0zOCA1MEgxMkM1LjQgNTAgMCA0NC42IDAgMzhWMTJDMCA1LjQgNS40IDAgMTIgMGgyNmM2LjYgMCAxMiA1LjQgMTIgMTJ2MjZjMCA2LjYtNS40IDEyLTEyIDEyeiIgZmlsbD0iIzNkMzY0ZiIvPjxwYXRoIGQ9Ik0zMi40IDM1LjdjLTEuMi44LTMuMiAxLjQtNS4xIDEuNC00LjEgMC02LjYtMS42LTYuNi01LjhWMjNoLTMuMXYtNC40aDMuMXYtNGw2LjEtMS43djUuN2g1LjRWMjNoLTUuNHY3LjJjMCAxLjcuOSAyLjQgMi40IDIuNCAxLjEgMCAxLjktLjMgMi42LS44bC42IDMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=")
 70 |           no-repeat scroll 97% center / 16px;
 71 |         width: 300px;
 72 |         display: inline-block;
 73 |         resize: none;
 74 |         padding: 0px;
 75 |         cursor: auto;
 76 |         box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset,
 77 |           rgba(15, 15, 15, 0.1) 0px 1px 1px inset;
 78 |         font-size: 15px;
 79 |         line-height: 26px;
 80 |         padding: 4px 10px;
 81 |         outline: none;
 82 |         color: rgb(4, 4, 4);
 83 |         border-radius: 3px;
 84 |       }
 85 | 
 86 |       .hide {
 87 |         display: none !important;
 88 |       }
 89 | 
 90 |       .disclaimer {
 91 |         color: #bbb;
 92 |         font-size: 0.8em;
 93 |         text-align: center;
 94 |         line-height: 1.5;
 95 |       }
 96 | 
 97 |       .disclaimer a {
 98 |           color: #bbb;
 99 |       }
100 |     </style>
101 |   </head>
102 |   <body>
103 |     <div class="container form-container">
104 |       <div id="form">
105 |         <div id="form-entry">
106 |           <input
107 |             type="url"
108 |             placeholder="draw.io Embed URL"
109 |             id="embedUrl"
110 |             name="embedUrl"
111 |           />
112 |           <input type="submit" value="Go" onclick="onGoClick()" />
113 |         </div>
114 |         <div id="form-result" class="hide">
115 |           <span>Embed this URL in Notion:</span>
116 |           <input type="url" readonly id="finalUrl" name="finalUrl" />
117 |           <input type="submit" value="Copy" onclick="onCopyClick()" />
118 |         </div>
119 |         <p class="disclaimer">
120 |           This website is in no way affiliated with Notion or draw.io<br/><a href="https://github.com/ivankahl/drawio-notion-embed" target="_blank">GitHub</a> &bullet; <a href="https://ivankahl.com/" target="_blank">Ivan Kahl</a>
121 |         </p>
122 |       </div>
123 |       <iframe id="draw-iframe" class="hide" src=""></iframe>
124 |     </div>
125 | 
126 |     <script>
127 |       // From https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
128 |       function getParameterByName(name, url) {
129 |         if (!url) url = window.location.href;
130 |         name = name.replace(/[\[\]]/g, "\\$&");
131 |         var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
132 |           results = regex.exec(url);
133 |         if (!results) return null;
134 |         if (!results[2]) return "";
135 |         return decodeURIComponent(results[2].replace(/\+/g, " "));
136 |       }
137 | 
138 |       // From https://stackoverflow.com/questions/23425909/javascript-jquery-get-root-url-of-website
139 |       function getBaseUrl() {
140 |         return window.location.href.match(/^.*\//);
141 |       }
142 | 
143 |       function copy(elementId) {
144 |         /* Get the text field */
145 |         var copyText = document.getElementById(elementId);
146 | 
147 |         /* Select the text field */
148 |         copyText.select();
149 |         copyText.setSelectionRange(0, 99999); /*For mobile devices*/
150 | 
151 |         /* Copy the text inside the text field */
152 |         document.execCommand("copy");
153 | 
154 |         /* Alert the copied text */
155 |         alert("Copied the text: " + copyText.value);
156 |       }
157 | 
158 |       const url = getParameterByName("u");
159 |       if (url) {
160 |         document.querySelector(".container").classList.remove("form-container");
161 |         document.getElementById("form").classList.add("hide");
162 | 
163 |         const iframe = document.getElementById("draw-iframe");
164 |         iframe.setAttribute("src", url);
165 |         iframe.classList.remove("hide");
166 |       }
167 | 
168 |       function onGoClick() {
169 |         const url = document.getElementById("embedUrl").value;
170 | 
171 |         let finalUrl = getBaseUrl() + "?u=" + encodeURIComponent(url);
172 |         document.getElementById("finalUrl").value = finalUrl;
173 | 
174 |         document.getElementById("form-result").classList.remove("hide");
175 |       }
176 | 
177 |       function onCopyClick() {
178 |         copy("finalUrl");
179 |       }
180 |     </script>
181 |   </body>
182 | </html>
183 | 


--------------------------------------------------------------------------------