Adjust mermaid diagram white space in Azure devops wiki

Question

Goal: Work flow diagram displays underneath the header text with standard spacing
Actual Results: Work flow diagram displays underneath header with a standardized amount of white space
Errors: No errors messages
Troubleshooting Steps: I attempted to follow the solution steps in this article but it makes the mermaid diagram no longer display and produces formatting error codes.

# 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 editor and preview side by side

Answer 1

For Azure DevOps Services' Wiki, adding this line works with your chart. It's line #3 in the full chart source below.

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

Full Chart Source

::: 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]
:::

This was a doozy to figure out. Lots of examples that don't readily apply to, or work with, Azure DevOps Wiki. Credit to #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

Note: I don't have access to Azure DevOps Server so I can't say whether it works there. Plus that might depend on the version you are using.