다이어그램 임베드

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

지원되는 플랫폼

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

플랫폼 방법 인터랙티브
Confluence Iframe 매크로 전체
Notion /embed 명령 전체
Miro 임베드 앱 전체
SharePoint 임베드 웹 파트 전체
PowerPoint Web Viewer 애드인 제한적
모든 웹사이트 iframe 코드 전체

임베드 만들기

1단계: 공유 링크 만들기

  1. 프로젝트를 엽니다
  2. 도구 모음에서 공유를 클릭합니다
  3. 새 공유 링크 만들기를 클릭합니다
  4. 옵션을 구성합니다:
    • 이름 (예: "Confluence 임베드")
    • 만료일 (선택사항)
  5. 생성된 링크를 복사합니다

2단계: 임베드 코드 가져오기

  1. 공유 대화 상자에서 임베드 탭을 클릭합니다
  2. 대상 플랫폼을 선택합니다
  3. 제공된 코드를 복사합니다

플랫폼별 지침

Confluence

Iframe 매크로 사용:

  1. Confluence 페이지를 편집합니다
  2. iframe 또는 HTML 매크로를 삽입합니다
  3. 임베드 코드를 붙여넣습니다:
<iframe
  src="https://app.archyl.com/embed/{shareToken}"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

Widget Connector 사용:

  1. Widget Connector 매크로를 삽입합니다
  2. 공유 URL을 직접 붙여넣습니다
  3. 너비와 높이를 조정합니다

Notion

  1. Notion 페이지에서 /embed를 입력합니다
  2. Embed를 선택합니다
  3. 공유 URL을 붙여넣습니다
  4. 링크 임베드를 클릭합니다
  5. 필요에 따라 임베드 크기를 조정합니다

Miro

  1. Miro 보드를 엽니다
  2. 앱 아이콘을 클릭합니다
  3. Embed 또는 iFrame을 검색합니다
  4. 보드에 앱을 추가합니다
  5. 공유 URL을 붙여넣습니다
  6. 위치와 크기를 조정합니다

SharePoint

  1. SharePoint 페이지를 편집합니다
  2. 임베드 웹 파트를 추가합니다
  3. 임베드 코드를 붙여넣습니다
  4. 페이지를 저장합니다

PowerPoint

  1. Web Viewer 애드인을 설치합니다
  2. 슬라이드에 애드인을 삽입합니다
  3. 공유 URL을 입력합니다
  4. 참고: 슬라이드 쇼 모드에서는 인터랙티브가 제한됩니다

일반 웹사이트

모든 웹 페이지에 다음 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 프로젝트 링크

만료된 링크 처리

공유 링크가 만료된 경우:

  1. 새 공유 링크를 만듭니다
  2. 임베드 코드를 업데이트합니다
  3. 필요한 경우 이해관계자에게 알립니다

문제 해결

임베드가 로드되지 않음

  • 공유 링크가 만료되지 않았는지 확인
  • URL이 올바른지 확인
  • Content Security Policy 제한 확인
  • 시크릿 창에서 시도

인터랙티브 문제

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

크기 문제

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

다음 단계