빈 에디터에서 시작하지 마세요. mermaid.design에는 바로 사용할 수 있는 다이어그램 템플릿 갤러리가 내장되어 있습니다 — 하나를 열고 코드를 수정해 나만의 것으로 만드세요.
갤러리 열기
내비게이션 바에서 템플릿을 클릭하면 현재 렌더링 모드의 갤러리가 열립니다:
/templates— 공식(SVG) 엔진과 활성 테마로 렌더링된 템플릿/ascii/templates— 동일한 템플릿을 ASCII 아트로 렌더링
각 갤러리 카드는 현재 테마로 실시간 렌더링되므로, 보이는 그대로 에디터에서 얻을 수 있습니다.
템플릿 찾기
갤러리에는 플로차트, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, ER 다이어그램, 간트 차트, 파이 차트, Git 그래프, 마인드맵, 사용자 여정 등이 포함되어 있습니다.
상단의 필터 칩으로 다이어그램 유형별로 목록을 좁힐 수 있습니다. 템플릿이 현재 렌더링 모드에서 지원되지 않는 경우(예: 일부 다이어그램 유형은 아직 ASCII로 렌더링할 수 없음) 자동으로 숨겨지며, 몇 개의 템플릿이 필터링되었는지 알림이 표시됩니다.
템플릿 적용하기
- 템플릿 카드를 클릭합니다.
- 덮어쓰기 확인 대화 상자를 확인합니다 — 템플릿을 적용하면 현재 에디터에 있는 코드가 대체됩니다. 이 작업은 되돌릴 수 없습니다.
- 템플릿 코드가 로드되고 렌더링된 상태로 에디터로 돌아갑니다.
갤러리에서 내비게이션 바의 에디터로 돌아가기를 클릭하면 아무것도 적용하지 않고 에디터로 돌아갈 수 있습니다.
팁
- 먼저 템플릿을 적용한 다음 테마를 전환하세요 — 템플릿이 테마 변수를 즉시 반영합니다.
- 템플릿은 Mermaid 문법을 배우는 좋은 방법입니다. 하나를 열고 코드를 편집하면서 미리보기가 어떻게 바뀌는지 살펴보세요.