---

Diagrams.net 통합#

  [위키](/19.1/user/project/wiki/markdown/#diagramsnet-editor)에서 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 애플리케이션은 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 편집기 또는 Content Editor에서 diagrams.net 편집기를 시작할 수 있습니다. diagrams.net 편집기 통합은 이러한 편집기의 구현 세부 사항을 알지 못합니다. 대신, 편집기 구현 세부 사항과 diagrams.net 통합을 분리하는 파사드(façade) 역할을 하는 프로토콜 또는 인터페이스를 노출합니다.

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

diagrams.net 통합은 이러한 메서드를 호출하여 GitLab 애플리케이션에 다이어그램을 업로드하거나 Markdown 편집기에서 업로드된 리소스로 임베드된 다이어그램을 가져옵니다.