azure-devops - 调整 Azure devops wiki 中的美人鱼图空白

Question

目标:工作流程图以标准间距显示在标题文本下方
实际结果:工作流程图显示在标题下方，并带有标准化的空白量
错误:没有错误消息
故障排除步骤:我尝试按照此 article 中的解决方案步骤进行操作但它使美人鱼图不再显示并产生格式错误代码。

# Author Submission Workflow 
::: mermaid
graph TD
A[Author sends a review to the customer success email] -->|Dynamics 365 creates a review case based on the Knowledge Base Article Review Template| B[[Automation]]
B --> D[D365 creates a review case based on the Knowledge Base Article Review Template]
B --> E[D365 places the review article in the Article Review Queue]
D -->F[Dynamics 365 creates a review case based on the Knowledge Base Article Review Template]
E -->F[A customer success agent assigns themself as the owner for the article]
F -->G[[D365 sends a notification of the new owner to the TDT email]]
G -->H[In Madcap Central, the Flare author reassigns article review from the cus success email to the assigned Owner for the review case]
H -->I[Agent completes review in Madcap Central and submit it to Flare Author]
I -->J[Agent closes the review case in D365]
J -->K[Flare author receives notification of returned review via Madcap Central email]
K -->L[Flare author implements changes in Flare and accepts the file]
L -->M[Flare author synchronizes project with source control]
:::

Markdown 编辑器和并排预览

Answer 1

对于Azure DevOps Services' Wiki，添加此行适用于您的图表。它是下面完整图表源中的第 3 行。

• %%{init: {"flowchart": { "useMaxWidth": false } }}%%

完整图表来源

::: mermaid
graph TD
%%{init: {"flowchart": { "useMaxWidth": false } }}%%
A[Author sends a review to the customer success email] -->|Dynamics 365 creates a review case based on the Knowledge Base Article Review Template| B[[Automation]]
B --> D[D365 creates a review case based on the Knowledge Base Article Review Template]
B --> E[D365 places the review article in the Article Review Queue]
D -->F[Dynamics 365 creates a review case based on the Knowledge Base Article Review Template]
E -->F[A customer success agent assigns themself as the owner for the article]
F -->G[[D365 sends a notification of the new owner to the TDT email]]
G -->H[In Madcap Central, the Flare author reassigns article review from the cus success email to the assigned Owner for the review case]
H -->I[Agent completes review in Madcap Central and submit it to Flare Author]
I -->J[Agent closes the review case in D365]
J -->K[Flare author receives notification of returned review via Madcap Central email]
K -->L[Flare author implements changes in Flare and accepts the file]
L -->M[Flare author synchronizes project with source control]
:::

这是一个很难弄清楚的事情。许多示例不太适用于 Azure DevOps Wiki，也不能与 Azure DevOps Wiki 一起使用。信用 #1758 Huge white margins on img/png output of large diagrams

axilleas Jun 20, 2021 Since mermaid 8.6.0, you can use directives straight into the diagram, without fiddling with JavaScript and CSS. %%{init: {"flowchart": { "useMaxWidth": false } }}%% graph LR

注意:我无权访问 Azure DevOps Server所以我不能说它在那里是否有效。另外，这可能取决于您使用的版本。