Diagrams.net 통합

위키에서는 diagrams.net 편집기를 사용하여 다이어그램을 만들 수 있습니다. diagrams.net 편집기는 GitLab 애플리케이션 및 인스턴스 관리자가 이 서비스를 가리키는 URL을 구성할 수 있도록 별도의 웹 서비스로 실행됩니다.

본 페이지는 프론트엔드에서의 이 통합의 주요 구현 측면을 설명합니다. diagrams.net 통합 구현은 GitLab 저장소의 drawio_editor.js 파일에 위치하고 있습니다.

IFrame 샌드박스

GitLab 애플리케이션은 diagrams.net 편집기를 iframe 내에 포함시킵니다. iframe은 diagrams.net 편집기가 GitLab 애플리케이션의 브라우징 컨텍스트에 액세스하지 못하도록하여 사용자 데이터를 보호하고 보안을 강화하는 샌드박스 환경을 만듭니다.

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

sequenceDiagram Diagrams.net->>+GitLab 애플리케이션: message('configure') GitLab 애플리케이션-->>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 애플리케이션이 diagrams.net 편집기를 닫고 폐기합니다.
  • prompt: 이 이벤트에는 다이어그램의 파일 이름이 포함된 value 속성이 있습니다. value 속성이 빈 값이면 GitLab 애플리케이션은 사용자에게 파일 이름을 입력하도록 하는 prompt를 보내야 합니다.
  • export: 이 이벤트에는 사용자가 SVG 형식으로 생성한 다이어그램이 포함된 data 속성이 있습니다.

Markdown 편집기 통합

사용자는 Markdown 편집기나 콘텐츠 편집기에서 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 편집기에 업로드된 리소스로서 얻습니다.