drawio-notion-embed 项目下载及安装教程
1. 项目介绍
drawio-notion-embed 是一个超级简单的项目，旨在让你能够直接将 draw.io 图表嵌入到 Notion 中。由于 Notion 本身不支持直接嵌入 draw.io 图表，这个项目通过一个简单的 HTML 页面解决了这个问题。它允许你指定 draw.io 的嵌入 URL，并在一个全屏、响应式的 iFrame 中渲染图表，从而可以轻松地嵌入到 Notion 中。
2. 项目下载位置
你可以通过以下步骤下载 drawio-notion-embed 项目：
- 打开终端或命令行工具。
- 使用
git clone命令下载项目：
git clone https://github.com/ivankahl/drawio-notion-embed.git
- 进入项目目录：
cd drawio-notion-embed
3. 项目安装环境配置
3.1 环境要求
- 操作系统：Windows、macOS、Linux
- 浏览器：Chrome、Firefox、Safari 等现代浏览器
- 网络连接：需要稳定的网络连接以访问
draw.io和 Notion
3.2 环境配置示例
以下是一个简单的环境配置示例：
4. 项目安装方式
4.1 使用已部署版本
你可以直接使用已经部署在 Netlify 上的版本：
- 打开浏览器，访问
https://drawio-notion-embed.netlify.app/。 - 在
draw.io中，选择File -> Export as -> URL，复制生成的 URL。 - 将复制的 URL 粘贴到
drawio-notion-embed页面的输入框中，点击Go。 - 复制生成的链接，并在 Notion 中粘贴，点击
Create embed即可嵌入图表。
4.2 自行部署
如果你希望自行部署项目，可以按照以下步骤操作：
- 下载项目代码（如上所述）。
- 将项目中的
index.html文件上传到你的公共 Web 服务器。 - 访问你的服务器 URL，按照上述步骤操作即可。
5. 项目处理脚本
项目本身非常简单，没有复杂的处理脚本。核心功能由 index.html 文件中的 HTML、CSS 和 JavaScript 实现。以下是 index.html 文件的部分代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>draw.io Notion Embed</title>
<style>
/* 样式代码 */
</style>
</head>
<body>
<h1>draw.io Notion Embed</h1>
<input type="text" id="drawioUrl" placeholder="Enter draw.io URL">
<button onclick="embedDiagram()">Go</button>
<div id="embedContainer"></div>
<script>
function embedDiagram() {
const url = document.getElementById('drawioUrl').value;
const container = document.getElementById('embedContainer');
container.innerHTML = `<iframe src="${url}" width="100%" height="600px"></iframe>`;
}
</script>
</body>
</html>
通过上述步骤，你可以轻松地将 draw.io 图表嵌入到 Notion 中，并根据需要进行自定义部署。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
