Beauty Diagram

Beauty Diagram이란?

Beauty Diagram은 Mermaid와 PlantUML 소스 코드를 입력받아 (특정 draw.io 워크플로도 가져올 수 있음) 더 깔끔하고 발표용 레이아웃 및 스타일로 다이어그램을 렌더링하는 온라인 에디터입니다. 핵심 목적은 해당 다이어그램 언어가 생성한 결과를 “미화”하는 것—재배치, 재레이아웃, 내보내기 준비 출력—으로, 사용자가 다이어그램을 수동으로 다시 그릴 필요가 없습니다.

실시간 미리보기, 원클릭 미화, 문서·발표 자료·리뷰용 SVG 또는 PNG 내보내기를 지원합니다. 페이지에서는 발표 중심 타이포그래피와 테마, 시퀀스 스타일 모션 큐를 위한 “애니메이티드 SVG” 미리보기도 설명합니다.

주요 기능

• Mermaid 에디터 (실시간 미리보기 및 원클릭 미화): Mermaid 소스를 붙여넣고 즉시 결과를 확인하며, 코드를 다시 작성하지 않고 포맷 변경을 적용합니다.
• PlantUML 에디터 (미화 워크플로): PlantUML로 전환해 액티비티 소스를 붙여넣고, 간격과 다이어그램 요소를 재정렬하는 포맷터를 적용합니다.
• draw.io 가져오기 (Pro): .drawio 또는 XML export을 가져옵니다 (Pro에서 사용 가능). 에디터가 워크플로를 Mermaid 소스로 파싱해 미화합니다.
• 플로우차트/액티비티 다이어그램용 직교 라우팅 재레이아웃: 직교 연결을 사용해 그리드上で 다이어그램을 재배치하고 라우팅합니다 (노드를 가로지르는 대각선 화살표 방지).
• 일관된 스타일링을 위한 테마 전환: 다이어그램 소스를 편집하지 않고 테마(modern, atlas, obsidian, atelier)를 전환합니다.
• 발표급 타이포그래피 및 스타일링: Geist at 14px / 500, OpenType ligatures, 베이스라인 정렬 레이블, 하드 1px 스트로크 대신 소프트 섀도우를 강조합니다.
• 애니메이티드 SVG 미리보기 (동일 소스, 다른 모션 오버레이): Mermaid 출력에 미묘한 모션(예: charge, laser, pulse)을 레이어해 시퀀스/방향을 명확히 합니다.
• 문서·발표 자료용 내보내기: SVG와 PNG 내보내기. Pro에서 4× PNG 내보내기 지원하며, SVG는 화면 보기용, PNG는 SVG 미지원 대상에 적합합니다.
• 툴바를 통한 캔버스 노드/라인 조정 (소스 그대로): 노드/라인 클릭 시 플로팅 툴바가 열리며 배경, 테두리, 선 색상/두께, 텍스트 색상을 조정; 사용자 지정은 다이어그램과 함께 저장·링크 공유 가능.

Beauty Diagram 사용법

1. 온라인 에디터를 열고 다이어그램 유형(Mermaid 또는 PlantUML)을 선택합니다 (draw.io 가져오기는 Pro로 명시).
2. 기존 Mermaid 또는 PlantUML 소스를 에디터에 붙여넣습니다.
3. Beautify를 사용해 포맷터 적용: 다이어그램 재레이아웃과 선택된 테마/스타일 규칙을 적용합니다.
4. 실시간 미리보기를 확인하고, 필요 시 노드/라인 툴바로 색상 조정, 테마 전환합니다.
5. 대상 워크플로(문서/발표 자료/리뷰)에 맞게 SVG 또는 PNG로 내보냅니다.

사용 사례

• Mermaid 플로우차트를 슬라이드용 그래픽으로 변환: Mermaid 코드를 붙여넣고 미화해 직교 그리드 라우팅과 발표 팔레트/타이포그래피를 적용한 후, SVG로 임베드 또는 고배율 보기용 내보내기.
• PlantUML 액티비티 다이어그램 압축 수정: 에디터 탭을 PlantUML로 전환해 액티비티 다이어그램 붙여넣고, 미화해 간격과 스윔레인/레이아웃을 정규화.
• 다양한 발표 맥락에서 단일 다이어그램 소스 유지: 테마 전환(modern/atlas/obsidian/atelier)을 사용해 동일 Mermaid 콘텐츠를 발표 자료, 문서 페이지, 다크 모드 README에 렌더링.
• 시각적 혼잡 줄여 다이어그램 가독성 향상: 결정 다이아몬드/브랜치가 그레이스케일 콘텐츠에서 돋보이는 원 액센트 팔레트 적용.
• draw.io 워크플로를 Mermaid 기반 포맷팅 파이프라인으로 가져오기 (Pro): .drawio 파일 또는 XML 내보내기를 가져와 Mermaid 소스로 파싱한 후, Mermaid 워크플로에서 편집/미화 계속.

자주 묻는 질문

Mermaid 플로우차트를 어떻게 보정하나요?
Mermaid 소스를 에디터에 붙여넣고 Beautify를 클릭한 후, 라이브 미리보기에서 재배치 및 스타일 변경을 확인하세요. 페이지에 따르면 원본 코드는 동일하게 유지되며, 렌더링 결과만 변경됩니다.

PlantUML 활동 다이어그램도 동일하게 개선할 수 있나요?
네. 페이지에 따르면 PlantUML 탭으로 전환해 활동 소스를 붙여넣고 Beautify를 클릭하면 수영레인 정렬과 기본 간격의 과밀함을 정규화합니다.

내보내기에서 SVG와 PNG의 차이는 무엇인가요?
사이트에 따르면 SVG는 화면 보기(문서/웹사이트/Figma 임베드)에 더 적합하며 확대/축소 시 선명함을 유지합니다. 반면 PNG는 PDF/인쇄 내보내기용 데크나 SVG를 지원하지 않는 도구에 유용합니다. 또한 Pro에서 4× PNG 내보내기를 언급합니다.

Beauty Diagram이 draw.io 파일을 가져올 수 있나요?
네, 하지만 Pro 기능입니다: .drawio 또는 XML 내보내기를 에디터에 드롭하세요. 사이트에 따르면 플로우차트/시퀀스를 Mermaid 소스로 파싱해 후속 보정을 적용합니다.

이게 그냥 Mermaid Live 에디터 클론인가요?
페이지는 Mermaid Live와 명확히 대비하며, Beauty Diagram은 Mermaid 기본 출력을 후처리해 재배치, 간격, 타이포그래피, 팔레트 변경을 추가한다고 설명합니다. 기본 렌더링만 하는 것이 아닙니다.

대안

• Mermaid Live 에디터 (또는 다른 Mermaid 렌더러): Mermaid 구문의 라이브 렌더링에 유용하지만, 소스에 따르면 Beauty Diagram은 프레젠테이션급 레이아웃과 스타일링을 위한 기본 렌더러 후처리에 중점을 둡니다.
• 다이어그램 작성/화이트보드 도구 (예: 플로우차트 디자인 도구): 슬라이드 그래픽을 만들 수 있지만, 기존 Mermaid/PlantUML 소스 코드를 보정하는 대신 수동으로 다시 그려야 할 수 있습니다.
• 내보내기 지원 제네릭 다이어그램 도구: SVG/PNG 출력을 생성할 수 있지만, 그리기 중심 워크플로우이며 Mermaid/PlantUML 코드의 포맷팅/재배치가 아닙니다.
• draw.io 네이티브 내보내기 워크플로우: 다이어그램이 이미 draw.io에 있다면 내장 내보내기를 사용할 수 있습니다; Beauty Diagram의 가치는 Mermaid 워크플로우로 변환/가져온 후 보정 규칙을 적용하는 데 있다고 설명합니다.