저는 Mermaid를 자주 씁니다. 설계 문서의 플로우차트, README의 시퀀스 다이어그램, 가끔 ER 다이어그램까지. 코드로 작성하는 다이어그램은 여러모로 좋습니다. 버전 관리가 되고, diff가 되고, 상자를 마우스로 끌 필요도 없죠. 좋지 않았던 건 결과물이 어떻게 보이는지뿐이었습니다.
내장 테마는 기능적이지만 색감이 구식입니다. Mermaid에는 제대로 된 테마 시스템이 있습니다. theme: 'base'를 설정하고 themeVariables에서 원하는 것을 덮어쓰면 됩니다. 문제는 작업 흐름입니다. frontmatter 블록을 수정하고, 다시 렌더링하고, 결과를 눈여겨보고, 70개가 넘는 변수 중 어떤 것이 원하는 부분을 칠하는지 추측하고, 반복합니다.
한계에 다다른 건 한 시퀀스 다이어그램이었습니다. primaryColor를 바꿨더니 액터 박스까지 함께 색이 바뀌었습니다. 알고 보니 그건 actorBkg 소관이었죠. 색 하나에 10분, 대부분이 추측입니다. 변수 이름은 자기가 무엇을 칠하는지 거의 알려주지 않으니까요.
제가 원한 것은 간단했습니다. 변수를 조정하면, 무슨 일이 일어나는지 즉시 보는 것.
그래서 mermaid.design을 만들었습니다. 왼쪽에 Mermaid 코드, 가울에 라이브 미리보기, 오른쪽에 테마 시스템 전체 편집 패널. 모든 변경 사항이 다이어그램을 그 자리에서 다시 렌더링하므로, 피드백 루프가 몇 분에서 몇 초로 줄었습니다.
여기까지가 겉모습입니다. 실제로 시간을 아껴주는 모듈을 소개합니다.
갤러리: 모든 다이어그램 유형을 한눈에
테마 변수가 성가신 이유는 같은 변수가 다이어그램 유형마다 다르게 동작하기 때문입니다. 갤러리 페이지는 84개의 템플릿 — 플로우차트, 시퀀스, 클래스, 상태, ER 등 — 을 모두 현재 테마로 실시간 렌더링합니다. 변수를 바꾸고 갤러리를 스크롤하면, 모든 유형에 대한 효과가 한눈에 들어옵니다. 확인하려고 유형을 왔다 갔다 전환할 필요가 없습니다. 바로 그 시간을 아껴줍니다.
테마 변수: 기본값과 상속 관계가 그대로 보입니다
73개 변수 모두에 mermaid base 테마의 기본값이 표시됩니다. 명시적으로 설정하지 않은 변수에는 AUTO 배지가 붙고, 렌더링 시점에 mermaid가 유도하는 값과 그 출처가 함께 보입니다:
mainBkg는primaryColor를 따라갑니다primaryBorderColor는primaryColor에서 계산된 테두리 색입니다secondaryTextColor는secondaryColor의 반전색입니다(대비 보장)actorBkg는mainBkg를 따라갑니다 — 앞서의 함정이 바로 이것입니다.primaryColor를 바꿨을 때 액터 박스가 함께 바뀐 이유는primaryColor→mainBkg→actorBkg라는 상속 체인이 있기 때문입니다
체인이 보이면, 색 바꾸기는 더 이상 추측이 아닙니다.
프리셋: 공식, 디자이너, 그리고 계속 추가됩니다
원클릭으로 적용하는 21개 프리셋: 공식 Mermaid 테마 11개(default, neutral, dark, forest, base와 v12의 redux, neo 계열)와 제가 직접 조정한 디자이너 프리셋 10개. 각각 라이브 미니 미리보기를 제공하며, 컬렉션은 계속 늘어날 예정입니다.
생성: 프라이머리 색 하나로 팔레트 전체를
프라이머리 시드 색상 하나를 고르면 생성기가 그 색상을 중심으로 HSL 공간에서 명도를 램프시켜(8단계 스케일) 다크 모드 변형을 포함한 완전한 팔레트를 도출합니다. 다이어그램을 브랜드에 맞추는 가장 빠른 방법입니다.
렌더링 설정: 색상 너머
색상은 절반일 뿐입니다. Mermaid에는 438개의 렌더링 관련 설정 필드가 있고, 다이어그램 유형별로 34개 그룹으로 정리되어 있습니다. 몇 가지 예:
- 전역:
fontFamily,fontSize,wrap(자동 줄바꿈),look(classic 또는 handDrawn 손그림 스타일) - 플로우차트:
flowchart.curve(엣지 곡선 스타일),flowchart.nodeSpacing/flowchart.rankSpacing(노드/랭크 간격),flowchart.diagramPadding - 시퀀스:
sequence.actorMargin,sequence.messageMargin,sequence.showSequenceNumbers(메시지 번호),sequence.mirrorActors - 파이:
pie.textPosition,pie.donutHole,pie.legendPosition
현재 다이어그램 유형에 해당하는 그룹은 자동으로 열립니다.
ASCII 모드: 텍스트가 되는 다이어그램
같은 다이어그램을 ASCII 아트로 렌더링할 수 있습니다. 원클릭으로 복사해서 코드 주석, 커밋 메시지, 일반 텍스트 문서에 바로 사용하세요. 현재 지원하는 유형은 5가지입니다: 플로우차트, 시퀀스, 클래스, 상태, ER. 문자셋은 Unicode 박스 드로잉 또는 순수 ASCII를 선택할 수 있습니다.
정리
mermaid.design을 만든 동기는 간단합니다. 공식 테마 색상은 마음에 들기 어렵고, themeVariables 수동 조정은 느리며, 변경 사항이 즉시 보이는 곳이 필요했습니다. 이제 이곳에는 기본값과 상속 관계가 보이는 테마 변수 라이브 편집, 모든 다이어그램 유형을 한 번에 보여주는 갤러리, 공식·디자이너 프리셋, 프라이머리 색 하나로 팔레트 전체를 만드는 생성기, 438개 렌더링 설정 필드, 그리고 다이어그램을 텍스트로 바꾸는 ASCII 모드가 갖춰져 있습니다.
당신도 Mermaid 테마와 씨름하고 있다면, 한번 써 보세요.