Diagrams.net 통합

위키에서 다이어그램을 만들기 위해 diagrams.net 편집기를 사용할 수 있습니다. diagrams.net 편집기는 GitLab 애플리케이션 및 인스턴스 관리자가 이 서비스를 가리키는 URL을 구성할 수 있습니다.

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

IFrame 샌드박스

GitLab 애플리케이션은 diagrams.net 편집기를 iframe 안에 내장합니다. IFrames는 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 애플리케이션이 다이어그램을 닫고 폐기합니다.
  • 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 편집기의 업로드된 자원으로서 포함된 다이어그램을 가져옵니다.