Using Mermaid Diagrams in Azure DevOps

hey everyone in today's video we're gonna take a look at how you can insert mermaid diagrams inside your azure DevOps wiki this is a fairly new feature if you like the idea of creating diagrams using code check this out we'll show you how it's done in just a second [Music] okay so we'll start out here I've got a demo project going on nothing in this project really so we're just going to bounce over to the wiki it's a brand new wiki so we got to create our first page we'll just call this diagrams we'll come down into the content part of the the wiki here we're gonna go up to the tool bar and you'll notice there's this toolbar button up here called insert mermaid diagram click on that they'll insert a very basic diagram just to kind of get you started you know this is typical mermaid syntax here and slightly tweaked for the azure DevOps wiki but for the most part and its standard mermaid syntax and you'll notice even though we got the the code for the diagram over here on the left you don't see it over here on the right you actually have to click on this load diagram text here to get the diagram to show up so I'll go ahead and click that now and you'll see we have a very very basic flow chart showing up here we've got wiki supports mermaid and then a link here for more syntax so just for fun let's go ahead and copy this link here out and I'm going to go open a new tab with that link and this is where you can go to find all of the syntax for the various mermaid diagrams so for example we're doing a flow chart right now you can see for example graph L R means left to right and then essentially you can set up nodes with text and so on and so forth I'm not gonna go into all the this syntax a mermaid in this video I'm actually gonna save that for another set of videos coming in the near future for now just know that that link is available and uh put it down in the show notes as well you can go out and find all the syntax for a mermaid if you're not already familiar with it so go back over here you'll notice for a mermaid diagram to be created inside a sure DevOps you start out with this basic tag which is three colons followed by the term or they excuse me the word mermaid and then the type of diagram I'm gonna create in this case if the graph which is really just a flowchart L are again left or right and then you can do things let's go ahead and remove this so maybe you want to do node A to B and then B to C for example if I come over here and click load diagram those we get a to B to C and maybe I want to do right to left click little diagram notice it goes the other way and maybe you want to do top-down so on and so forth if you get the idea so you can do flowcharts inside of after DevOps use a mermaid want to bounce over here and copy something to my clipboard something a little more elaborate ok so we'll replace what we had with something a little more involved notice we've got more nodes now BDF you know a BD d FF click load diagram so you see this diagram is a little more elaborate in actually if you look at this flowchart it's actually a flow chart showing you which diagrams as your devops supports for mermaid not all diagrams that mermaid supports just supported in Azure DevOps in fact right now as of the recording of this video there are only three chart types or diagram types supported and that's the flow chart which is what we're looking at now and Gantt chart and sequence diagram will look at both of these here in just a second there are other charts for example pie charts class diagrams so on and so forth that are not currently supported by have your DevOps so you can see you can get a little more elaborate with these I'll go ahead and copy in some styling just for fun just to show that you can also apply some styling to these things ille colors to the various elements in this chart so if i load that now now we have a little color terror flowchart so you can make them look pretty nice and and there's other styling things or styling choices you can use as well and again if you go back up here and start looking through the documentation for mermaid you can find out what all of those are so they look pretty good while we're at it let's go ahead and take a look at a Gantt chart inside of Azure DevOps so I'll go ahead and paste that down here yeah it looks like I've got my syntax a little messed up there and there we go click on lo diagram so now you can see we've got a Gantt chart in here if I click up here we'll have a flow chart as well as the Gantt chart and then finally let's take a look at sequence diagrams and let's go ahead and load that one so you get your basic UML style sequence diagram as well so again right now only these three basic diagram types are supported with the Nasher DevOps I'm hoping that down the road Microsoft will choose to fully implement mermaid I honestly don't know what their plans are there but it would be really cool to see that happen and if you're curious right now over in github github does not support mermaid diagrams either at least not natively there's some add-ins you can use in your browser to make that work but it's not an inherent feature in a future video I'll do a little more in-depth dive to mermaid and a couple other diagrams as code type tools just to just to get a feel for what's available out there now if you like doing your diagrams as code but for now just know that you can do diagrams within the wiki and as your DevOps also if you're curious the markdown files within a DevOps like for example if you're in a code repo so let's just bounce over here and I'll go ahead and discard these and let's add a new file in here let's call this diagram so DM D so let's create a new markdown file and I'll bed and paste this in and the downside is that markdown files within your code repos do not work with the mermaid syntax unfortunately not and again I don't know what Microsoft plans are there I don't know if they intend to support mermaid within all markdown files or if they're just going to keep it strictly to Azure wikis but anyway hope you enjoyed this maybe this is a feature you weren't aware of and now you know it's there so if you like this video please hit the like button below and hit this subscribe button if you'd like to get notified when new videos come out and thanks you

Channel: Moonspace Labs, LLC

Views: 3,562

Keywords: Azure DevOps, Azure DevOps Wiki, Mermaid Diagrams, Azure DevOps Mermaid Diagrams, Azure DevOps Tutorial

Id: RzxKD8f-eRo

Length: 7min 32sec (452 seconds)

Published: Mon May 18 2020