如何用图像替换美人鱼图，使其保持降价格式，以便在TFS / Azure DevOps Server中提供轻松的预览？

Question

我工作的公司决定以markdown格式存储需求，以实现简单性，参考能力并直接在TFS / Azure DevOps Server中进行预览。问题在TFS / Azure Dev Ops Server的预览部分中。如我所见，它支持：HTML标记，数学公式，图像大小调整，提及拉取请求，用户，工作项等。但是美人鱼图不支持，尽管它们对我来说非常有用，可以在最短的时间内获得对复杂过程的普遍理解。

我已经安装了pandoc，这是一个过程：为REPO中的每个更新的md文件自动生成HTML文件 问题是TFS / Azure DevOps Server将不接受pandoc在HMTL中内置的预览BASE64编码的图像。

所以我决定做这样的事情：

• 为每个更新的md文件创建带后缀（*** _ IMG.md）的副本
  • 每个美人鱼图
    • 生成PNG图片
    • 将PNG图片保存到图片文件夹
    • 替换链接到生成图像的美人鱼图
• 保存更改的md文件

请问是否可以列出实现此解决方案的软件列表？我没有找到应该使用哪种仪器的答案，我猜是python吗？但是可能还有其他选择吗？

Answer 1

比您想象的要容易。 TFS / Azure DevOps服务器Wiki is backed by a Git repository，因此您的过程可能类似于：

• git pull
• 扫描回购文件以查找美人鱼图
• 生成JPG并将代码段替换为指向图像的链接
• git commit
• git push

它可以在管道中轻松实现自动化，也许像Git Tools for Azure DevOps这样的扩展程序可以使工作变得更加简单。

Answer 2

将简单的UML包含到TFS / Azure Dev Ops Wiki中的另一种方法是yUML.me。

只需将一个 [ , { type: 'textfield', placeholderText: 'Enter your number', title: '*number', key: 'signedByNumber', inputType: 'numbers', inputValues: '553' } ] 标记添加到您的标记中，包括您的UML语法，例如。

<img>

这会将这样的图像添加到您的Wiki页面：

可以在这里找到许多示例： https://yuml.me/diagram/scruffy/class/samples

当然，这有一些限制，例如Uri的最大长度，但是我发现这对于小型UML非常有用，并且您可以在输入Uml语法时在预览选项卡中实时查看结果。

我尚未在AzureDevOps Server上进行过测试，但是在TFS 2018中，它像一种魅力。