Diagrams.net 集成

在 wikis 中，你可以使用 diagrams.net 编辑器来创建图表。diagrams.net 编辑器作为独立于 GitLab 应用程序和 GitLab 实例的 Web 服务运行，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 应用程序收到此消息时，它会发送一个 configure 操作来设置 diagrams.net 编辑器的颜色主题。
• 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 编辑器中已上传资源的嵌入图表。