Mermaid Viewer 라이브 편집기

Mermaid Viewer Live Editor는 강력한 편집 기능과 실시간 미리보기를 제공하는 전문적인 다이어그램 생성 환경으로, 다양한 유형의 기술 다이어그램을 효율적으로 만들 수 있도록 도와줍니다.

편집기 레이아웃

라이브 편집기는 이중 창 레이아웃을 채택하고 있습니다:

왼쪽 패널: Mermaid 구문을 입력하고 편집하기 위한 코드 편집기
오른쪽 패널: 렌더링된 다이어그램을 실시간으로 표시하는 미리보기 영역
중앙 구분선: 두 패널의 상대적 크기를 조정할 수 있는 드래그 가능한 분리대

이러한 직관적인 레이아웃 설계를 통해 코드와 미리보기를 동시에 볼 수 있어 편집 효율성이 향상됩니다.

편집기 특징

코드 편집 기능

구문 강조: 다양한 Mermaid 구문 요소에 자동으로 색상을 입혀 코드 가독성 향상
자동 완성: 일반적인 구문 구조를 입력할 때 지능적인 제안 제공
오류 표시: 구문 오류를 실시간으로 표시하고 수정 제안 제공
코드 접기: 대형 다이어그램의 일부를 접어 복잡한 코드 관리 용이

반응형 디자인

데스크톱 및 모바일 기기에서의 접근 지원
모바일 기기에서는 자동으로 수직 분할 레이아웃으로 조정
터치 스크린 지원, 태블릿 사용에 적합

데이터 관리

자동 저장: 편집 내용이 로컬 스토리지에 자동 저장
버전 관리: 편집 기록을 기록하여 이전 버전으로 되돌릴 수 있음
가져오기 기능: 파일이나 URL에서 Mermaid 코드 가져오기 지원

실용적인 도구

공유 및 협업

팀원과의 협업을 위한 고유 공유 링크 생성
변경 사항의 실시간 동기화, 여러 사용자의 동시 편집 지원
권한 제어, 읽기 전용 또는 편집 가능한 액세스 설정 가능

내보내기 옵션

다양한 형식: SVG, PNG, PDF 형식으로 내보내기 지원
사용자 정의 설정: 다이어그램 크기, 배경색, 테마 등 조정 가능
고해상도: 인쇄 환경에 적합한 고 DPI 내보내기 설정 지원

고급 기능

테마 전환: 눈의 피로를 줄이는 라이트 모드와 다크 모드 지원
전체 화면 모드: 방해 없는 편집 환경 제공
키보드 단축키: 워크플로 효율성을 높이는 일반적인 작업의 단축키 제공

기술적 세부 사항

편집기는 최신 웹 기술로 구축되었습니다:

CodeMirror를 코드 편집기 코어로 사용
최신 버전의 Mermaid.js 렌더링 엔진 통합
다양한 화면 크기에 적응하는 반응형 디자인 채택
터치 조작 및 제스처 컨트롤 지원

Mermaid Viewer Live Editor는 기술 문서 작성자, 소프트웨어 엔지니어, 제품 관리자, 교육자에게 이상적인 다이어그램 생성 환경을 제공하여 소프트웨어를 설치하지 않고도 언제 어디서나 전문적인 다이어그램을 만들 수 있게 합니다.