在Azure DevOps中使用Mermaid绘制Azure图标和方框

44次阅读

问题描述

希望在Azure DevOps的Wiki部分使用Mermaid图表。他已经编写了一个Mermaid图表，并在mermaid.live上进行了验证。但是，在包含box块的情况下，图表在Azure DevOps的Wiki中无法正确渲染。用户想知道这是否是版本问题，如果是的话，是否有方法将Mermaid更新到最新版本。此外，用户还想知道是否可以在这些图表中使用Azure架构图标。

解决方案

在解决方案步骤开始前，请确保已经备份重要数据，以免操作造成数据丢失。

使用Mermaid语法注意事项

首先，需要注意Azure DevOps对Mermaid语法的支持有一些限制。根据官方文档，并不是所有的Mermaid语法在Azure DevOps中都受支持。例如，不支持大多数HTML标签、Font Awesome、流程图语法（使用graph代替）、以及LongArrow等。在使用Mermaid语法时，请注意避免使用这些在Azure DevOps中不支持的语法。

版本问题和更新Mermaid

关于版本问题，Azure DevOps支持的Mermaid版本可能会影响图表的渲染。如果发现在Azure DevOps中使用box块无法渲染，可以尝试以下方法更新Mermaid到最新版本：

查看Mermaid官方文档： 访问Mermaid官方文档，查找有关如何更新Mermaid的信息。文档中可能提供了更新Mermaid的步骤和方法。
在Azure DevOps中使用CDN链接： 如果Azure DevOps支持在Wiki中直接使用CDN链接引入Mermaid库，你可以尝试使用最新版本的Mermaid库。通常，Mermaid的CDN链接类似于：
“`markdown

“`

请注意，更新Mermaid可能会涉及一些风险，因此在操作前请确保备份相关数据。

使用Azure架构图标

在Mermaid图表中使用Azure架构图标是可行的。你可以通过将Azure架构图标的URL添加到Mermaid代码中来实现。以下是一个示例：

graph TD
  A[Container A] --> B[Container B]
  style A fill:#azure,stroke:#333,stroke-width:2px,stroke-dasharray: 5, 5
  style B fill:#azure,stroke:#333,stroke-width:2px,stroke-dasharray: 5, 5
  classDef azure fill:#00ADEF,stroke:#333,stroke-width:2px,stroke-dasharray: 5, 5

在上述示例中，style命令为容器A和容器B定义了Azure风格的外观，而classDef命令定义了Azure风格的样式。你可以根据需要添加更多的Azure图标和样式。

请根据你的需求调整Mermaid代码以及Azure图标的使用。