위키에서는 diagrams.net 편집기로 다이어그램을 만들 수 있습니다. diagrams.net 편집기는 GitLab 애플리케이션 외부의 별도 웹 서비스로 실행되며, 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 application: message('configure')
    GitLab application-->>Diagrams.net: action('configure', config)

GitLab 애플리케이션은 직렬화된 JavaScript 객체가 담긴 메시지를 Diagrams.net 편집기로부터 받습니다. 이 객체의 형태는 다음과 같습니다.

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 편집기나 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 편집기에 업로드된 리소스로 임베드된 다이어그램을 가져옵니다.