팀 회의: 워크플로우를 위한 머메이드 다이어그램 소개

Juliana는 머메이드 다이어그램을 효과적으로 사용하여 복잡한 프로세스를 시각화함으로써 더 나은 이해와 협업을 도모했습니다.

### 프로세스 매핑을 위한 머메이드 다이어그램 사용에 대한 협업 인사이트
* 👋 전략 컨설턴트인 에밀리 셰리는 현장 지원팀에서 근무하는 **데이비드 서머스, 에릭 브라운**과 인력 운영팀의 **캐시, 줄리아나 등 팀원들**을 소개하며 통화를 시작했습니다.
* 👏 모니카는 이전 통화에서 훌륭한 발표를 해준 것에 대해 감사 인사를 전했고, 줄리아나는 **머메이드 다이어그램에 대해 발표**하며 **긴 프로세스를 시각화하는 데 머메이드 다이어그램이 유용**하다는 점을 강조했습니다.
* 💻 Juliana는 긴 국가 변환 프로세스에 대한 어려움과 보다 이해하기 쉬운 시각적 표현을 찾는 과정에서 **머메이드 다이어그램**을 활용하여 핸드북에 **편집 가능한 순서도**를 만들게 되었다고 설명했습니다.
* 📊 그녀는 머메이드를 다양한 다이어그램을 만들기 위한 도구로 설명하고 **도구 조사, 흐름 매핑, 도형 선택, 명확한 표현을 위한 색상 정의 등 초기 단계**를 공유했습니다.
* 🔄 토론에서 Juliana는 잦은 수정이 필요한 정적인 이미지에 의존하는 대신 **핸드북을 실시간으로 업데이트할 수 있는 반복적인 접근 방식**의 중요성을 강조했습니다.
* ❓ 팀원들은 **초기 초안을 더 간단한 형식**으로 만들었는지, **동적 콘텐츠에 머메이드 오버 스크린샷**을 사용하는 이유 등 프로세스에 대한 질문을 쏟아냈습니다.
* 🔍 대화는 영업 프로세스를 문서화하고 팀 간의 워크플로 변경을 촉진하는 데 **머메이드 다이어그램을 실제로 적용하는 방법**을 모색하는 것으로 전환되어 커뮤니케이션을 개선하는 데 머메이드 다이어그램의 다재다능함을 보여주었습니다.
* 🌟 회의가 마무리되면서 Juliana는 다이어그램을 완성하기 전에 **미리 볼 수 있는 라이브 편집기 기능에 대한 인사이트**를 공유하여 핸드북에 원활하게 통합하는 동시에 마지막 수정 사항을 해결했습니다.

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

GitLab Unfiltered

머메이드 다이어그램을 사용하여 프로세스 시각화하기

에밀리 셰리가 데이비드 서머스, 에릭 브라운, 튀니지, 카일, 존 레몬스, 캐시, 줄리아나 등 팀원들과 함께 자신을 소개하는 통화를 이끌고 있습니다.

줄리아나는 인사 운영팀에서 머메이드 다이어그램을 사용하여 긴 국가 전환 프로세스를 위한 시각적 순서도를 만든 경험을 공유합니다.

그녀는 이 도구의 실시간 변경 효과와 핸드북에 통합되어 쉽게 액세스할 수 있는 점을 강조합니다.

핸드북용 머메이드 차트 만들기

머메이드 차트는 핸드북에서 백틱 3개와 '머메이드'라는 단어, 그리고 마지막에 백틱 3개를 사용하여 식별합니다.

차트의 흐름, 모양, 색상은 중요한 요소이며, 모양은 다양한 기능을 나타내고 색상은 소유권을 나타냅니다.

발표자는 처음에는 다른 도구로 이상적인 비전을 매핑한 후 효율성을 높이고 핸드북을 단일 소스로 만들기 위해 Mermaid로 전환했습니다.

도형을 사용하여 흐름 다이어그램 만들기

발표자는 마름모와 둥근 모서리 노드 등 다양한 도형을 사용하여 흐름도를 만들고 있습니다.

도형의 선택은 개인의 취향에 따라 달라질 수 있다는 점을 강조합니다.

다이어그램의 흐름은 화살표를 사용하여 A에서 B, C, D로 이동하고 있지만 화자는 도중에 약간의 혼란과 실수를 겪게 됩니다.

다이어그램 디자인하기: 흐름, 모양 및 색상

다이어그램의 도형은 텍스트에 영향을 주지 않고 업데이트할 수 있으므로 쉽게 수정할 수 있습니다.

전체 다이어그램에 대한 색상 정의가 가능하며, 일관성을 위해 여러 요소에 특정 색상을 지정할 수 있습니다.

최종 결과물은 높은 수준의 흐름을 보여주며 다양한 모듈을 정의와 연결하고 차트 전체에서 색상을 쉽게 변경할 수 있습니다.

문서 작성에 머메이드 사용의 이점

Mermaid는 HTML, 마크다운, Ruby 파일 확장자를 파싱하여 문서화를 위한 다용도 도구로 활용할 수 있습니다.

실시간 편집기 기능을 통해 사용자는 변경 사항을 실시간으로 미리 볼 수 있어 병합 요청을 제출하기 전에 정확한 서식을 지정할 수 있습니다.

이 도구는 영업 워크플로와 표준 운영 절차 등 복잡한 프로세스를 시각화할 때 특히 유용합니다.

워크플로우 변경 및 라이브 편집 제안하기

다이어그램으로 워크플로 변경 사항을 문서화하는 것은 효과적인 비동기식 제안 방법이 될 수 있습니다.

라이브 편집기를 사용하면 초안을 소셜라이즈하기 전에 초안을 작성하여 원활한 검토 프로세스를 보장할 수 있습니다.

다이어그램에서 노드를 정의할 때 흔히 저지르는 실수는 노드 앞에 텍스트를 배치하는 것인데, 이는 혼란을 초래할 수 있습니다.