
* 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
#Using underscores macdown code
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.

#Using underscores macdown how to
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.
