Note: Azure DevOps will translate underscores as spaces in wiki file names (e.g. Usually I would only publish wiki from the constrained (master) branch, but for this demo, i'll use the feature branch: If you made a non-code wiki or already have other wikis from code, you can use the drop down to add another 'Publish code as wiki': Let's do that now, go to Wiki and 'Publish code as wiki' if you haven't already: I did indicate Azure DevOps can render these, but only via the Wiki area (for now). * feature/mermaid -> feature/mermaidīranch 'feature/mermaid' set up to track remote branch 'feature/mermaid' from 'origin'. Git push -set-upstream origin feature/mermaid To push the current branch and set the remote as upstream, use JOHNSI10-M1:ghost-blog johnsi10$ git pushįatal: The current branch feature/mermaid has no upstream branch.

$ git commit -m 'first draft on mermaid docs' We'll leave both in so you can see how Azure DevOps responds: $ git add docs Here is a process flow out of blog pipeline The Mermaid JS plugin in Visual Studio Code likes the 3 backticks way and Azure Repos uses 3 colons. Here is where we have a bit of a delta we need to manage. Let's create a markdown file and add the following diagram: graph TD graph TDĪ ->|New | B(Process Request)Ĭ ->|parse | D(Insert Request into Table)ĭ ->|something else | F(System B) Mermaid Editor Gantt:Īnd clearly they have examples for: Flow Charts, Sequence Diagrams, Class Diagrams, State Diagrams, Gantt Charts, Pie Charts and Entity Relationship (ER) Diagrams. Let’s just look at some examples (you can follow along in the live editor). The formatting was adopted by many tools including Azure DevOps. Mermaid is a an opensource javascript based diagram tool.

I’ll work through how you can have diagrams as code, expose via Azure DevOps Wiki and even show how to compile images for distribution in a pipeline as well as autogenerate word docs you can use in other tooling (for instance, uploading into sharepoint or google drive). While i’ve been using Mermaid diagrams for some time, i realize not everyone knows what they are or how best to use them.

Macdown insert image