Mermaid.js 시각적 편집기 및 실시간 다이어그램 생성기

Mermaid.js 시각적 편집기 — 실시간 Mermaid 미리보기 및 내보내기

Mermaid 시각적 편집기는 Mermaid 다이어그램(플로우차트, 시퀀스 다이어그램, 상태 머신 등)을 위한 가벼운 브라우저 기반 편집기입니다. Mermaid 코드를 작성하거나 붙여넣고, 렌더링된 다이어그램의 실시간 미리보기(Mermaid.js 로드가 허용된 경우)를 확인하며, 마크다운, GitHub, Notion 또는 Mermaid를 지원하는 모든 뷰어에서 사용할 수 있도록 소스 텍스트를 복사할 수 있습니다.

이 도구를 사용하는 이유는 무엇인가요?

• 단일 작업 공간: 여러 탭이나 도구 사이를 전환하지 않고 Mermaid 구문을 초안 작성하고 수정할 수 있습니다.
• 즉각적인 피드백: 다이어그램 코드를 조정하고 입력하는 대로 미리보기가 업데이트되므로 구문이나 레이아웃 문제를 빠르게 수정할 수 있습니다.
• 복사 가능한 출력: 문서, README, 위키 및 노트 앱에 바로 붙여넣을 수 있는 깔끔한 Mermaid 텍스트를 내보냅니다.
• 내장 참조 자료: 편집기 옆에 graph LR, 화살표, 엣지 레이블에 대한 빠른 치트 시트를 유지합니다.

주요 기능

• 코드 편집기 영역: 전용 텍스트 영역에서 Mermaid 소스(graph LR, graph TD, sequenceDiagram, classDiagram 등)를 편집합니다.
• 실시간 Mermaid 미리보기: 페이지에서 Mermaid.js를 로드할 수 있을 때, 미리보기 패널이 다이어그램을 SVG로 렌더링하여 시각적으로 구조를 확인할 수 있습니다.
• 코드 복사 버튼: 현재 Mermaid 텍스트를 한 번의 클릭으로 복사하여 GitHub, Notion 또는 mermaid.live에 붙여넣을 준비를 합니다.
• 유용한 기본값: 이 도구는 간단한 예제 그래프로 시작하므로 유효한 Mermaid 구문을 즉시 보고 필요에 맞게 수정할 수 있습니다.

작동 방식

Mermaid 코드를 편집기에 입력하거나 붙여넣으세요. 이 도구는 텍스트를 저장하고, Mermaid.js를 사용할 수 있을 때 그 옆에 실시간 다이어그램 미리보기를 렌더링합니다. 언제든지 코드 복사를 클릭하여 원시 Mermaid 소스를 클립보드에 복사하고 선호하는 마크다운 또는 문서 환경에서 재사용할 수 있습니다.

특정 환경이 외부 스크립트를 차단하더라도, 이 편집기는 깔끔한 Mermaid 코드 스크래치패드 및 복사 도우미로 여전히 작동합니다: 여기서 다이어그램 정의를 작성한 다음, Mermaid를 지원하는 뷰어에 붙여넣어 렌더링하면 됩니다.

Mermaid 시각적 편집기 사용해 보기

기본 예제(작은 의사 결정 흐름)부터 시작하거나 자신의 Mermaid 다이어그램을 붙여넣으세요. 노드 레이블, 화살표 및 방향(LR, TD 등)을 조정하고, 미리보기가 업데이트되는 것을 지켜보며, 최종 코드를 문서, 위키 또는 Mermaid 라이브 편집기에 복사하세요.