SciFig
무료로 시작하기

무료 Mermaid PNG 변환 도구

Mermaid 코드를 붙여 넣고 브라우저에서 다이어그램을 렌더링한 뒤 PNG나 SVG로 다운로드하세요. 텍스트, 화살표, 그룹을 하나의 이미지에 담아 코드 편집기 없이도 공유할 수 있습니다.

위 입력란에 원하는 내용을 설명해 주세요.

시작 시 무료 크레딧 최대 150개|신용카드 필요 없음

초대 링크로 가입하면 첫날 무료 크레딧을 최대 350개 받을 수 있습니다.

3가지 그림 엔진 · 500개 이상의 템플릿모든 라벨 편집 가능 · 60가지 이상의 배색편집 가능한 PPTX · 레이어드 SVG · 8K PNG / JPG

무료 Mermaid PNG 변환 도구— 템플릿과 예시

업데이트

Mermaid 다이어그램 도구

무료 Mermaid PNG 변환 도구

다이어그램 코드를 선명한 이미지로 바꾸고 배경과 출력 배율을 선택하세요.

Mermaid PNG 변환은 텍스트로 작성한 다이어그램 코드를 문서와 슬라이드에 넣을 수 있는 래스터 이미지로 바꾸는 작업입니다. Mermaid 코드를 붙여 넣고 브라우저에서 다이어그램을 렌더링한 뒤 PNG나 SVG로 다운로드하세요. 텍스트, 화살표, 그룹을 하나의 이미지에 담아 코드 편집기 없이도 공유할 수 있습니다.

Mermaid 다이어그램 만들기
연구 질문, 실험, 분석 및 연구 그림을 순서대로 연결한 Mermaid 흐름도
  • 다이어그램 코드 붙여 넣기
  • 출력 배율 선택
  • 투명 배경 사용
  • 렌더링한 SVG 내보내기

Mermaid 변환 도구의 기능

다이어그램 코드를 선명한 이미지로 바꾸고 배경과 출력 배율을 선택하세요.

Mermaid 코드로 다이어그램 렌더링

기존 소스로 시작해 노드, 관계, 라벨을 미리보기에서 확인하세요. 그림은 소스에 작성한 내용을 바탕으로 렌더링되며 그 구조를 유지합니다. 순서도, 시퀀스 다이어그램, 클래스 다이어그램으로 텍스트 설명을 문서용 그림으로 바꿀 수 있습니다.

  • 다이어그램 코드 붙여 넣기
  • 연결된 노드와 라벨 확인
  • 서브그래프와 관계 유지
Mermaid 코드 렌더링

선명한 PNG 이미지 내보내기

슬라이드나 문서에 배치할 크기에 맞춰 출력 배율을 선택하면 라벨을 읽기 쉽게 만들 수 있습니다. PNG는 이미지를 지원하지만 Mermaid를 실행하지 못하는 곳에서도 사용할 수 있습니다. 도형과 텍스트가 함께 저장되므로 공동 작업자에게도 원래 의미를 온전히 전달할 수 있습니다.

  • 출력 배율 선택
  • 전체 다이어그램 범위 유지
  • 슬라이드에 래스터 이미지 사용
PNG 준비하기

다이어그램 배경 선택

투명 배경은 색이 있는 슬라이드에 겹쳐 쓰기 좋고, 흰색 배경은 그림 자체에 별도의 바탕을 제공합니다. 배치할 위치에 맞게 선택하세요. 배경 설정은 내보내는 이미지에 적용되며 다이어그램 구조와 내용은 그대로 유지됩니다.

  • 투명 배경 사용
  • 흰색 배경 선택
  • 슬라이드에 결과 배치
배경 설정

PNG와 함께 벡터 버전 보관

확대해서 쓸 다이어그램에는 SVG를 선택해 선과 텍스트를 벡터 형식으로 보관하세요. 일상적인 문서에는 PNG가 편리합니다. 두 형식 모두 같은 Mermaid 소스를 렌더링한 결과이므로 공유용 이미지와 그 이미지를 만든 코드를 함께 관리할 수 있습니다.

  • 렌더링한 SVG 내보내기
  • 벡터 선 유지
  • 소스와 결과 함께 보관
Mermaid 다이어그램 내보내기

다이어그램 만드는 방법

페이지 안의 도구로 Mermaid 다이어그램을 준비하고 결과를 저장하세요.

  1. Mermaid 소스 붙여 넣기

    변환 도구에 다이어그램 코드를 붙여 넣으세요. 지원하는 순서도, 시퀀스 다이어그램, 클래스 다이어그램 중 하나로 시작할 수 있습니다. 최종 이미지에 필요한 라벨과 관계를 코드에 적으면 그 내용이 렌더링할 구조를 결정합니다.

  2. 다이어그램 렌더링

    미리보기를 실행해 코드의 노드, 그룹, 연결을 확인하세요. 문법 오류가 있으면 표시된 오류와 소스를 확인해 수정한 다음 다시 렌더링하면 됩니다.

  3. 배경과 출력 배율 선택

    이미지를 배치할 곳에 맞춰 배경과 출력 배율을 선택하세요. 색이 있는 슬라이드에는 투명 배경이, 독립적인 이미지에는 흰색 배경이 적합합니다. PNG 배율을 높이면 비율을 유지하면서 라벨에 쓰이는 픽셀 수를 늘릴 수 있습니다.

  4. PNG·SVG 다운로드

    슬라이드, 보고서, 문서에는 PNG를, 같은 다이어그램의 벡터 버전에는 SVG를 선택하세요. Mermaid 소스를 함께 보관하면 나중에 구조를 바꿀 때 원래 코드에서 작업을 이어 갈 수 있습니다.

Mermaid 다이어그램 활용 사례

텍스트 설명을 라벨이 있는 다이어그램으로 옮겨 관계를 눈으로 이해하도록 도와줍니다.

연구 질문, 실험, 분석 및 연구 그림을 순서대로 연결한 Mermaid 흐름도

보고서에 작업 흐름 넣기

방법 보고서에 Mermaid로 작성한 프로세스 코드가 있다면 PNG로 변환해 보세요. 독자는 코드 편집기를 열지 않아도 분기점을 확인할 수 있습니다. 문서와 함께 그림을 보관하고 절차가 바뀌면 다시 생성할 수 있습니다.

이 예시 살펴보기
연구자의 소스 입력, 도식 미리보기 및 PNG 내보내기를 보여 주는 Mermaid 시퀀스 다이어그램

공동 작업자와 시퀀스 공유

각 메시지를 누가 보내는지 시퀀스 다이어그램으로 설명하세요. 코드를 렌더링해 전체 상호작용을 내보내면 팀 토의에 쓸 수 있습니다. 정적인 이미지라 Mermaid 연동 기능이 없는 발표 자료나 회의 문서에서도 순서를 보여 줄 수 있습니다.

이 예시 살펴보기
Experiment와 Figure 클래스의 필드, 메서드 및 관계를 보여 주는 Mermaid 클래스 다이어그램

클래스 관계 문서화

기술 부록에는 소스 코드 화면보다 클래스 다이어그램이 적합할 수 있습니다. Mermaid의 관계, 라벨, 구획을 렌더링하고 확대해서 쓸 SVG나 래스터 이미지를 받는 문서용 PNG로 저장하세요.

이 예시 살펴보기
소스, 투명 PNG 단계 및 슬라이드 배경을 연결한 Mermaid 흐름도

슬라이드에 맞게 다이어그램 배치

투명 PNG를 슬라이드 배경 위에 놓고 라벨과 화살표를 그대로 사용하세요. 그림이 슬라이드의 큰 부분을 차지하면 출력 배율을 높일 수 있습니다. 구조를 바꿀 때는 원래 코드를 수정해 새 이미지를 만드세요.

이 예시 살펴보기
시료 준비 하위 그래프를 반응 측정 및 실험 조건 비교와 연결한 Mermaid 작업 흐름

단계를 그룹으로 설명

서브그래프로 큰 작업 흐름 안의 관련 단계를 묶을 수 있습니다. 그룹 경계와 전체 라벨을 보존해 내보내면 독자가 개별 단계와 전체 흐름을 구분할 수 있습니다. 여러 팀이 참여하는 절차를 설명할 때도 유용합니다.

이 예시 살펴보기
연구 질문, 실험, 분석 및 연구 그림을 순서대로 연결한 Mermaid 흐름도

공유하기 편한 프로젝트 그림 보관

프로젝트 폴더에 Mermaid 소스와 PNG·SVG를 함께 보관하세요. 이미지는 일상적인 공유에 쓰고 소스에는 관계를 간결하게 남길 수 있습니다. 글로 설명한 새로운 프로세스 다이어그램이 필요하다면 SciFig FlowChart도 사용할 수 있습니다.

이 예시 살펴보기

연구자들의 SciFig 활용 이야기

방법 문서에 들어갈 작업 흐름을 Mermaid 파일로 관리하고 있었습니다. Mermaid를 PNG로 변환하니 다른 편집기 없이도 같은 판단 지점을 보고서에 넣을 수 있었습니다. 내보낸 이미지 옆에 코드를 함께 보관해서, 실험 절차가 바뀔 때 팀이 어디에서 흐름을 수정해야 하는지도 명확해졌습니다.

Lena W.

케임브리지대학교｜연구 소프트웨어 엔지니어

무료 도구

모든 과학 그림을 위한 도구

필요한 과학 그림에 맞춘 전용 생성기 120개 — 각각 알맞은 작업 공간에서 예시와 함께 열립니다.

일러스트레이션, 구조도와 개념도

도구 60개
분자 구조식 생성기 예시 그림분자 구조식 생성기그래픽 초록 제작기 예시 그림그래픽 초록 제작기자유물체도 생성기 예시 그림자유물체도 생성기회로도 생성기 예시 그림회로도 생성기AI 과학 이미지 생성기 예시 그림AI 과학 이미지 생성기편집 가능한 96웰 플레이트 예시 그림편집 가능한 96웰 플레이트루이스 구조식 생성기 예시 그림루이스 구조식 생성기DNA 구조도 생성기 예시 그림DNA 구조도 생성기배선도 작성 도구 예시 그림배선도 작성 도구배관계장도 작성 도구 예시 그림배관계장도 작성 도구학회 포스터 제작기 예시 그림학회 포스터 제작기분지도 제작기 예시 그림분지도 제작기먹이 그물 제작기 예시 그림먹이 그물 제작기의학 일러스트 생성기 예시 그림의학 일러스트 생성기PCR 다이어그램 생성기 예시 그림PCR 다이어그램 생성기PPT 텍스트 시각화 변환기 예시 그림PPT 텍스트 시각화 변환기체세포 분열 다이어그램 생성기 예시 그림체세포 분열 다이어그램 생성기AI 인포그래픽 생성기 예시 그림AI 인포그래픽 생성기해부도 생성기 예시 그림해부도 생성기동물 세포와 식물 세포 비교 예시 그림동물 세포와 식물 세포 비교동물 세포 다이어그램 생성기 예시 그림동물 세포 다이어그램 생성기항체 구조도 만들기 예시 그림항체 구조도 만들기세포자멸사 경로도 만들기 예시 그림세포자멸사 경로도 만들기세균 구조도 만들기 예시 그림세균 구조도 만들기청사진 제작기 예시 그림청사진 제작기보어 모형 제작기 예시 그림보어 모형 제작기캘빈 회로 다이어그램 생성기 예시 그림캘빈 회로 다이어그램 생성기탄소 순환 다이어그램 생성기 예시 그림탄소 순환 다이어그램 생성기세포 주기 다이어그램 생성기 예시 그림세포 주기 다이어그램 생성기세포 호흡 다이어그램 생성기 예시 그림세포 호흡 다이어그램 생성기보체계 경로도 만들기 예시 그림보체계 경로도 만들기CRISPR-Cas9 모식도 만들기 예시 그림CRISPR-Cas9 모식도 만들기DNA 복제 다이어그램 생성기 예시 그림DNA 복제 다이어그램 생성기전자 배치 다이어그램 생성기 예시 그림전자 배치 다이어그램 생성기전자전달계 다이어그램 생성기 예시 그림전자전달계 다이어그램 생성기유전자 발현 조절도 만들기 예시 그림유전자 발현 조절도 만들기해당과정 다이어그램 생성기 예시 그림해당과정 다이어그램 생성기이미지 SVG 변환기 예시 그림이미지 SVG 변환기면역 반응 모식도 만들기 예시 그림면역 반응 모식도 만들기시트르산 회로 다이어그램 생성기 예시 그림시트르산 회로 다이어그램 생성기실험 장치도 제작기 예시 그림실험 장치도 제작기감수분열 다이어그램 생성기 예시 그림감수분열 다이어그램 생성기분자 오비탈 다이어그램 생성기 예시 그림분자 오비탈 다이어그램 생성기질소 순환 다이어그램 생성기 예시 그림질소 순환 다이어그램 생성기가계도 제작기 예시 그림가계도 제작기인지질 구조도 생성기 예시 그림인지질 구조도 생성기인 순환 다이어그램 생성기 예시 그림인 순환 다이어그램 생성기광합성 다이어그램 생성기 예시 그림광합성 다이어그램 생성기계통수 제작기 예시 그림계통수 제작기물리 벡터 다이어그램 생성기 예시 그림물리 벡터 다이어그램 생성기식물 세포 다이어그램 생성기 예시 그림식물 세포 다이어그램 생성기단백질 합성 다이어그램 생성기 예시 그림단백질 합성 다이어그램 생성기퍼넷 방격 제작기 예시 그림퍼넷 방격 제작기광선도 제작기 예시 그림광선도 제작기논문 색상 팔레트 생성기 예시 그림논문 색상 팔레트 생성기신호 전달 경로도 만들기 예시 그림신호 전달 경로도 만들기단선 결선도 작성 도구 예시 그림단선 결선도 작성 도구T세포 활성화 모식도 만들기 예시 그림T세포 활성화 모식도 만들기물의 순환 다이어그램 생성기 예시 그림물의 순환 다이어그램 생성기웨스턴 블롯 다이어그램 생성기 예시 그림웨스턴 블롯 다이어그램 생성기

통계 그래프와 차트

도구 28개
보드 선도 생성기 예시 그림보드 선도 생성기거미줄 차트 제작기 예시 그림거미줄 차트 제작기카플란-마이어 생존 곡선 예시 그림카플란-마이어 생존 곡선다층 원형 차트 제작기 예시 그림다층 원형 차트 제작기종 모양 곡선 생성기 예시 그림종 모양 곡선 생성기간트 차트 생성기 예시 그림간트 차트 생성기상자 수염 그림 생성기 예시 그림상자 수염 그림 생성기포레스트 플롯 만들기 예시 그림포레스트 플롯 만들기볼케이노 플롯 생성기 예시 그림볼케이노 플롯 생성기파레토 차트 만들기 예시 그림파레토 차트 만들기산점도 제작기 예시 그림산점도 제작기히트맵 생성기 예시 그림히트맵 생성기AI 차트 생성기 예시 그림AI 차트 생성기비교 차트 제작기 예시 그림비교 차트 제작기생키 다이어그램 생성기 예시 그림생키 다이어그램 생성기레이더 차트 생성기 예시 그림레이더 차트 생성기히스토그램 제작기 예시 그림히스토그램 제작기막대그래프 만들기 예시 그림막대그래프 만들기좌표평면 생성기 예시 그림좌표평면 생성기점도표 만들기 예시 그림점도표 만들기IC50 계산 및 용량 반응 곡선 예시 그림IC50 계산 및 용량 반응 곡선DPI 계산기 예시 그림DPI 계산기횡파 다이어그램 생성기 예시 그림횡파 다이어그램 생성기꺾은선 그래프 만들기 예시 그림꺾은선 그래프 만들기수직선 생성기 예시 그림수직선 생성기그림 검사 예시 그림그림 검사수요·공급 곡선 생성기 예시 그림수요·공급 곡선 생성기폭포 차트 만들기 예시 그림폭포 차트 만들기

순서도, 프레임워크와 구조도

도구 32개
개념적 프레임워크 생성기 예시 그림개념적 프레임워크 생성기이론적 프레임워크 생성기 예시 그림이론적 프레임워크 생성기통사 트리 생성기 예시 그림통사 트리 생성기이분 검색표 제작기 예시 그림이분 검색표 제작기문장 도식 생성기 예시 그림문장 도식 생성기텍스트 다이어그램 생성기 예시 그림텍스트 다이어그램 생성기PRISMA 흐름도 생성기 예시 그림PRISMA 흐름도 생성기워크플로 다이어그램 만들기 예시 그림워크플로 다이어그램 만들기타임라인 생성기 예시 그림타임라인 생성기문헌 종합 매트릭스 예시 그림문헌 종합 매트릭스ER 다이어그램 생성기 예시 그림ER 다이어그램 생성기UML 다이어그램 생성기 예시 그림UML 다이어그램 생성기트리 다이어그램 생성기 예시 그림트리 다이어그램 생성기특성요인도 생성기 예시 그림특성요인도 생성기신경망 다이어그램 생성기 예시 그림신경망 다이어그램 생성기의사 결정 트리 생성기 예시 그림의사 결정 트리 생성기소프트웨어 아키텍처 다이어그램 생성기 예시 그림소프트웨어 아키텍처 다이어그램 생성기CONSORT 흐름도 생성기 예시 그림CONSORT 흐름도 생성기시스템 컨텍스트 다이어그램 만들기 예시 그림시스템 컨텍스트 다이어그램 만들기데이터 흐름도 생성기 예시 그림데이터 흐름도 생성기실험 순서도 만들기 예시 그림실험 순서도 만들기가계도 만들기 예시 그림가계도 만들기그래픽 조직자 생성기 예시 그림그래픽 조직자 생성기이미지 순서도 변환 예시 그림이미지 순서도 변환Mermaid PNG 변환 예시 그림Mermaid PNG 변환네트워크 다이어그램 생성기 예시 그림네트워크 다이어그램 생성기조직도 제작기 예시 그림조직도 제작기시퀀스 다이어그램 생성기 예시 그림시퀀스 다이어그램 생성기상태 다이어그램 생성기 예시 그림상태 다이어그램 생성기스윔레인 다이어그램 생성기 예시 그림스윔레인 다이어그램 생성기유스케이스 다이어그램 생성기 예시 그림유스케이스 다이어그램 생성기벤 다이어그램 생성기 예시 그림벤 다이어그램 생성기
모든 도구 보기 →

Mermaid 변환 자주 묻는 질문

1.

2.

3.

4.

5.

6.

콜투액션 배경

Mermaid 다이어그램

Mermaid 다이어그램 만들기

Mermaid 다이어그램 만들기

무료로 시작 · 신용카드 필요 없음 · 연구자를 위한 도구