“차트 그리려면 파워포인트 켜야 하나요?”
순서도(Flowchart), 간트 차트, 시퀀스 다이어그램…
마우스로 네모 그리고, 선 연결하고, 정렬 맞추느라 시간 다 보내시죠?
이제 키보드 두들겨서 그림을 그립니다. 머메이드(Mermaid)가 있으니까요.
1. 30초 요약 (텍스트 투 이미지)
마크다운 안에 간단한 코드를 적으면, 자동으로 예쁜 다이어그램으로 변환해주는 자바스크립트 라이브러리입니다.
입력:
mermaid
graph TD;
A[시작] --> B{성공?};
B -- Yes --> C[퇴근];
B -- No --> D[야근];
출력:
(화살표로 연결된 깔끔한 순서도 그림이 뿅하고 나타남)
2. 당신이 몰랐던 진실: 노션과 깃허브의 지원
“이거 어디서 쓸 수 있어?”
놀랍게도 노션, 깃허브, 옵시디언, 티스토리(플러그인) 등 대부분의 문서 도구가 머메이드를 지원합니다.
개발 설계도를 그릴 때도 쓰지만, 업무 프로세스나 일정표(Gantt)를 그릴 때도 파워포인트보다 훨씬 빠르고 수정하기 편합니다.
무엇보다 ‘수정이 쉽다’는 게 킬러 기능입니다. 글자만 바꾸면 그림이 바뀌니까요.
3. 실전 활용법: 마인드맵
머메이드로 마인드맵도 그릴 수 있습니다.
mermaid
mindmap
root((블로그 수익화))
애드센스
고단가 키워드
체류 시간
체험단
맛집
제품
이렇게 적으면 가지가 뻗어나가는 멋진 마인드맵이 그려집니다. 아이디어 정리할 때 최고입니다.
4. 도구로 해결하기 (feat. 마크다운 PDF 변환기)
“PDF로 만들 때도 그림이 그려지나?”
변환기가 머메이드 문법을 해석할 수 있어야 합니다.
- 머메이드 코드가 포함된 마크다운을 넣으세요.
- 변환기가 이를 해석해서 고화질 이미지로 렌더링한 뒤 PDF에 박아줍니다.
- 캡처해서 붙여넣은 흐릿한 그림 대신, 벡터(Vector)급으로 선명한 다이어그램을 문서에 담으세요.
그림 그리지 마세요, 코딩하세요.
디자인 감각이 없어도 논리(Logic)만 있으면 누구나 완벽한 다이어그램을 만들 수 있습니다.