Alright folks, let's get this party started. I simply have some extra people on the call. Maybe you need a quick round of intros first. So, my name is Emily Sherry. I'm a strategy consultant here. I won the chief of staff team. They didn't introduce. Yeah, David Sommers, a leader in the Phil enablement team. Eric, you know, good, excellent. Yep, I'm Eric Brown. I work for David in field enablement and enterprise sales. I'm Tunisia, the word for David. I am responsible for sales onboarding and commercial. Okay, how about you? I'm Kyle. I'm with the deal does team, sales ops, and I'll jump at once, folks. What do you, John? Hey, my name is John Lemons, also on David's team, and their sales training facilitator. Gonna go next, Akana. Oh yes, so my name is Cassie, and I go Jenna if I'm a people operations specialist, the people operations specialist team with my colleague Juliana. Everyone, I'm Juliana, of course, the under mention, and I'm also under.

people operations specialist team. Yeah, it's really great to meet everyone. Thanks for having us on your call today. Absolutely. So, why don't we dive in today? First, I just want to give Monica a shout-out for really awesome minutes that you made out of the last call. Great work. She's probably now a pro, is gonna answer all your questions, so awesome. I'm Giuliana's gonna talk a little bit about mermaid diagrams in the handbook today. So, Juliana, maybe frame the problem you had and then how you tried to solve it, and like, what is a mermaid diagram, and what does it look like, and how do you go about working with youth? Sure, thanks, Emily. So, I just, as a copy-up for everyone, I'm not technical, my mermaid knowledge is pretty basic, but I think maybe that's a good thing, hearing things from a newbie at least. Sometimes for me when I'm learning new tools is helpful. So, my problem, I'm gonna go ahead and jump in and share my screen quickly. My problem was that can everyone

see my screaming cool. My problem was that the pupil operations team has a very lengthy process, as you can see here, for country conversions. We wanted something that was a bit more visual and digestible for other people who asked about our process. So, the idea came up to create more of a visual flowchart. You can do this, of course, in a lot of different tools, but I wanted us to make sure we were living out our value of iteration and that if we were gonna put a flowchart in the handbook, that it was something we could jump into an M R and change, not an image that we were constantly putting in and out. So, I posted in the questions channel to see if such a thing existed, and Emily and Lea and a few other people I get lab told me about mermaid. So, using mermaid, I was able to get this chart in the handbook. It's not perfect, just still has a few iterations to go, like figuring out why it's not saying in the bubble, but mermaid got me to this.

point and I can click web IDE and make any sort of change I want you to this. It lives in the handbook and it's recognized in Immerse. So that was kind of problem and solution, and I guess now we'll take you through how I got from my problem to this first initial draft. Um, I'm gonna bounce around a little bit and show you live how to create a very basic chart, but I want to highlight that everything I'm going through is here in the tools and tips section of the handbook. We have a mermaid section, so everything I'm gonna go through right now you can find here. So if you want to create your own room, a chart at any point, you have all the tools here. So the very first thing I did was read through this GitHub mermaid overview to kind of understand what mermaid was. Turns out mermaid is a tool that helps create flowcharts, Gantt charts, diagrams, any type of visual thing you want to accompany any workflow or data, whatever it may be. So I started reading through

this to kind of get an idea of what it would look like in the handbook, and I went through several examples that I'm only shared with me. Those are also here: example 1, 2, & 3. I'm gonna be biased and pick example 3 because it's the one I did, and I'm most familiar with. So, this is what a mermaid chart would look like in the handbook. It looks really confusing and complicated, but we're gonna try to break it down a little bit so all of this makes a bit more sense. One important thing to remember is when you're working in the handbook to create a mermaid chart, you always need to have these three backticks, the word mermaid at the start, and then the three backticks at the end. So, this helps GitLab identify that you are putting in a mermaid chart and just distinguish between mermaid and markdown. So, that's an important piece that you don't find in this documentation because this isn't made for GitHub. Great, so I

thought about this in phases. The first thing I wanted to do was think about the flow, whether I wanted at top down, left right, what the direction was. Then I moved into shapes. You see, there are a few different, well, by a few, I mean two. There's the diamond and then the basic rectangle shape. And then my third phase was colors because the colors in this particular chart indicate who the owner is. So colors were an important element as well. And if you have any questions at any point, please stop me. So question, Juliana, I'm sorry, yeah, um, out of curiosity, did you first like map this out like in an easier way to do it like I'm a word or whatever Microsoft, not Microsoft, just Google Sheets or something like that or, or am I don't art? You did? You did? I did. I'm trying to find it to show you. I didn't even think about that. Yeah, I did. I actually, I thought for some reason that I would be able to just pop this in the handbook anyway. So this, this is what I mapped out.

prior. So, this was my ideal vision of what I wanted, and once I realized that there was no way to iterate on this super efficiently in the handbook, that's when I moved to Mermaid. Um, but that's a great point, and this was extra work, of course, but having this did really help me, especially since it was unusual. If another stupid question maybe, but why can't we just take a screenshot of this and post it in the handbook? We can, we can. I for this, for this particular flow, it's new to our team, so I think like every day or every other day there's a change. So, in the name of efficiency, I thought it would make more sense to have a Mermaid chart. It would be like editing this screenshotting pudding in the handbook a few hours later, editing this screenshotting pudding in the handbook, and it didn't enable others to kind of contribute on the MRF. They didn't agree with the change I was making, etc. Makes yeah, you you can if it's something more permanent, just screenshots and the other.

thing too that I'll add there is the handbook should be the single source of truth. Yeah, if it lives in a PowerPoint slide or I don't know what this is but like whatever tool this is and that's where the information lives then the handbook's not the single source of truth. So we want to make sure that we're working handbook first as much as we can where possible. Thanks, Julianna. Sure, cool. So mermaid has the capability to go in these directions for my chart. It made sense to be top-down but it can go left-right, right-left, bottom-top, whatever you want. So let's do a mermaid shirt and type graph TD. I was playing with this earlier. I'm just gonna reset. Cool, will delete all of this. So graph TD would be my very first step to decide my direction. The second thing I did was look at shapes. This is a very nice section of this documentation. There are a lot of different shapes that mermaids, which is cool, and this is defined by these symbols around the text. So if it's

a bracket. It's gonna be a sharp edge. If it's a parenthesis, it'll be a soft edge. You can even do this cylinder-looking shape, a circle, a lot of different things. The two I used were rhombus, this diamond-looking guy, and the node with round edges. So, let's get a rhombus in here, and I'll explain what the a means in a second. I realized I got ahead of myself. Yeah, those shapes because they mean something like in process mapping or no, not really. No, it was just what I liked. I thought the diamond was a nice indication of... but you can really do anything, anything that makes the most sense to you. I'm realizing that, okay, yep, see, I made a mistake. So, I was wanting to do A to B because that's the flow mermaid recognizes, but I don't need an A to B because it's just A, and that's the inception of the diagram. So, to start off, it's just A, and then you put whatever shape you want. Again, if I just update these, I can change the shape of

the first section, but we've all acknowledged that I'm partial to the diamond for the phases, so I'm gonna go back. And for the second part, it's like a 2 B B to C C to D is how it flows. Let me see, okay, how are you determining whether you like landscape versus portrait, landscape versus portrait? No, so that is this part here, if it's possible directions, okay, so it's the TD here. I think I'm doing it, I'm doing something wrong because it's not in fact going. Let me see, phase one is one, okay, but it's still not going down, is it? Arrow B, there we go, okay. I was missing the arrow, and then we're going again with the arrows and the time. It's gonna be B to C to C, and my text will be here, example one, cool. And I'm gonna delete that because it's confusing us. So is this, I believe, hold on a second, sorry everyone, I did this just a minute ago. This is real life. If you went too fast, good, okay. I really don't know, Emily.

do you have any idea why this B is showing for me? No, okay, perfect. What if I put... Hold on, I have one more idea. Maybe if I go like this, now we have the A. Oh, geez, I'm looking at the image on that mermaid Everitt editor. It looks like in some instances it has the straight straight up-and-down bracket. That's the official wording, straight up-and-down bracket, and it should be tough. Yeah, you know what I do? I have an emergency backup over here that I think I'm just gonna pop in, and as soon as I figure out why this wasn't working for me earlier, I'll let you all know. But for the sake of efficiency and getting through this, well, now know why everyone says live coding is the worst. The worst. I'm so sorry, okay? But anyway, to show a live example of the question, if I... If I made... Let's see, I'm gonna take out some of these things that we haven't discussed yet to reduce confusion. Cool, okay, all right, so we're

getting going a little bit with the shapes again. If I update any of these, it'll change the shape of the entire thing, and everything in the middle is just my text. So, you can modify the text, and it won't do anything to the graph. I can take out some of this to make it a little bit shorter. Example two, okay. And after I kind of got the flow and the shapes going, the third thing I did were colors. So, there's a ton of different things, and I don't fully understand what all of this means, but what was most helpful for me is this guy here. So, this allows you to define colors for the entire diagram. So, to give a better example of what I mean by that, you see here I have B, and then I have these three dots and pops. So, pops for me means people apps, and this is what I wanted the color for everything that people ops owns to be. So, if I put the die define pops here, then throughout the entire chart, whenever there's these three dots and

pops. It'll align with this color and to have the color bank to understand what these different numbers mean. This is really helpful. It's also linked in the handbook. So let's say I really don't like that pink and I want it to be khaki instead. I just copy this CSS color associated with khaki and I would change the color here. And that's now khaki. And you don't need to have this for example. Just makes the border really thick. I don't. I didn't need that. So I just took it out. You can just kind of experiment with what you like best and you can keep doing. All right. So if you see my bigger chart which I'm gonna paste in now that we have an idea of what the flow looks like from a high level. This is my final product. So you see here I don't just have people apps. I have tax TR for total rewards. Pay for payroll. And it starts associating all of these different definitions above with the different modules. And that lets you align the

colors a bit more, and again, I can change all of these colors. So, if I decide I like peach puff, peach bugs, or pupa luxe, I change it, and everything will change to peach pop, peach puff, because I have these three dots and the definition above. And those are really the three things I focused on. Again, this dock is massive, and I'm sure for a future iteration, I could make this a little bit cooler looking. But the three things I did to just start everything off was flow, shape, and color. I'm really sorry that I had that slip-up, the thievery, and I'm really going to figure out what I did. One more thing to mention is this BR is just a break. So, if I take away the BR at the top, it just has phase one, six weeks, and I just didn't like how that looked. So, if you just click, put in BR, it goes down. I didn't read that on this stock; that's just something that I'd figured out working with markdown that

apparently works with mermaid as well. I'll hop in there. So, that is HTML. Oh great. If you look at the handbook, most of the file extensions are .html, .md. So, it will parse the HTML and the markdown. And sometimes there's also like .rb after that, which means it also will parse Ruby. So, the file extension basically tells us in a page in the handbook. Okay, okay, got it. Hey Emily, yeah, I learned something. And that is my very high-low review of mermaid charts. So, once I have this, this is really, really handy. Liyan, who's our people ops close engineer, shared this with me about halfway through my initial mermaid journey. And mermaid, when you go to preview mode and you're putting through an MR in the handbook, it won't show up as preview. So, this is a way to see what it looks like live before you put that MR through. So, this live editor is so helpful because you know if you have one space difference, you know like if you say something wrong like I just did the

entire thing won't show up properly, so I'd highly recommend playing with this and checking before popping it into Linda more. This is the exact same text I just did it here first and then copied it over to the handbook, and then again this is the end result. Can you show again where you found this book? Yes, I will put it in the Zoom chat tools. Okay, tools and tips, corrects, and yeah, in the tools and tips, you see live examples so you can see what it looks like, the live editors there, this documentation is there, and the color bank is there. Any other questions? I guess I'd ask, um, does anyone see an example where this might be useful for maybe a project you've worked on before or have in the medium-term future? Can you think of use cases for this? I think it would be really helpful if we're like putting together a sales process map or something like that, right? Well, thank you, Juliana. Yeah, God, thank you. I started putting some other ideas in the Google Doc notes. I think that's a great example, Tanuja, sales.

process one of the Eric is leading some work documenting our standard operating procedures. And so, part of that is looking at orchestration of handoffs between, you know, different sales roles throughout the sales process, you know, so from a lead gen person to my field sales rep to an SA-2 at AM. Something I can see that being super helpful, just making that clear through, you know, visual representation of what those handoffs are. And even right now, what you said resonated with me, Julianne, of like the people ops process was really long. Um, this isn't necessarily long, but there's a lot of text to understand how we prioritize and select topics for our enablement sessions, whether they be like Chris, your skills exchange, or the enablement sessions that John Blevins leads. Just by having a visual depiction of what that process looks like, Mike, help folks better understand it. So, those are something somebody is that I came up with, but, uh, cow from the sales outside, you see things on your site. Well, you might have stepped away, stepped away for

a minute. Sorry about that. Didn't mean to call you out. I mean, so one thing I have seen work, piggybacking off something you said, David, is especially where you've got multiple teams working together, and this is documenting it where you want to change the workflow on something. For example, it's a great way to propose a change to the workflow. So instead of popping on a call, talking through it, like a great way to propose a change asynchronously if you have this diagram, the handbook that says, you know, Hey, these to me, you need to see. You can just propose, like, Well, so let's take a detour and go to F before we go to C, and, you know, make an MR2, the mermaid diagram, people see the review app and then merger. You don't based on the buy-in on EMR. So um, that's awesome. I'm glad there are use cases, and I hope this was practical. Thanks, Giuliana. Fer come in tonight. One more question for you, Giuliana. Yeah, the live editor is

that to your point, Emily. If Ike, if we wanted to do something live editor but save it and then socialize it, is it cannot be done with the live editor, is it? That's know it works. I would recommend putting you the mill, I better, and then creating like a whip if you weren't ready to put it in the handbook yet. You kind of wanted to go back and forth. I think that'd be the safest way to say that. Um, I did figure out why the B wasn't working. If you'll give me one minute, I can show it to all you. I really just couldn't let it go. I know I really I needed to just figure it out. So, it's actually quite a silly mistake. When you define the different nodes, so A, B, C, D, etc., the text for the node needs to go after. So, I was putting B here, which just had to be floating around, but there was no text associated with it. So, if I just go like this and say hi, it'll come, it'll populate with hi versus just B. So, that was the reason you just

have to put the text after the be attached to it directly, or it'll just be a be floating around in space. Thanks so much, everyone. Frustrating if you figure in an ollie 30 seconds after the call is over. I think I would have had to email you. Thanks so much. I'm going on vacation for the next two weeks, so I won't be here, but have a great two weeks. See y'all in a enjoy your vacation. Bye.

How to Create Mermaid Diagrams in GitLab

How to Create Mermaid Diagrams in GitLab

Scripts