通过在markdown中的引用嵌入图表（例如draw.io原理图作为xml文件）

Posted 2023-02-24

【中文标题】通过在markdown中的引用嵌入图表（例如draw.io原理图作为xml文件）

【英文标题】：Embed diagrams (e.g. draw.io schematics as xml files) by reference in markdown

【发布时间】：2021-04-22 06:04:52

【问题描述】：

在我的工作流程中，我同时使用 git（私人服务器上的 GitLab）和 draw.io（或 diagrams.net，因为它已被重命名）。 我想知道开始版本控制图和代码并将它们嵌入到 Markdown 文档中的最佳方式是什么。

我看到可以通过将单个图表导出为未压缩的 xml 来对其进行版本控制。现在，理想情况下，我想要的是这样的流程：

在原生应用上编辑图表 导出为xml的版本图 通过引用嵌入.md docs

换句话说，我希望没有 jpeg/png 版本的图表，但仍然在 markdown 中呈现它。这甚至可能吗？

我找到了这个支持页面Embed a diagram in GitHub markdown，但它似乎不是我想要的：

打开嵌入式编辑器 我认为它不适用于私人 gitlab 服务器？

任何建议（甚至涉及不同的工具）都将不胜感激。

【参考方案1】：

我在独立于互联网的自托管场景中使用带有 gitlab / markdown 的 draw.io 图表。我同时使用 Ubuntu snap 应用和 docker 镜像。

如果您将 draw.io 图表保存为“可编辑的 svgs”（我喜欢使用扩展名 .drawio.svg 以使其更明显），那么它会将任何所需的元数据保存在 svg 文件中。

这意味着图像尺寸最小，如果需要，CI 管道仍然可以将文件转换为 png。而且svg可以直接包含在markdown中，不用每次都导出。

Gitlab 还可以让您“发现图像之间的差异”以进行合并请求。

工作流程： git checkout -> 在 draw.io 网站或应用程序中打开 *.drawio.svg 文件 -> 进行更改 -> 保存 -> 合并请求。

【讨论】：

我也使用 .drawio.svg 方法（在 Windows/WSL 上使用了很棒的 VSCode drawio extension），但发现合并不是最佳的。 svg 文件中的 drawio 元数据（mxfile）被压缩。实际的 svg 部分是人类可读/可合并的，但我发现一个小的更改几乎可以改变所有行，可能是因为它是从头开始自动生成的。

另见***.com/questions/66262620/…