Diagrams.net 통합
위키에서 diagrams.net 편집기를 사용하여 다이어그램을 만들 수 있습니다. diagrams.net 편집기는 GitLab 애플리케이션 밖에 있는 별도의 웹 서비스로 실행되며 GitLab 인스턴스 관리자는 이 서비스를 가리키는 URL을 구성할 수 있습니다.
이 페이지는 프론트엔드에서 이 통합의 주요 구현 측면을 설명합니다. diagrams.net 통합 구현은 GitLab 리포지터리의
drawio_editor.js
파일에 있습니다.
IFrame 샌드박스
GitLab 애플리케이션은 diagrams.net 편집기를 iframe 내에 임베드합니다. IFrames는 diagrams.net 편집기가 GitLab 애플리케이션의 브라우징 컨텍스트에 액세스하는 것을 막아 사용자 데이터를 보호하고 보안을 강화하는 샌드박스 환경을 생성합니다.
diagrams.net 및 GitLab 애플리케이션은 postMessage API를 사용하여 통신합니다.
GitLab 애플리케이션은 diagrams.net 편집기로부터 직렬화된 JavaScript 객체를 포함하는 메시지를 받습니다. 이 객체는 다음과 같은 형태를 가지고 있습니다:
type Message = {
event: string;
value?: string;
data?: string;
}
event
속성은 GitLab 애플리케이션이 메시지에 대해 어떻게 반응해야 하는지를 알려줍니다. diagrams.net 편집기가 다음 이벤트를 보냅니다:
-
configure
: GitLab 애플리케이션이 이 메시지를 받으면 diagrams.net 편집기의 색상 테마를 설정하기 위해configure
액션을 돌려보냅니다. -
init
: GitLab 애플리케이션이 이 메시지를 받으면load
액션을 사용하여 기존 다이어그램을 업로드할 수 있습니다. -
exit
: GitLab 애플리케이션이 diagrams.net 편집기를 닫고 폐기합니다. -
prompt
: 이 이벤트에는 다이어그램의 파일명이 있는value
속성이 있습니다. 만약value
속성이 빈 값이면, GitLab 애플리케이션은 사용자에게 파일명을 입력하도록 하는prompt
를 보내야 합니다. -
export
: 이 이벤트에는 사용자가 생성한 다이어그램을 SVG 형식으로 포함하는data
속성이 있습니다.
마크다운 편집기 통합
사용자는 Markdown 편집기나 콘텐츠 편집기에서 diagrams.net 편집기를 시작할 수 있습니다. diagrams.net 편집기 통합은 이러한 편집기의 구현 세부 정보를 알지 못합니다. 대신, 편집기의 구현 세부 정보를 diagrams.net 통합에서 분리하는 프로토콜 또는 인터페이스 역할을 하는 것을 노출합니다.
diagrams.net 통합은 이러한 메서드를 호출하여 다이어그램을 GitLab 애플리케이션에 업로드하거나 마크다운 편집기에 업로드된 리소스로서 포함된 다이어그램을 얻을 수 있습니다.