설명
DiagramPreview는 문서, 티켓, 풀 리퀘스트 또는 사고 보고서에 포함되기 전에 다이어그램을 확인해야 하는 개발자, 제품 팀, 아키텍트 및 기술 작가를 위한 온라인 다이어그램 미리보기 및 변환 작업 공간입니다. 이 도구는 텍스트와 구조화된 데이터를 시각적 미리보기로 렌더링하여 쉽게 검사하고 공유하며 내보낼 수 있도록 하며, 미리보기 옆에 소스를 표시합니다.
이 작업 공간은 Mermaid, PlantUML, Markdown, Graphviz, D2, Draw.io XML, 마인드 맵, JSON 및 YAML을 포함한 다양한 개발자 지향 형식을 지원하며, Mermaid 또는 PlantUML을 편집 가능한 Draw.io XML로 변환하는 등의 작업을 수행할 수 있습니다. 또한 JSON Schema, Protobuf, GraphQL, SQL, DBML 및 Prisma와 같은 스키마 및 계약을 시각화하고, OpenAPI, Postman 및 HAR 트래픽을 백엔드 검토를 위한 시퀀스 및 오류 흐름 다이어그램으로 변환합니다.
다이어그램 외에도 Docker Compose, Terraform, CloudFormation, Kubernetes 매니페스트, GitHub Actions 및 Helm 값과 같은 DevOps 및 구성에 대한 단일 목적 유틸리티 세트를 포함하며, 자연어 또는 노트에서 Mermaid, PlantUML 및 Draw.io를 생성하는 AI 지원 생성기도 제공합니다.
대부분의 렌더링은 브라우저에서 로컬로 실행되어 초안이 빠르고 비공개로 유지되며, AI 지원 생성기는 서버 측 API를 사용하여 제공자 키가 노출되지 않도록 합니다. 지원되는 렌더러는 작업 공간 도구 모음에서 SVG, PNG 및 인쇄 스타일 PDF를 내보냅니다.
DiagramPreview의 핵심 기능
Mermaid, PlantUML, Graphviz, D2 및 Draw.io 다이어그램의 실시간 미리보기
Mermaid, PlantUML 및 편집 가능한 Draw.io XML 간의 변환
JSON Schema, SQL, DBML, GraphQL 및 Prisma에 대한 스키마 시각화
OpenAPI, Postman 및 HAR에서 API 시퀀스 및 오류 흐름 다이어그램
Docker, Kubernetes, Terraform 및 GitHub Actions에 대한 DevOps 구성 시각화
자연어 또는 노트에서 다이어그램을 생성하는 AI 지원 기능
가능한 경우 로컬에서 실행되는 브라우저 우선 렌더링
도구 모음에서 SVG, PNG 및 PDF로 내보내기
DiagramPreview 사용 방법은?
도구 선택: Mermaid Preview 또는 Mermaid to Draw.io와 같은 미리보기 또는 변환기를 선택합니다.
소스 붙여넣기: 다이어그램 텍스트, 스키마, API 계약 또는 구성을 추가합니다.
미리보기: 렌더링된 다이어그램을 소스 옆에서 검토하고 구문 문제를 수정합니다.
필요시 변환: Mermaid에서 편집 가능한 Draw.io XML로 형식을 이동합니다.
내보내기: SVG, PNG 또는 PDF를 README, 풀 리퀘스트 또는 아키텍처 문서로 전송합니다.
DiagramPreview의 사용 사례
- AI Mermaid 검토
- API 디버깅
- 스키마 시각화
- DevOps 구성 검토
- 문서 준비





