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를 사용하여 통신합니다.

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 편집기나 콘텐츠 편집기에서 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 애플리케이션에 업로드하거나 마크다운 편집기에 업로드된 리소스로서 포함된 다이어그램을 얻을 수 있습니다.