업무 흐름도나 순서도를 그리려고 도형 도구를 열었다가 한참을 헤매신 적 있으시죠? 네모를 그리고 화살표를 연결하고 간격을 맞추다 보면 내용보다 정렬에 시간을 더 쓰게 됩니다.
더 답답한 건 수정할 때입니다. 중간에 단계 하나를 끼워 넣으려면 아래 도형을 전부 밀어야 하고, 화살표는 다시 이어야 합니다. 그래서 웬만하면 안 고치고 넘어가게 되지요.
그런데 도형을 아예 손으로 그리지 않고 문장을 적듯이 다이어그램을 만드는 방법이 있습니다. 그 방법이 뭘까요?
핵심 요약
도형을 마우스로 그리는 대신 몇 줄의 텍스트를 적으면 다이어그램이 자동으로 그려집니다. 간격 맞추기와 화살표 정렬 같은 작업이 통째로 사라지는 것이지요.
수정도 완전히 달라집니다. 중간에 단계를 하나 추가하려면 그 자리에 한 줄만 넣으면 되고, 나머지 배치는 알아서 다시 계산됩니다. 도형을 밀고 화살표를 다시 잇는 작업이 필요 없습니다.
게다가 회원가입도 필요 없고 사용량 제한도, 광고도, 유료 등급도 없습니다. 브라우저만 열면 바로 시작되는 구조지요. 이게 무료라는 게 믿기시나요?
사이트 소개
정식 명칭은 Mermaid Live Editor이고, 주소는 <https://mermaid.live> 입니다. 오픈소스 다이어그램 문법인 머메이드(Mermaid)의 공식 편집기지요.
머메이드는 텍스트로 다이어그램을 정의하는 문법입니다. 예를 들어 "A에서 B로 간다"는 식의 짧은 표현을 적으면, 그걸 읽어 도형과 화살표로 바꿔 그려주는 방식입니다.
이 편집기는 머메이드 개발팀이 직접 운영하는 공식 편집기입니다. 완전히 무료이며 가입이 필요 없고, 유료 등급도 사용량 제한도 광고도 없습니다.
머메이드 문법이 널리 퍼진 이유가 하나 더 있습니다. 개발자들이 쓰는 문서 시스템이나 협업 도구 상당수가 이 문법을 그대로 인식해 그림으로 보여주기 때문입니다. 즉 여기서 익힌 문법이 다른 곳에서도 그대로 통합니다.
기능 소개
가장 핵심은 왼쪽에 쓰면 오른쪽에 그려지는 즉시 미리보기입니다. 텍스트를 한 줄 고칠 때마다 그림이 바로 갱신되므로, 결과를 확인하려고 별도 버튼을 누를 필요가 없습니다.
다양한 다이어그램 종류를 지원합니다. 업무 순서를 나타내는 흐름도, 시간에 따른 주고받음을 표현하는 시퀀스 다이어그램, 일정 관리에 쓰는 간트 차트, 상태 변화를 나타내는 다이어그램 등이 같은 문법 체계 안에 들어 있습니다.
자동 배치가 이 도구의 진짜 값어치입니다. 도형의 위치와 크기, 화살표 경로를 사람이 정하지 않아도 되므로, 내용에만 집중할 수 있습니다.
내보내기 기능도 갖춰져 있습니다. 만든 그림을 이미지 파일로 받거나, 다른 문서에 붙일 수 있는 형태로 가져갈 수 있습니다.
여기에 링크 공유가 더해집니다. 작성한 내용이 주소에 담기는 방식이라, 링크만 보내면 상대방이 같은 화면을 열어 그대로 수정할 수 있습니다.
사용법
먼저 mermaid.live에 접속하면 화면이 좌우로 나뉜 편집기가 바로 열립니다. 왼쪽이 텍스트를 쓰는 곳, 오른쪽이 결과가 보이는 곳입니다.
처음에는 기본 예제가 들어 있으니 그것부터 살펴보시길 권합니다. 한 줄씩 지워보면서 어느 줄이 어느 도형에 해당하는지 확인하는 것이 가장 빠른 학습법입니다.
간단한 흐름도를 만들려면 첫 줄에 방향을 지정하고, 그 아래에 연결 관계를 한 줄씩 적으면 됩니다. 위에서 아래로 흐르게 할지 왼쪽에서 오른쪽으로 흐르게 할지를 첫 줄에서 정하는 구조지요.
도형의 모양은 괄호의 종류로 결정됩니다. 둥근 모서리, 마름모, 원기둥 같은 형태가 각각 다른 괄호에 대응하는데, 이 규칙 몇 개만 익히면 대부분의 순서도를 그릴 수 있습니다.
화면 위쪽 메뉴에서 다이어그램 종류를 바꾸거나 예제를 불러올 수 있습니다. 시퀀스 다이어그램이나 간트 차트처럼 처음 쓰는 형태는 예제에서 시작하는 게 훨씬 빠릅니다.
완성되면 내보내기에서 이미지 형식을 고르거나, 상단의 링크를 복사해 공유하면 됩니다. 문서에 그대로 넣을 계획이라면 텍스트 자체를 복사해 가져가는 방법도 있습니다.
도형 도구와 무엇이 그렇게 다를까요?
첫째, 수정 비용입니다. 도형 도구는 하나를 고치면 주변을 다 손봐야 하지만, 텍스트 방식은 한 줄만 고치면 나머지가 자동으로 재배치됩니다.
둘째, 버전 관리입니다. 그림 파일은 무엇이 바뀌었는지 비교하기 어렵지만, 텍스트는 어느 줄이 달라졌는지 바로 보입니다. 협업할 때 이 차이가 큽니다.
셋째, 일관성입니다. 사람이 그리면 도형 크기와 간격이 매번 달라지지만, 자동 배치는 늘 같은 규칙을 따릅니다.
넷째, 재사용성입니다. 텍스트 몇 줄이므로 복사해서 다른 문서에 붙이기 쉽고, 비슷한 다이어그램을 만들 때 기존 것을 바탕으로 고쳐 쓰기도 간단합니다.
다만 정직하게 짚자면, 디자인의 자유도는 도형 도구가 더 높습니다. 발표용으로 예쁘게 꾸며야 한다면 이 방식이 답답하게 느껴질 수 있습니다.
이런 분들에게 특히 유용합니다
업무 절차를 문서로 정리하는 분에게 가장 값어치가 큽니다. 절차는 수시로 바뀌는데, 그때마다 그림을 다시 그리는 부담이 사라집니다.
개발자와 기획자에게는 사실상 표준 도구에 가깝습니다. 협업 문서에 이 문법이 그대로 인식되는 경우가 많아, 그림 파일을 따로 관리할 필요가 없어집니다.
보고서에 흐름도를 넣어야 하는 직장인도 크게 체감합니다. 도형을 정렬하느라 쓰던 시간이 통째로 없어지니까요.
논문이나 과제에서 절차를 설명해야 하는 학생에게도 유용합니다. 간단한 순서도를 몇 분 만에 만들 수 있습니다.
일정 계획을 시각화해야 하는 분이라면 간트 차트 기능을 활용해보시기 바랍니다. 별도 프로그램 없이 기간 계획을 그림으로 만들 수 있습니다.
장점과 아쉬운 점
가장 큰 장점은 아무 조건 없이 무료라는 점입니다. 가입도, 사용량 제한도, 광고도 없어서 도구를 쓰는 데 아무런 마찰이 없습니다.
두 번째 장점은 문법이 다른 곳에서도 통한다는 것입니다. 여기서 익힌 것을 여러 문서 도구에서 그대로 쓸 수 있으니, 배우는 시간이 헛되지 않습니다.
세 번째는 수정의 편안함입니다. 한번 이 방식에 익숙해지면 도형을 마우스로 옮기는 작업이 얼마나 비효율적이었는지 실감하게 됩니다.
아쉬운 점을 정직하게 말씀드리면, 문법을 익혀야 한다는 초기 부담이 있습니다. 처음 30분은 오히려 도형 도구보다 느리게 느껴질 수 있습니다.
또 복잡한 다이어그램에서는 자동 배치가 마음에 안 드는 경우가 생깁니다. 요소가 많아지면 선이 겹치거나 배치가 어색해질 수 있고, 이걸 사람이 세밀하게 조정하기는 어렵습니다.
디자인 꾸미기의 한계도 분명합니다. 발표 자료용으로 화려하게 만들어야 한다면 이 도구만으로는 부족합니다.
그리고 화면이 영어라는 점도 진입 장벽이 될 수 있지만, 조작이 단순해서 큰 문제는 되지 않습니다.
비용은 완전 무료이며 유료 등급이나 사용량 제한이 없습니다. (2026년 8월 20일 확인 기준) 오픈소스 프로젝트의 공식 편집기이므로 이 구조가 유지될 가능성이 높지만, 세부 사항은 사이트 내 안내를 확인하시는 게 정확합니다.
요약
다이어그램을 그리는 일은 생각보다 자주 생기는데, 매번 도형을 정렬하느라 시간을 쓰는 건 아깝습니다. 그리고 그 부담 때문에 그려야 할 것을 안 그리고 넘어가는 경우도 많지요.
이 도구는 그리는 행위를 쓰는 행위로 바꿔놓습니다. 그러면 다이어그램이 부담스러운 작업이 아니라 메모하듯 가벼운 일이 됩니다.
머릿속에만 있던 업무 흐름이 하나 있다면, 오늘 몇 줄로 적어보시는 건 어떻습니까? 5분 만에 그림이 완성되는 경험을 하시면 생각이 달라질 것입니다.
4. 신(하나님)은 과연 존재하는가? 신이 존재한다는 증거가 있는가?
ChatGPT, 유튜브 프리미엄, 넷플릭스 구독료 80% 할인 받는 법 (클릭)
함께 보면 좋은 글
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.