在 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，也无法与之一起使用。感谢#1758 Huge white margins on img/png output of large diagrams

axilleas 2021 年 6 月 20 日 从 mermaid 8.6.0 开始，您可以直接在图表中使用指令，而无需摆弄 JavaScript 和 CSS。 %%{init: {"flowchart": { "useMaxWidth": false } }}%% graph LR

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