개발자 / 다이어그램
Mermaid 라이브 편집기
Mermaid 코드를 작성하면 입력하는 대로 다이어그램이 표시됩니다. 순서도, 시퀀스 다이어그램, 클래스 다이어그램, Gantt 차트, 원형 차트를 지원하며 SVG와 PNG로 다운로드할 수 있습니다.
Mermaid 라이브 편집기: 이 편집기는 Mermaid로 다이어그램을 그립니다. Mermaid는 텍스트로 작성한 다이어그램을 지원하는 오픈 소스 라이브러리로, GitHub, GitLab 및 다양한 문서 도구에서 사용합니다. 엄격한 모드로 실행되므로 다른 사람이 작성한 코드가 스크립트를 실행하거나 클릭 핸들러를 추가할 수 없습니다. SVG 다운로드는 어떤 크기에서도 선명하게 유지됩니다. PNG 다운로드는 흰색 배경에 화면 표시 크기의 2배로 그려집니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
다이어그램은 엄격한 모드의 Mermaid를 사용해 브라우저에서 그려지므로 다이어그램 코드가 스크립트를 실행할 수 없습니다. 같은 코드를 GitHub, GitLab 또는 Notion Markdown의 mermaid 코드 블록에 붙여넣으면 해당 위치에 표시할 수 있습니다.
텍스트로 작성하는 다이어그램
그래픽 프로그램으로 그린 다이어그램은 변경할 때마다 파일을 다시 열어야 하므로 오래된 상태로 남기 쉽습니다. Mermaid 다이어그램은 설명하는 코드나 문서 옆에 둘 수 있는 몇 줄의 텍스트입니다. 같은 커밋에서 함께 변경할 수 있고, 검토 화면에서 읽기 쉬운 diff로 확인할 수 있습니다.
각 다이어그램은 유형으로 시작합니다. 예를 들어 TD(위에서 아래) 또는 LR(왼쪽에서 오른쪽) 방향을 지정하는 flowchart, sequenceDiagram, classDiagram, gantt, pie 등이 있습니다. 노드는 레이블과 함께 한 번 작성합니다. 예를 들어 A[Start]처럼 작성한 뒤 A --> B와 같이 이름으로 참조합니다.
내보내기
SVG는 어떤 크기에서도 선과 텍스트가 선명하게 유지되므로 문서와 슬라이드에 더 적합합니다. PNG는 채팅 앱이나 SVG를 지원하지 않는 곳에 적합합니다. 내보낸 SVG를 직접 편집하려면 SVG 편집기에서 여십시오.
사용 방법
- 예제에서 시작하거나 직접 작성한 Mermaid 코드를 붙여넣습니다.
- 코드를 편집하면 입력하는 대로 다이어그램이 다시 그려지거나 오류가 표시됩니다.
- 다이어그램을 SVG 또는 PNG로 다운로드하거나 코드를 복사합니다.
개인정보 보호 및 제한사항
다이어그램은 브라우저에서 그려지며, 코드는 이 브라우저에만 보관되므로 다음에 다시 방문해도 그대로 남아 있습니다.
관련 도구
자주 묻는 질문
Mermaid란 무엇인가요?
텍스트로 다이어그램을 작성하는 방법입니다. 예를 들어 A --> B와 같은 한 줄을 작성하면 화살표로 연결된 두 개의 상자가 그려집니다. 따라서 다이어그램을 Markdown 파일과 코드 리뷰에 포함하고, 그리기 도구 대신 텍스트를 편집해 변경할 수 있습니다.
GitHub에서 다이어그램을 표시하려면 어떻게 해야 하나요?
Markdown 파일, 이슈 또는 pull request에서 코드를 mermaid로 표시한 펜스 코드 블록에 넣습니다. 세 개의 백틱 뒤에 mermaid라는 단어와 코드를 작성하고, 마지막에 세 개의 백틱을 입력합니다. GitHub, GitLab 및 Notion이 해당 위치에 다이어그램을 그립니다.
다이어그램에 오류가 표시되는 이유는 무엇인가요?
오류 메시지에는 Mermaid가 읽지 못한 줄이 표시됩니다. 일반적인 원인으로는 첫 줄에 flowchart TD와 같은 다이어그램 유형이 빠진 경우, 닫히지 않은 대괄호나 따옴표, 따옴표로 감싸야 하는 특수 문자가 포함된 텍스트가 있습니다.
어떤 다이어그램 유형을 지원하나요?
편집기가 불러오는 Mermaid 버전에 포함된 모든 유형을 지원합니다. 순서도, 시퀀스, 클래스, 상태, 엔터티 관계, Gantt, 원형, 마인드맵, 타임라인, git 그래프 등이 포함됩니다. 예제에서는 가장 많이 사용하는 다섯 가지 유형을 다룹니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요