在 Azure devops wiki 中调整美人鱼图白色 space
Adjust mermaid diagram white space in Azure devops wiki
目标： 工作流程图显示在 header 文本下方，标准间距
实际结果： 工作流程图显示在 header 下方，带有标准化数量的白色 space
错误：没有错误消息
故障排除步骤：我试图按照此中的解决步骤进行操作，但它使美人鱼图不再显示并产生格式错误代码。
# 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 编辑器和并排预览
对于 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 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，所以我不能说它在那里是否有效。另外，这可能取决于您使用的版本。
目标： 工作流程图显示在 header 文本下方，标准间距
实际结果： 工作流程图显示在 header 下方，带有标准化数量的白色 space
错误：没有错误消息
故障排除步骤：我试图按照此
# 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 编辑器和并排预览
对于 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 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，所以我不能说它在那里是否有效。另外，这可能取决于您使用的版本。