Confluence, Notion, Miro 및 기타 플랫폼에 인터랙티브 Archyl 다이어그램을 임베드하세요

다이어그램 임베드

인터랙티브 Archyl 다이어그램을 문서 플랫폼, 위키, 협업 도구에 임베드하세요.

지원되는 플랫폼

Archyl은 인기 있는 협업 도구에 임베드를 지원합니다:

플랫폼	방법	인터랙티브
Confluence	Iframe 매크로	전체
Notion	/embed 명령	전체
Miro	임베드 앱	전체
SharePoint	임베드 웹 파트	전체
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 페이지를 편집합니다
임베드 웹 파트를 추가합니다
임베드 코드를 붙여넣습니다
페이지를 저장합니다

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이 올바른지 확인
Content Security Policy 제한 확인
시크릿 창에서 시도

인터랙티브 문제

일부 플랫폼은 iframe 상호작용을 제한
PowerPoint는 프레젠테이션 중 제한적 지원
플랫폼별 제한 확인

크기 문제

반응형 크기를 위해 뷰포트 단위 (vh, vw) 사용
최소 높이 설정 (500px 권장)
다양한 화면 크기에서 테스트

다음 단계

공유 - 공유 링크 만들기 및 관리
내보내기 - 정적 이미지 내보내기
사용자 플로우 - 플로우 시각화 임베드

다이어그램 임베드 - Archyl Docs