SourceCanvas
튜토리얼 보기 App Store

SourceCanvas

코드로 다이어그램을 쉽게 그리기

플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, ER 다이어그램, 간트 차트, 타임라인, 마인드맵을 코드로 작성하고 결과를 옆에서 확인합니다. SourceCanvas는 다이어그램 작성, 학습, 저장, PNG/PDF 내보내기를 편하게 만듭니다.

튜토리얼 보기 기능 보기 App Store
  • 쓰면서 바로 확인
  • 여러 다이어그램 학습
  • Mac, iPad, iPhone, Apple Vision Pro 지원
SourceCanvas Mac 와이드 미리보기 스크린샷

핵심 기능

다이어그램 작성법을 배우는 단계부터 문서용 그래픽을 완성하는 단계까지, 코드로 그리는 작업을 한 화면에서 처리합니다.

코드로 다이어그램 작성

플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 간트 차트, 마인드맵 등을 작성하며 결과를 바로 확인합니다.

Mermaid 다이어그램 학습

읽기 쉬운 예제를 바꾸면서 노드, 연결, 참여자, 타임라인, 작업 구간, 다이어그램 구조를 배웁니다.

넓은 다이어그램 범위

흐름과 구조, 프로젝트 계획, 지식 정리, 데이터 차트, 특수 목적 다이어그램을 다룹니다.

소스 열기와 저장

.svg, .mmd, .mermaid 파일을 열고 다이어그램 소스를 프로젝트나 문서 저장소에 유지합니다.

줌, 배경, 내보내기

핀치 줌과 배경 선택으로 세부를 확인하고 PNG 1x, PNG 2x, PNG 3x 또는 PDF로 내보냅니다.

SourceCanvas 활용 방식

다이어그램 작성법을 배우는 단계부터 문서용 그림을 완성하는 단계까지 작성, 미리보기, 저장, 내보내기를 하나의 흐름에서 처리합니다.

예제로 학습

플로우차트, 시퀀스 다이어그램, 간트 차트, 마인드맵 같은 익숙한 그림부터 시작해 소스를 바꾸며 구조를 이해할 수 있습니다.

작성하며 결과 확인

소스와 미리보기를 나란히 두고 노드, 연결선, 작업 기간, 그룹 변경을 바로 확인합니다.

여러 기기에서 그리기

Mac은 키보드 입력에, iPad와 iPhone은 터치 검토에, Apple Vision Pro는 큰 다이어그램 확인에 적합합니다.

소스 저장 또는 내보내기

.mmd, .mermaid, .svg 소스를 저장하거나 PNG 1x, PNG 2x, PNG 3x, PDF로 내보낼 수 있습니다.

작성할 수 있는 Mermaid 다이어그램

SourceCanvas는 읽기 쉬운 코드를 유용한 다이어그램으로 바꾸는 데 집중합니다. 익숙한 다이어그램 이름으로 시작해 필요한 스타일을 차근차근 배울 수 있습니다.

흐름과 구조

  • 플로우차트 / 그래프
  • 시퀀스 다이어그램
  • 클래스 다이어그램
  • 상태 다이어그램
  • ER 다이어그램
  • 요구사항 다이어그램
  • C4 아키텍처 다이어그램

계획과 지식

  • 간트 차트
  • Git 그래프
  • 사용자 여정
  • 타임라인
  • 마인드맵
  • 칸반 보드
  • 아키텍처 다이어그램
  • 이벤트 모델링 다이어그램

데이터와 분석

  • 파이 차트
  • 사분면 차트
  • XY 차트
  • 생키 차트
  • 레이더 차트
  • 트리맵
  • 정보 다이어그램

특수 다이어그램

  • 패킷 다이어그램
  • 블록 다이어그램
  • 트리 보기
  • 이시카와 다이어그램
  • 벤 다이어그램
  • Wardley 맵

일부 새로운 다이어그램 스타일은 계속 발전할 수 있습니다. 플로우차트, 시퀀스 다이어그램, 간트 차트, 마인드맵부터 시작하기 좋습니다.

코드로 그리기 튜토리얼

다이어그램 코드를 쓰고, 모드를 선택하고, 결과를 확인한 뒤 저장하거나 내보내는 네 단계로 진행합니다.

다이어그램 코드를 쓰거나 로컬 파일 열기

플로우차트, 시퀀스 다이어그램, 간트 차트, 마인드맵 등 다이어그램 코드를 편집기에 씁니다. .svg, .mmd, .mermaid 파일도 직접 열 수 있습니다.

  • 예제로 Mermaid 다이어그램을 배우기에 좋습니다.
  • 문서 프로젝트의 플로우차트와 아키텍처 다이어그램을 유지할 수 있습니다.
  • macOS는 드래그 앤 드롭을 지원하며 iOS / iPadOS / visionOS는 시스템 파일 진입점을 사용합니다.
SourceCanvas SVG 미리보기 작업 화면
튜토리얼은 붙여넣기, 파일 열기, 모드 전환, 확대 확인, 내보내기를 다룹니다.

지원 플랫폼

하나의 미리보기 흐름이 데스크톱, 터치 화면, 공간 컴퓨팅 기기에 맞춰 화면 크기별 레이아웃으로 조정됩니다.

Mac: 키보드 중심의 넓은 작업 공간

가로 화면에서는 소스와 미리보기를 나란히 유지해 개발, 문서, 디자인 도구 사이에서 빠르게 검토할 수 있습니다.

SourceCanvas Mac 와이드 미리보기 스크린샷

코드 그리기와 다이어그램 학습에 적합

SourceCanvas는 다이어그램 편집, Mermaid 다이어그램 학습, 플로우차트 작성, 문서 그래픽, 소스 저장, PNG/PDF 내보내기에 집중합니다.

다이어그램 편집기

플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 간트 차트, 마인드맵, 타임라인을 코드로 쓰며 결과를 봅니다.

Mermaid 다이어그램 학습

읽기 쉬운 예제로 노드, 연결, 분기, 참여자, 작업 구간, 다이어그램 구조를 이해합니다.

문서 작성

제품 흐름, 시스템 설계, 프로젝트 계획, 지식 구조를 유지하기 쉬운 다이어그램 소스로 만듭니다.

SVG와 시각 자료

SVG 마크업, 아이콘, 일러스트, 벡터 점검을 다이어그램 작업 흐름과 함께 둡니다.

PNG/PDF 내보내기

완성한 다이어그램을 PNG 1x, 2x, 3x 또는 PDF로 내보내 문서, 리뷰, 학습 자료, 보관에 사용합니다.

FAQ

SVG, Mermaid, 파일 형식, 개인정보, 내보내기에 대한 빠른 답변입니다.

SourceCanvas는 무료인가요?

이 사이트는 가벼운 로컬 미리보기 도구의 기능을 소개합니다. 실제 가격과 출시 상태는 App Store 페이지에서 확인해야 합니다.

SourceCanvas가 내 파일을 업로드하나요?

앱은 로컬 미리보기 도구로 설계되었으며 핵심 SVG와 Mermaid 렌더링은 원격 렌더링 서비스에 의존하지 않습니다. 최종 개인정보 설명은 출시 버전과 개인정보 처리방침을 기준으로 확인해야 합니다.

어떤 파일 형식을 지원하나요?

SVG, Mermaid 소스, Markdown Mermaid 코드 블록을 붙여 넣을 수 있고 .svg, .mmd, .mermaid 파일을 열 수 있습니다.

Mermaid 배경을 바꿀 수 있는 이유는 무엇인가요?

문서와 디자인 상황마다 배경색이 다릅니다. 투명, 흰색, 종이, 미스트, 어두운 배경은 대비와 경계 문제를 더 일찍 찾는 데 도움이 됩니다.

PNG와 PDF 내보내기는 어디에 쓰나요?

PNG는 문서, 티켓, 채팅 도구에 붙여 넣기 좋고 PDF는 보관, 리뷰, 벡터 친화 문서 흐름에 적합합니다.

iOS 저장과 내보내기는 무엇이 바뀌었나요?

소스 저장은 시스템 파일 패널을 엽니다. 내보내기는 PNG 1x, PNG 2x, PNG 3x, PDF로 표시되어 출력 배율을 명확히 알 수 있습니다.

팀에서 사용하기에 적합한가요?

로컬 에셋과 다이어그램을 빠르게 확인해야 하는 팀에 적합합니다. 특히 프론트엔드 개발, 디자인 QA, 제품 문서, 기술 문서 흐름에 잘 맞습니다.