如何用图像替换美人鱼图，将它们保持为 markdown 格式以便在 TFS/Azure DevOps Server 中提供轻松预览？
How to replace mermaid diagrams with images, keeping them in markdown format to provide easy preview in TFS/Azure DevOps Server?
我所在的公司决定将需求存储为markdown格式，以实现简单、可参考、直接在TFS/Azure DevOps Server中预览。问题在 TFS/Azure Dev Ops Server 中的预览部分。正如我所发现的，它支持：HTML-标签、数学公式、调整图像大小、提及拉取请求、用户、工作项等等。但是不支持美人鱼图，尽管它们对我的头脑非常有用，可以在最短的时间内对复杂的过程达成共识。
我已经安装了 pandoc，这是一个过程：为 REPO 中每个更新的 md 文件自动生成 HTML 文件
问题是 TFS/Azure DevOps Server 不接受预览 BASE64 编码的图像，pandoc 内置在 HMTL 中。
所以我决定这样做：
- 为每个更新的 md 文件创建带有后缀的副本 (***_IMG.md)
- 对于每个美人鱼图
- 生成 PNG 图片
- 将 PNG 图像保存到图像文件夹
- 用link替换美人鱼图生成图片
- 保存修改过的md文件
能否指定一个软件列表来实现此解决方案？我还没有找到我应该使用什么仪器的答案，我想 python？但可能还有其他选择吗？
这比你想象的要容易。 TFS/Azure DevOps Server Wiki is backed by a Git repository，所以你的过程可能类似于：
git pull- 扫描 repo 文件以查找美人鱼图
- 生成 JPG 并将片段替换为 link 到图像
git commitgit push
它可以在流水线中轻松实现自动化，也许像 Git Tools for Azure DevOps 这样的扩展可以使工作变得更加简单。
将简单的 UML 包含到您的 TFS/Azure Dev Ops Wiki 的另一种方法是 yUML.me。
只需将 <img> 标签添加到您的 markdown 中，包括您的 UML 语法，例如。
<img src="http://yuml.me/diagram/scruffy/class/%2F%2F Cool Class Diagram, [Customer|-forname:string;surname:string|doShiz()]<>-orders*>[Order], [Order]++-0..*>[LineItem], [Order]-[note:Aggregate root{bg:wheat}].jpg">
这会将这样的图像添加到您的 Wiki 页面：
可以在此处找到许多示例：
https://yuml.me/diagram/scruffy/class/samples
当然，这有一些限制，例如 Uri 的最大长度，但我发现这对于小型 UML 非常有用，您可以在输入 Uml 语法时在预览选项卡中实时看到结果。
我尚未使用 AzureDevOps Server 对其进行测试，但在 TFS 2018 中，它的效果非常好。
您可以使用 CLI 版本，https://github.com/mermaid-js/mermaid-cli
使用 CLI，您可以从 .mmd 文件构建 .svg 或 .png 呈现。
（另请参阅实时编辑器 https://mermaid-js.github.io/mermaid-live-editor/，创建 .mmd 文件可能更容易）
我所在的公司决定将需求存储为markdown格式，以实现简单、可参考、直接在TFS/Azure DevOps Server中预览。问题在 TFS/Azure Dev Ops Server 中的预览部分。正如我所发现的，它支持：HTML-标签、数学公式、调整图像大小、提及拉取请求、用户、工作项等等。但是不支持美人鱼图，尽管它们对我的头脑非常有用，可以在最短的时间内对复杂的过程达成共识。
我已经安装了 pandoc，这是一个过程：为 REPO 中每个更新的 md 文件自动生成 HTML 文件 问题是 TFS/Azure DevOps Server 不接受预览 BASE64 编码的图像，pandoc 内置在 HMTL 中。
所以我决定这样做：
- 为每个更新的 md 文件创建带有后缀的副本 (***_IMG.md)
- 对于每个美人鱼图
- 生成 PNG 图片
- 将 PNG 图像保存到图像文件夹
- 用link替换美人鱼图生成图片
- 对于每个美人鱼图
- 保存修改过的md文件
能否指定一个软件列表来实现此解决方案？我还没有找到我应该使用什么仪器的答案，我想 python？但可能还有其他选择吗？
这比你想象的要容易。 TFS/Azure DevOps Server Wiki is backed by a Git repository，所以你的过程可能类似于：
git pull- 扫描 repo 文件以查找美人鱼图
- 生成 JPG 并将片段替换为 link 到图像
git commitgit push
它可以在流水线中轻松实现自动化，也许像 Git Tools for Azure DevOps 这样的扩展可以使工作变得更加简单。
将简单的 UML 包含到您的 TFS/Azure Dev Ops Wiki 的另一种方法是 yUML.me。
只需将 <img> 标签添加到您的 markdown 中，包括您的 UML 语法，例如。
<img src="http://yuml.me/diagram/scruffy/class/%2F%2F Cool Class Diagram, [Customer|-forname:string;surname:string|doShiz()]<>-orders*>[Order], [Order]++-0..*>[LineItem], [Order]-[note:Aggregate root{bg:wheat}].jpg">
这会将这样的图像添加到您的 Wiki 页面：
可以在此处找到许多示例： https://yuml.me/diagram/scruffy/class/samples
当然，这有一些限制，例如 Uri 的最大长度，但我发现这对于小型 UML 非常有用，您可以在输入 Uml 语法时在预览选项卡中实时看到结果。
我尚未使用 AzureDevOps Server 对其进行测试，但在 TFS 2018 中，它的效果非常好。
您可以使用 CLI 版本，https://github.com/mermaid-js/mermaid-cli 使用 CLI，您可以从 .mmd 文件构建 .svg 或 .png 呈现。 （另请参阅实时编辑器 https://mermaid-js.github.io/mermaid-live-editor/，创建 .mmd 文件可能更容易）