インタラクティブな Archyl ダイアグラムを Confluence、Notion、Miro などのプラットフォームに埋め込む

ダイアグラムの埋め込み

インタラクティブな 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 を推奨）
異なる画面サイズでテストする

次のステップ

共有 - 共有リンクの作成と管理
エクスポート - 静的画像のエクスポート
ユーザーフロー - フロービジュアライゼーションの埋め込み

ダイアグラムの埋め込み - Archyl Docs