README

(以前称为 MXGraph，这解释了此软件包名称的由来)。

将 diagrams.net / Draw.io 集成到 Neos 中作为节点类型，用于创建交互式图表和流程图

感谢 diagrams.net / Draw.io 的杰出人士 - 没有他们，这个项目将无法实现。

演示

功能

• 提供“图表”节点类型，其中包含图表的渲染表示和内部 XML 代码
• 您可以点击检查器按钮打开图形编辑器
• 保存时，图形数据直接存储在节点内部
• 保存图表时，Neos 会自动刷新
• (自 3.x 版本以来) 支持所有 diagrams.net 功能
• (自 3.x 版本以来) 可对 diagrams.net 编辑器进行自定义
• (自 3.x 版本以来，可选) 可以通过使用 embed.diagrams.net 启用自动更新
• (自 3.x 版本以来) 将图表渲染为嵌入的 SVG；因此，您例如可以点击链接
• (自 3.x 版本以来) 导入 .drawio、.svg、.png 文件

如何安装

• Neos 8.x: composer install sandstorm/mxgraph - 版本 3.x

然后，尽情享受吧 :-)

从 Sandstorm.MxGraph 2.x 升级到 3.x

在 Sandstorm.MxGraph >= 3.0 中，我们不将图表作为通过 <img> 标签嵌入的 SVG 图像进行渲染，而是直接在该位置嵌入 SVG。这有好处，例如，图表内的链接) 将按预期工作。

如果您从 2.x 升级到 3.x，此更改可能会破坏您的样式。要恢复旧行为，请设置以下 fusion 配置

prototype(Sandstorm.MxGraph:Diagram) {
    // BACKWARDS COMPATIBILITY: to get the old (2.x) behavior back, set to false.
    renderAsInlineSvg = false
}

您需要打开并保存使用版本 <= 2.X 创建的图表，以便将其作为内联 SVG 渲染，因为节点内部的存储格式已更改以启用此功能（并且这仅在保存时重写）。

自定义 Draw.io 配置

Diagrams.net / Draw.io 非常可自定义（自定义字体、颜色、预设等） - 许多配置选项在此处记录这里。这些配置选项可以通过 Settings.yaml 中的 Sandstorm.MxGraph.drawioConfiguration 设置，例如，以下设置将使用 Neos.io 的颜色和字体配置 draw.io

Sandstorm:
  MxGraph:
    # You can configure the diagram editor as explained here: https://www.diagrams.net/doc/faq/configure-diagram-editor
    # !! lots of options possible - see docs for details.
    drawioConfiguration:
      customFonts:
        - fontFamily: Work Sans
          fontUrl: https://fonts.googleapis.com/css?family=Work+Sans
      # Colour codes to be added before presetColors (no leading # for the colour codes, null for a blank entry)
      customPresetColors:
        - '26224C'
        - '00ADEE'
      # colorNames: Names for colors, eg. {‘FFFFFF’: ‘White’, ‘000000’: ‘Black’} that are used as tooltips (uppercase, no leading # for the colour codes).
      colorNames:
        26224C: Neos Dark Blue
        00ADEE: Neos Light Blue

      # Available colour schemes in the style section at the top of the format panel (use leading # for the colour codes).
      # Possible colour keys are fill, stroke, gradient and font (font is ignored for connectors). An optional title can
      # be added to be used as a tooltip. An optional border can be added to define the CSS for the border width and type,
      # eg. ‘2px solid’ or ‘3px dashed’ (only setting the border width is not valid, the border type must be included).
      customColorSchemes:
        # !! the 1st array level is the **page**, then come the entries.
        -
          - title: Neos Light Blue solid
            fill: '#00ADEE'
            stroke: white
            border: 1px solid
            font: white
          - title: Neos Dark Blue solid
            fill: '#26224C'
            stroke: white
            border: 1px solid
            font: white
          - title: Neos Light Blue border
            fill: '#ffffff'
            stroke: '#00ADEE'
            border: 2px solid
            font: '#00ADEE'

导入文件

在检查器中，有一个按钮可以导入 drawio 文件。这适用于

• .drawio 文件
• .drawio.png 文件（其中包含嵌入图表的 PNG 文件）
• .drawio.svg 文件（其中包含嵌入图表的 SVG 文件）

通过 URL 参数进一步自定义嵌入模式

直到版本 <= 2.x，我们已使用https://github.com/jgraph/mxgraph 作为基础。这已在 2020 年 11 月 9 日停止使用；并将代码合并到 https://github.com/jgraph/drawio/tree/dev/src/main/webapp。

对于版本 3，实现已完全重写；看起来像这样

┌────────────────────────────────────────┐
│                                        │
│   ┌────────────────────────────────┐   │
│   │       embed.diagrams.net       │   │
│   │       - Diagram Editor -       │   │
│   │                                │   │
│   └────────────────────────────────┘   │
│               outer shell              │
│ (communicates with diagrams.net in     │
│  iFrame, and with Neos)                │
└────────────────────────────────────────┘

我们遵循嵌入模式的文档。外部外壳将 diagrams.net 嵌入 iFrame 中，并通过 URL 参数进行初始通信，然后通过 postMessage API 进行通信。

我们使用以下 URL 参数

• embed=1: 启用嵌入模式，必需
• configure=1: 允许从外部注入 draw.io 配置，必需。
• proto=json: 基于 json 的现代 postMessage API，必需。

此外，以下默认设置的 URL 参数是可选的，但可以通过 Settings.yaml 中的键 Sandstorm.MxGraph.drawioEmbedParameters 禁用或覆盖

• ui=simple: 使用现代 UI 主题。其他主题在此列出
• lockdown=1: 确保不将数据传输到外部服务。查看此说明
• stealth=1: 禁用所有需要外部网络服务的功能（例如 PDF 导出）。
• test=1: 如果启用，则调试日志将打印到控制台。
• math=0: 禁用 MathML 支持。（MathML 在完全断开连接模式下被禁用；因为它会大大增加 Neos 包的大小）。

完全断开连接模式

通过在 iFrame 中使用 embed.diagrams.net，您将获得以下属性

优点:

• 自动更新到 diagrams.net 的新版本，因此您可以使用最新功能
• 集成路径由 diagrams.net 团队官方支持
• 如果需要，可以启用所有云功能（如 PDF 导出）。
• 可以使用所有功能。

缺点:

• 尽管图表数据没有离开您的本地计算机（对于几乎所有用例），但编辑器的 IP 地址仍然会被发送到 embed.diagrams.net。我们认为这构成了 GDPR 下的个人信息；因此，您需要征求编辑器的同意。

这就是为什么我们还实施了以下功能：完全断开连接模式：

在这里，整个 draw.io 应用程序已捆绑在这个 Neos 包中，没有任何外部调用。我们无法100%保证所有 Draw.io 功能都能正常工作，但到目前为止我们没有发现任何问题。

完全断开连接模式默认启用，通过设置 Sandstorm.MyGraph.drawioEmbedUrl=LOCAL

许可证

GPL v3

由 sandstorm|media 创建，2016-2023。