Diagrams.net 통합

위키에서 diagrams.net 편집기를 사용하여 다이어그램을 생성할 수 있습니다.
diagrams.net 편집기는 GitLab 애플리케이션 외부의 별도 웹 서비스로 실행되며, GitLab 인스턴스 관리자는 이 서비스에 대한 URL을
구성할 수 있습니다.

이 페이지에서는 프론트엔드에서 이 통합의 주요 구현 측면을 설명합니다. diagrams.net 통합 구현은
drawio_editor.js
파일의 GitLab 리포지토리에 있습니다.

IFrame 샌드박스

GitLab 애플리케이션은 diagrams.net 편집기를 iframe 내에 포함합니다.
IFrame은 diagrams.net 편집기가 GitLab 애플리케이션의 브라우징 컨텍스트에 접근하는 것을 허용하지 않는 샌드박스 환경을 생성하여
사용자 데이터 보호 및 보안을 강화합니다.

diagrams.net과 GitLab 애플리케이션은 postMessage API를 사용하여
통신합니다.

sequenceDiagram Diagrams.net->>+GitLab application: message('configure') GitLab application-->>Diagrams.net: action('configure', config)

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 애플리케이션이 다이어그램 편집기를 닫고 처리합니다.
  • prompt: 이 이벤트에는 다이어그램 파일 이름을 가진 value 속성이 있습니다.
    value 속성이 빈 값인 경우, GitLab 애플리케이션은 사용자에게 파일 이름을 입력하라는 prompt 요청을 전송해야 합니다.
  • export: 이 이벤트에는 사용자가 생성한 다이어그램을 SVG 형식으로 포함하는 data 속성이 있습니다.

Markdown 편집기 통합

사용자는 Markdown Editor 또는 Content Editor에서 diagrams.net 편집기를 시작할 수 있습니다.
diagrams.net 편집기 통합은 이러한 편집기에 대한 구현 세부정보를 알지 못합니다.
대신, 편집기 구현 세부정보와 diagrams.net 통합을 분리하는 역할을 하는 프로토콜 또는 인터페이스를 제공합니다.

classDiagram DiagramsnetIntegration ..> EditorFacade EditorFacade <|-- ContentEditorFacade EditorFacade <|-- MarkdownEditorFacade ContentEditorFacade ..> ContentEditor MarkdownEditorFacade ..> MarkdownEditor class EditorFacade { <<Interface>> +uploadDiagram(filename, diagramSvg) +insertDiagram(uploadResults) +updateDiagram(diagramMarkdown, uploadResults) +getDiagram() }

diagrams.net 통합은 이 메서드를 호출하여 다이어그램을 GitLab 애플리케이션에 업로드하거나 Markdown Editor에 업로드된 리소스로
포함된 다이어그램을 가져옵니다.