嵌入图表
将交互式 Archyl 图表嵌入到您的文档平台、Wiki 和协作工具中。
支持的平台
Archyl 支持嵌入到流行的协作工具中：
| 平台 | 方法 | 交互性 |
|---|---|---|
| Confluence | Iframe 宏 | 完整 |
| Notion | /embed 命令 | 完整 |
| Miro | 嵌入应用 | 完整 |
| SharePoint | 嵌入 Web 部件 | 完整 |
| PowerPoint | Web Viewer 加载项 | 有限 |
| 任何网站 | iframe 代码 | 完整 |
创建嵌入
步骤 1：创建共享链接
- 打开您的项目
- 在工具栏中点击 分享
- 点击 创建新共享链接
- 配置选项：
- 名称（例如"Confluence 嵌入"）
- 过期时间（可选）
- 复制生成的链接
步骤 2：获取嵌入代码
- 在共享对话框中，点击 嵌入 选项卡
- 选择目标平台
- 复制提供的代码
特定平台说明
Confluence
使用 Iframe 宏：
- 编辑您的 Confluence 页面
- 插入 iframe 或 HTML 宏
- 粘贴嵌入代码：
<iframe
src="https://app.archyl.com/embed/{shareToken}"
width="100%"
height="600"
frameborder="0"
></iframe>
使用 Widget Connector：
- 插入 Widget Connector 宏
- 直接粘贴共享 URL
- 调整宽度和高度
Notion
- 在 Notion 页面上，输入
/embed - 选择 Embed
- 粘贴您的共享 URL
- 点击 嵌入链接
- 根据需要调整嵌入大小
Miro
- 打开您的 Miro 看板
- 点击 应用 图标
- 搜索 Embed 或 iFrame
- 将应用添加到看板
- 粘贴共享 URL
- 定位和调整大小
SharePoint
- 编辑您的 SharePoint 页面
- 添加 嵌入 Web 部件
- 粘贴嵌入代码
- 保存页面
PowerPoint
- 安装 Web Viewer 加载项
- 在幻灯片上插入加载项
- 输入共享 URL
- 注意：幻灯片放映模式下交互性有限
通用网站
将此 HTML 添加到任何网页：
<iframe
src="https://app.archyl.com/embed/{shareToken}"
width="100%"
height="600"
style="border: none; border-radius: 8px;"
allowfullscreen
></iframe>
嵌入视图功能
嵌入视图提供：
精简头部
- 项目名称
- 当前 C4 层级
- 面包屑导航
- Powered by Archyl 标识
完整交互性
- 平移和缩放图表
- 双击深入
- 浏览所有 C4 层级
- 查看元素详情
响应式布局
- 适应任何容器大小
- 在窄侧边栏中工作
- 在移动设备上缩放
- 简洁、无干扰的设计
自定义选项
尺寸
在嵌入代码中调整宽度和高度：
<iframe
src="..."
width="800"
height="600"
></iframe>
或使用百分比：
<iframe
src="..."
width="100%"
height="80vh"
></iframe>
初始视图
追加参数以控制初始视图：
?level=container # 从容器层级开始
?level=component # 从组件层级开始
样式
为容器添加自定义样式：
<div style="border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
<iframe src="..." width="100%" height="600" frameborder="0"></iframe>
</div>
最佳实践
保持链接更新
- 架构变更时更新共享链接
- 设置合理的过期日期
- 为不同上下文创建单独的链接
为查看者优化
- 为您的受众选择适当的 C4 层级开始
- 高管摘要：系统上下文
- 技术概览：容器
- 实现细节：组件
为嵌入添加说明
在嵌入的图表周围添加上下文：
- 简要描述展示的内容
- 图表最后更新时间
- 编辑者可访问完整 Archyl 项目的链接
处理过期链接
如果共享链接过期：
- 创建新的共享链接
- 更新嵌入代码
- 必要时通知相关人员
故障排除
嵌入未加载
- 检查共享链接是否已过期
- 验证 URL 是否正确
- 检查内容安全策略限制
- 尝试在无痕窗口中打开
交互性问题
- 某些平台限制 iframe 交互
- PowerPoint 在演示期间支持有限
- 检查特定平台的限制
尺寸问题
- 使用视口单位（
vh、vw）实现响应式尺寸 - 设置最小高度（建议 500px）
- 在不同屏幕尺寸上测试