drawio-notion-embed 项目安装和配置指南

drawio-notion-embed 项目安装和配置指南

drawio-notion-embed A super simple project that lets you embed draw.io diagrams directly into Notion. 项目地址: https://gitcode.com/gh_mirrors/dr/drawio-notion-embed

1. 项目基础介绍和主要编程语言

drawio-notion-embed 是一个超级简单的项目，旨在帮助用户将 draw.io 图表直接嵌入到 Notion 中。该项目的主要目的是解决在 Notion 中嵌入 draw.io 图表时遇到的问题，确保图表能够正确显示。

该项目的主要编程语言是 HTML，并且使用了少量的 CSS 和 JavaScript 来实现其功能。

2. 项目使用的关键技术和框架

drawio-notion-embed 项目没有使用任何复杂的框架或库，它完全基于纯 HTML、CSS 和 JavaScript 实现。这种设计使得项目非常轻量级，易于理解和修改。

• HTML: 用于构建网页的基本结构。
• CSS: 用于样式化网页，使其在 Notion 中嵌入时能够正确显示。
• JavaScript: 用于处理用户输入和动态生成嵌入链接。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装和配置之前，请确保你已经具备以下条件：

• 一个可以访问的 draw.io 图表的导出 URL。
• 一个可以托管 HTML 文件的公共网络服务器（例如 Netlify、GitHub Pages 等）。

详细安装步骤

步骤 1: 下载项目文件

首先，你需要从项目的 GitHub 仓库下载 index.html 文件。你可以通过以下方式获取文件：

1. 打开项目的 GitHub 仓库页面。
2. 找到 index.html 文件并点击它。
3. 点击页面右上角的“Raw”按钮，然后右键点击页面并选择“另存为”，将文件保存到你的本地计算机。

步骤 2: 部署项目

你可以选择将 index.html 文件部署到任何支持静态文件托管的服务上。以下是两种常见的部署方式：

方式 1: 使用 Netlify 部署

1. 注册并登录到 Netlify。
2. 点击“New site from Git”按钮。
3. 选择你的代码托管平台（如 GitHub）并授权访问。
4. 选择包含 index.html 文件的仓库。
5. 配置构建设置（通常不需要更改任何设置）。
6. 点击“Deploy site”按钮，等待部署完成。

方式 2: 使用本地服务器部署

1. 将 index.html 文件上传到你的公共网络服务器。
2. 确保文件可以通过 http:// 或 https:// 协议访问。

步骤 3: 配置和使用

1. 打开 draw.io，选择你要嵌入的图表，然后点击“File” -> “Export as” -> “URL”。
2. 复制生成的 URL。
3. 打开你部署的 index.html 页面（例如 https://your-deployed-url.com/index.html）。
4. 将复制的 draw.io URL 粘贴到页面上的文本框中，然后点击“Go”按钮。
5. 页面将生成一个嵌入链接，复制该链接。
6. 在 Notion 中，粘贴该链接并点击“Create embed”。

现在，你应该能够在 Notion 中看到嵌入的 draw.io 图表了。

总结

通过以上步骤，你可以轻松地将 draw.io 图表嵌入到 Notion 中。这个项目的设计非常简单，适合任何对前端开发有一定了解的用户。希望这个指南对你有所帮助！

drawio-notion-embed A super simple project that lets you embed draw.io diagrams directly into Notion. 项目地址: https://gitcode.com/gh_mirrors/dr/drawio-notion-embed