손쉽게 코드 기반으로 다이어그램을 생성해보세요
![]()
README에 architecture 그림 한 장만 박으면 좋겠다 싶어서 draw.io를 켰어요.
30분 뒤, 박스 정렬과 화살표 색을 맞추다가 본문 작성 시간을 다 써 버렸습니다.
결국 그림 없이 PR을 올렸어요.
설계 docs를 다크모드로 보는 팀원이 그림만 라이트모드 색이라 혼자 튄다고 합니다.
같은 다이어그램을 두 번 그리거나, 색을 다 갈아엎어 다시 export 해야 해요.
어느 쪽이든 1시간이 사라집니다.
코드 리뷰 코멘트에 흐름도 한 장이 필요한데, 이미지 첨부가 막혀 있어요.
PR 코멘트는 마크다운만 받습니다.
설명을 글로만 풀어 쓰니 리뷰어가 다시 머릿속에서 그림을 그려야 해요.
같은 흐름을 세 번째 설명할 때쯤 되면 본문보다 코멘트가 더 길어집니다.
![]()
그림 도구를 켜는 데 시간이 너무 걸려요. draw.io, Figma, Excalidraw 모두 짧지 않은 진입 단계가 있고, 같은 그림을 다시 열어 고치는 것도 매번 비용입니다.
결과물이 코드처럼 버전 관리되지 않아요. PNG는 디프가 안 보이고, Figma 링크는 누가 언제 무엇을 바꿨는지 본문 안에서 추적할 길이 없어요.
라이트와 다크 두 톤을 매번 새로 맞춰야 해요. 색을 한 번 정해 놓아도 docs 테마가 바뀌면 다시 갈아엎게 됩니다.
터미널이나 평문 영역엔 그림을 못 붙여요. 로그, PR 코멘트, 이슈 트래커처럼 이미지가 안 들어가는 곳에선 흐름을 글로만 적게 됩니다.
AI 에이전트와 매끄럽게 안 맞아요. 에이전트가 흐름을 잘 정리해 줘도 사람이 다시 그림 도구를 켜서 옮겨 그려야 합니다.
![]()
Pretty Mermaid는 Mermaid 다이어그램 코드를 한 줄 명령으로 SVG로 변환해 주는 스킬이에요.
다이어그램은 코드 안에 함께 살고, git에서 변경이 그대로 보여요.
docs 톤에 맞춰 테마만 바꾸면 라이트와 다크 양쪽이 한 번에 정리됩니다.
추천 대상
![]()
render.mjs. 한 개의 .mmd 파일을 SVG로 변환해요. 테마 옵션 한 줄로 톤이 결정됩니다.
batch.mjs. 폴더 안 다이어그램 묶음을 한꺼번에 변환해요. 워커 옵션으로 병렬 처리합니다. 그림이 많은 docs 사이트 빌드에 적합해요.
themes.mjs. 사용 가능한 15가지 테마 목록을 콘솔에 출력해요. 라이트, 다크, 컬러 강조 톤 등 docs 분위기에 맞춰 고를 수 있습니다.
5종 다이어그램 지원. flowchart, sequence, state, class, ER 모두 같은 한 줄 명령으로 변환돼요. Mermaid 자체 문법을 그대로 씁니다.
AI 에이전트 호환. Claude Code, Cursor, Gemini CLI, Antigravity, OpenCode, Codex, qoder까지 7개 환경에서 같은 명령으로 호출할 수 있어요. 에이전트가 다이어그램 코드를 만들어 주면 변환만 호출하면 됩니다.
의존성 자동 설치. 첫 실행에 필요한 패키지가 자동으로 깔립니다. Node.js 14 이상만 미리 준비돼 있으면 돼요.
![]()
CH 01. 설치
한 줄이면 됩니다.
npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid
설치한 폴더에서 themes.mjs를 한 번 호출하면 동작이 정상인지 바로 확인됩니다.
CH 02. 첫 그림 변환
흐름을 적은 .mmd 파일을 만들고, 한 줄 명령으로 SVG로 떨어뜨려요.
node scripts/render.mjs --input diagram.mmd --output diagram.svg --theme tokyo-night
브라우저로 SVG를 열면 결과를 바로 확인할 수 있어요.
docs 톤이 다르면 --theme 값만 바꿔서 다시 호출하면 됩니다.
CH 03. 묶음 변환
docs 사이트나 README에 그림이 여러 장 들어갈 때 폴더 통째로 변환해요.
node scripts/batch.mjs --input-dir ./diagrams --output-dir ./output --theme dracula --workers 4
워커 수를 늘리면 큰 묶음도 짧은 시간에 끝납니다.
이 스킬은 외부 저장소에서 직접 받을 수 있어요. 구매 없이 바로 클론·포크할 수 있습니다.
5.0
총 1개