# 코드가 아닌 파일을 사용한 작업

GitHub는 다양한 비 코드 파일 형식의 렌더링 및 확산을 지원합니다.

## 이미지 렌더링 및 확산

GitHub는 PNG, JPG, GIF, PSD, SVG를 비롯한 몇 가지 일반적인 이미지 형식을 표시할 수 있습니다. 단순히 표시하는 것 외에도 이러한 이미지 형식의 버전 간에 차이점을 비교하는 여러 가지 방법이 있습니다.

> \[!NOTE]
>
> * GitHub은(는) PSD 파일 간의 차이점 비교를 지원하지 않습니다.
> * Firefox 브라우저를 사용하는 경우 GitHub의 SVG가 렌더링되지 않을 수 있습니다.

### 이미지 보기

GitHub의 리포지토리에서 이미지를 직접 찾아 볼 수 있습니다.

SVG는 현재 인라인 스크립팅 또는 애니메이션을 지원하지 않습니다.

### 차이점 보기

[2-up](#2-up), [살짝 밀기](#swipe) 및 [어니언 스킨](#onion-skin)의 세 가지 모드로 이미지를 시각적으로 비교할 수 있습니다.

#### 2-up

**2-up**은 기본 모드입니다. 두 이미지를 빠르게 엿볼 수 있습니다. 또한 이미지의 크기가 버전 간에 변경된 경우 실제 차원 변경 내용이 표시됩니다. 이렇게 하면 자산이 더 높은 해상도로 업그레이드되는 경우와 같이 크기가 조정될 때 매우 분명합니다.

![2-업 모드에서 이미지 비교 화면을 보여주는 스크린샷입니다. 오른쪽의 더 큰 이미지는 녹색 윤곽선으로 표시됩니다. 왼쪽의 이미지는 빨간색 윤곽선으로 표시됩니다.](/assets/images/help/repository/images-2up-view.png)

#### 스와이프

**살짝 밀면** 이미지의 일부를 나란히 볼 수 있습니다. 색이 다른 버전 간에 이동되었는지 확실하지 않나요? 스와이프 슬라이더를 비교할 영역 위로 드래그하여 픽셀을 직접 비교해보세요.

![스와이프 모드에서 이미지의 차이점에 대한 스크린샷. 가운데 아래의 줄은 이미지를 녹색의 윤곽선이 있는 새 이미지와 빨간색의 윤곽선이 있는 이전 이미지로 나눕니다.](/assets/images/help/repository/images-swipe-view.png)

#### 어니언 스킨

**어니언 스킨**은 요소가 작고 눈에 띄기 어려운 양으로 이동할 때 정말 편리합니다. 아이콘이 2픽셀 왼쪽으로 이동했나요? 불투명도 슬라이더를 조금 줄여서 요소들이 움직이는지 살펴보세요.

## 3D 파일 뷰어

GitHub는 *.stl* 확장명을 사용하여 3D 파일을 호스트하고 렌더링할 수 있습니다.

GitHub에서 STL 파일을 직접 볼 때 다음을 수행할 수 있습니다.

* 모델을 클릭하여 끌어서 회전합니다.
* 마우스 오른쪽 버튼을 클릭하고 끌어서 화면을 이동합니다.
* 스크롤하여 확대 및 축소합니다.
* 다른 보기 모드를 클릭하여 보기를 변경합니다.

### 느린 성능 수정

뷰어 모서리에 "WebGL 기반 하드웨어 지원을 사용할 수 없음" 도구 설명과 함께 <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-info" aria-label="the info icon" role="img"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>이(가) 표시되면 브라우저에서 WebGL 기술을 사용할 수 없습니다.

WebGL은 컴퓨터의 하드웨어를 최대한 활용하는 데 필요합니다. WebGL을 사용하도록 설정된 상태로 제공되는 [Chrome](https://www.google.com/intl/en/chrome/browser/) 또는 [Firefox](https://www.mozilla.org/en-US/firefox/new/)와 같은 브라우저를 사용하는 것이 좋습니다.

### 오류: “표시할 수 없음”

모델이 잘못된 경우 GitHub 파일을 표시하지 못할 수 있습니다. 또한, 10MB보다 큰 파일은 너무 커서 GitHub이 표시할 수 없습니다.

### 모델을 다른 곳에 임베딩하기

인터넷의 다른 곳에 3D 파일을 표시하려면 이 템플릿을 수정하고 JavaScript를 지원하는 HTML 페이지에 배치합니다.

```html
<script src="https://embed.github.com/view/3d/<username>/<repo>/<ref>/<path_to_file>"></script>
```

예를 들어 모델의 URL이 [`github.com/skalnik/secret-bear-clip/blob/master/stl/clip.stl`](https://github.com/skalnik/secret-bear-clip/blob/master/stl/clip.stl)인 경우 포함 코드는 다음과 같습니다.

```html
<script src="https://embed.github.com/view/3d/skalnik/secret-bear-clip/master/stl/clip.stl"></script>
```

기본적으로 포함된 렌더러는 너비가 420픽셀, 높이가 620픽셀이지만 높이 및 너비 변수를 URL 끝에 매개 변수로 전달하여 출력을 사용자 지정할 수 있습니다(예: `?height=300&width=500`).

> \[!NOTE]
> `ref`는 개별 커밋에 대한 분기 또는 해시일 수 있습니다(예: `2391ae`).

### Markdown의 렌더링

Markdown에 ASCII STL 구문을 직접 포함할 수 있습니다. 자세한 내용은 [다이어그램 만들기](/ko/enterprise-server@3.22/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-stl-3d-models)을(를) 참조하세요.

## CSV 및 TSV 데이터 렌더링

GitHub은(는) *.csv*(쉼표로 구분) 및 *tsv*(탭으로 구분된) 파일 형식의 테이블 형식 데이터 렌더링을 지원합니다.

![테이블 형식으로 표시된 데이터가 있는 렌더링된 CSV 파일의 스크린샷.](/assets/images/help/repository/rendered-csv.png)

볼 때는 GitHub의 리포지토리에 커밋된 모든 *.csv* 또는 *.tsv* 파일이 자동으로 대화형 테이블로 렌더링되고 헤더 및 행 번호 매기기가 완료됩니다. 기본적으로 첫 번째 행은 항상 헤더 행이라고 가정합니다.

행 번호를 클릭하여 특정 행에 연결하거나 Shift 키를 누른 상태로 여러 행을 선택할 수 있습니다. URL을 복사하여 친구에게 보내기만 하면 됩니다.

### 데이터 검색

데이터 세트에서 특정 값을 찾으려면 파일 바로 위에 있는 검색 창에 입력하기 시작하면 됩니다. 행은 자동으로 필터링됩니다.

### 오류 처리

경우에 따라 CSV 또는 TSV 파일이 렌더링되지 않는 것을 발견할 수 있습니다. 이러한 경우 메시지가 원시 텍스트의 위에 표시되며 오류가 무엇인지 알 수 있습니다.

![CSV 파일의 텍스트 보기 스크린샷. 헤더에서 메시지는 "줄 0에 있는 이 CSV 파일에 쉼표가 없음"이라는 오류를 가리킵니다.](/assets/images/help/repository/csv-render-error.png)

일반적인 오류는 다음과 같습니다.

* 열 수가 일치하지 않습니다. 셀이 비어 있더라도 각 행에 동일한 수의 구분 기호가 있어야 합니다.
* 파일 크기를 초과합니다. 렌더링은 최대 512KB의 파일에 대해서만 작동합니다. 그보다 더 큰 파일을 사용하면 브라우저가 느려집니다.
* 쉼표 대신 세미콜론과 같은 지원되지 않는 구분 기호 사용.

## PDF 문서 렌더링

GitHub은(는) PDF 문서 렌더링을 지원합니다.

현재 PDF 내의 링크는 무시됩니다.

## 산문 문서의 렌더링 차이점

산문 문서를 포함하는 커밋 및 끌어오기 요청은 *원본* 및 *렌더링된* 뷰를 사용하여 해당 문서를 나타낼 수 있습니다.

원본 뷰에는 입력된 원시 텍스트가 표시되고 렌더링된 보기는 GitHub에 렌더링되면 해당 텍스트가 어떻게 표시되는지 보여 줍니다. 예를 들어 Markdown에서 `**bold**` 표시와 렌더링된 보기의 **굵게** 표시 간에 차이가 있을 수 있습니다.

산문 렌더링은 [github/markup](https://github.com/github/markup)에서 지원하는 렌더링된 문서에 대해 지원됩니다.

* Markdown
* AsciiDoc
* 섬유
* ReStructuredText (리스트럭처드텍스트)
* Rdoc
* 조직
* 크리올
* MediaWiki
* Pod

커밋의 일부로 문서의 변경 내용을 확인하려면 <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-file" aria-label="Display the rich diff" role="img"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg>을(를) 클릭하세요.

![Markdown 파일의 Diff 스크린샷. 파일의 머리글에서 파일 아이콘은 진한 주황색으로 표시됩니다.](/assets/images/help/repository/rendered-prose-diff.png)

"리치 디프"는 추가 및 제거된 코드를 강조합니다.

![Markdown 파일의 Diff 스크린샷. 이전 텍스트 “@octo-org/core”는 빨간색 배경으로 표시됩니다. 새 텍스트의 배경은 녹색입니다.](/assets/images/help/repository/rendered-prose-changes.png)

### Markdown 렌더링 사용 안 함

Markdown 파일을 볼 때 파일 위쪽의 **Code**를 클릭하여 Markdown 렌더링을 사용하지 않도록 설정하고 대신 파일의 원본을 볼 수 있습니다.

![파일과 상호 작용하기 위한 옵션을 보여 주는 리포지토리의 Markdown 파일 스크린샷 "코드"라는 레이블이 지정된 버튼은 진한 주황색으로 표시됩니다.](/assets/images/help/writing/display-markdown-as-source-global-nav-update.png)

Markdown 렌더링을 사용하지 않도록 설정하면 렌더링된 Markdown 파일을 볼 때 사용할 수 없는 줄 연결과 같은 원본 보기 기능을 사용할 수 있습니다.

### 특성 변경 시각화

단어와 달리 렌더링된 문서에 표시되지 않는 특성의 변경 내용을 설명하는 도구 설명을 제공합니다. 예를 들어 링크 URL이 한 웹 사이트에서 다른 웹 사이트로 변경되는 경우 다음과 같은 도구 설명을 표시합니다. “href: /octo-org-repo/blob/CONTRIBUTING -> /octo-org/octo-repo/blob/docs/CONTRIBUTING.”

![Markdown 파일의 Diff 스크린샷. “CONTRIBUTING 파일” 링크의 도구 설명에는 위 예제의 URL 변경 내용이 포함되어 있습니다.](/assets/images/help/repository/prose-diff-attributes.png)

### 변경 내용에 대한 주석 달기

[커밋 주석](/ko/enterprise-server@3.22/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request)은 한 줄 단위로 *원본* 뷰 내의 파일에만 추가할 수 있습니다.

### 헤더로 링크

[렌더링된 다른 산문 문서](/ko/enterprise-server@3.22/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes)와 마찬가지로 문서의 헤더 위로 마우스를 가져가면 링크 아이콘이 만들어집니다. 렌더링된 산문 diff의 판독기를 특정 섹션에 연결할 수 있습니다.

### 복잡한 diff 보기

일부 끌어오기 요청에는 크고 복잡한 문서가 있는 많은 변경 내용이 포함됩니다. 변경 내용을 분석하는 데 시간이 너무 오래 걸리면 GitHub에서 렌더링된 변경 내용 보기를 항상 생성할 수 없습니다. 이 경우 렌더링된 단추를 클릭하면 오류 메시지가 표시됩니다.

원본 뷰를 사용하여 변경 내용을 분석하고 주석을 달 수 있습니다.

### HTML 요소 보기

HTML 문서에 대한 커밋의 렌더링된 보기를 직접 지원하지 않습니다. Markdown과 같은 일부 형식을 사용하여 문서에 임의의 HTML을 포함할 수 있습니다. 이러한 문서가 GitHub에 표시되면 포함된 HTML 중 일부는 미리 보기에 표시될 수 있지만 일부(예: 포함된 YouTube 동영상)는 표시할 수 없습니다.

일반적으로 포함된 HTML이 포함된 문서의 변경 내용을 렌더링하면 GitHub의 문서 보기에서 지원되는 요소의 변경 내용이 표시됩니다. 완성도를 위해 포함된 HTML이 있는 문서의 변경 내용을 렌더링된 뷰와 원본 뷰 모두에서 항상 검토해야 합니다.

## GitHub에서 GeoJSON/TopoJSON 파일 매핑

GitHub는 GitHub 리포지토리 내에서 GeoJSON 및 TopoJSON 맵 파일 렌더링을 지원합니다. 일반적으로 `.geojson` 또는 `.topojson` 확장명을 사용하는 것처럼 파일을 커밋하기만 하면 됩니다. 확장명이 `.json`인 파일도 지원되지만, `type`이 `FeatureCollection`, `GeometryCollection` 또는 `topology`로 설정된 경우에만 지원됩니다. 그런 다음 GitHub에서 GeoJSON/TopoJSON 파일의 경로로 이동합니다.

### 기하 도형 유형

GitHub의 맵은 [Leaflet.js](http://leafletjs.com)를 사용하고 [geoJSON 사양](http://www.geojson.org/geojson-spec.html)(Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon 및 GeometryCollection)에 설명된 모든 기하 도형 유형을 지원합니다. TopoJSON 파일은 “토폴로지” 형식이어야 하며 [TopoJSON 사양](https://github.com/mbostock/topojson/wiki/Specification)을 준수해야 합니다.

### 스타일 지정 기능

GeoJSON 개체의 속성 내에서 추가 메타데이터를 전달하여 특정 색을 지정하거나 설명 아이콘을 추가하는 등 기능이 표시되는 방식을 사용자 지정할 수 있습니다. 옵션은 다음과 같습니다.

* `marker-size`

- `small`, `medium` 또는 `large`

* `marker-color` - 유효한 RGB 16진수 색
* `marker-symbol` - [Maki 프로젝트](https://mapbox.com/maki/)의 아이콘 ID 또는 단일 영숫자 문자(a-z 또는 0-9)
* `stroke` - 다각형 가장자리 또는 선 색(RGB)
* `stroke-opacity` - 다각형 가장자리 또는 선의 불투명도(0.0 - 1.0)
* `stroke-width` - 다각형 가장자리 또는 선의 너비
* `fill` - 다각형 내부의 색(색상은 GRB로 표시됨)
* `fill-opacity` - 다각형 내부 불투명도(0.0-1.0)

자세한 내용은 [개방형 단순 스타일 사양 버전 1.1.0](https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0)을 참조하세요.

### 다른 곳에 맵 포함

GitHub가 아닌 다른 곳에서 GeoJSON 맵을 사용할 수 있도록 하고 싶으신가요? 이 템플릿을 수정하고 JavaScript (예: [GitHub Pages](https://pages.github.com))를 지원하는 HTML 페이지에 배치하기만 하면 됩니다.

```html
<script src="https://embed.github.com/view/geojson/<username>/<repo>/<ref>/<path_to_file>"></script>
```

예를 들어 맵의 URL이 [github.com/benbalter/dc-wifi-social/blob/master/bars.geojson](https://github.com/benbalter/dc-wifi-social/blob/master/bars.geojson)인 경우 포함 코드는 다음과 같습니다.

```html
<script src="https://embed.github.com/view/geojson/benbalter/dc-wifi-social/master/bars.geojson"></script>
```

기본적으로 포함된 맵은 420px x 620px이지만 끝에 높이 및 너비 변수를 매개 변수(예: `?height=300&width=500`)로 전달하여 출력을 사용자 지정할 수 있습니다.

> \[!NOTE]
> `ref`는 개별 커밋에 대한 분기 또는 해시일 수 있습니다(예: `2391ae`).

### Markdown의 매핑

Markdown에서 GeoJSON 및 TopoJSON을 직접 포함할 수 있습니다. 자세한 내용은 [다이어그램 만들기](/ko/enterprise-server@3.22/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-geojson-and-topojson-maps)을(를) 참조하세요.

대화형 맵을 표시하려면 사이트 관리자가 해당 기능을 GitHub Enterprise Server 인스턴스구성해야 합니다. 자세한 내용은 [대화형 맵 구성](/ko/enterprise-server@3.22/admin/configuring-settings/configuring-user-applications-for-your-enterprise/configuring-interactive-maps)을(를) 참조하세요.

### 군집화

지도에 많은 수의 표식(약 750개 이상)이 포함된 경우 GitHub 더 높은 확대/축소 수준에서 주변 마커를 자동으로 클러스터합니다. 클러스터를 클릭하거나 확대하면 개별 표식이 표시됩니다.

### 기본 맵과 관련이 있음

기본 맵 데이터(거리 이름, 도로 등)는 세계의 편집 가능한 무료 맵을 만드는 공동 프로젝트인 [OpenStreetMap](http://www.openstreetmap.org/)에 의해 구동됩니다. 오픈 소스 때문에 뭔가 옳지 않다는 것을 알게 되면 [등록](https://www.openstreetmap.org/user/new)하고 수정 사항을 제출하기만 하면 됩니다.

### GeoJSON/TopoJSON 파일 문제 해결

GeoJSON 파일을 렌더링하는 데 문제가 있는 경우 [GeoJSON Linter](http://geojsonlint.com/)를 통해 실행하여 유효한 GeoJSON 파일이 있는지 확인합니다. 포인트가 예상대로 표시되지 않는 경우 (예: 바다 한가운데) 데이터가 현재 지원되지 않는 프로젝션에 있을 수 있습니다. 현재 GitHub는 `urn:ogc:def:crs:OGC:1.3:CRS84` 프로젝션만 지원합니다.

또한 `.geojson` 파일이 특히 큰 경우(10MB 이상) 브라우저 내에서 렌더링할 수 없습니다. 이 경우 일반적으로 큰 파일을 표시할 수 없다는 메시지가 표시됩니다.

`.geojson`파일을 [TopoJSON](https://github.com/mbostock/topojson)으로 변환하여 데이터를 렌더링할 수 있으며, 경우에 따라 파일 크기를 최대 80%까지 줄일 수 있는 압축 형식입니다. 물론 항상 파일을 더 작은 청크(예: 상태 또는 연도별)로 분할하고 리포지토리 내에 여러 파일로 데이터를 저장할 수 있습니다.

### GeoJSON/TopoJSON에 대한 추가 정보

* [Leaflet.js 설명서](https://leafletjs.com/)
* [MapBox 표식 스타일 지정 설명서](http://www.mapbox.com/developers/simplestyle/)
* [TopoJSON Wiki](https://github.com/mbostock/topojson/wiki)

## GitHub에서 Jupyter Notebook 파일 작업

GitHub에 *.ipynb* 확장명의 Jupyter Notebook 또는 IPython Notebook 파일을 추가하면 리포지토리에서 정적 HTML 파일로 렌더링됩니다.

사용자 지정 JavaScript 플롯과 같은 Notebook의 대화형 기능은 GitHub의 리포지토리에서 작동하지 않습니다. 예를 들어 [*링킹 및 상호작용.ipynb*](https://github.com/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb)를 참조하세요.

JavaScript 콘텐츠가 렌더링된 Jupyter Notebook을 보거나 Notebook 파일을 다른 사용자와 공유하려면 [nbviewer](https://nbviewer.jupyter.org/)를 사용하면 됩니다. 예를 들어 nbviewer에서 렌더링된 [*링킹 및 상호작용.ipynb*](https://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb)를 참조하세요.

Jupyter Notebook 완전히 대화형 버전을 보려면 Notebook 서버를 로컬로 설정할 수 있습니다. 자세한 내용은 [Jupyter 공식 설명서](http://jupyter.readthedocs.io/en/latest/index.html)를 참조하세요.

### Jupyter Notebook 파일 문제 해결

정적 HTML에서 Jupyter Notebook 파일을 렌더링하는 데 문제가 있는 경우 [`nbconvert` 명령](https://github.com/jupyter/nbconvert)을 사용하여 명령줄에서 파일을 로컬로 변환할 수 있습니다.

```shell
jupyter nbconvert --to html NOTEBOOK-NAME.ipynb
```

### Jupyter Notebook 대한 추가 읽기

* [Jupyter Notebook GitHub 리포지토리](https://github.com/jupyter/jupyter_notebook)
* [주피터 노트북 갤러리](https://github.com/jupyter/jupyter/wiki)

## GitHub에 Mermaid 파일 표시

GitHub는 리포지토리 내에서 Mermaid 파일 렌더링을 지원합니다. 일반적으로 `.mermaid` 또는 `.mmd` 확장명을 사용하는 것처럼 파일을 커밋하기만 하면 됩니다. 그런 다음 GitHub에서 Mermaid 파일의 경로로 이동합니다.

예를 들어 다음 콘텐츠가 포함된 `.mmd` 파일을 리포지토리에 추가하는 경우:

```text
graph TD
    A[Friend's Birthday] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D["Cool <br> Laptop"]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
```

리포지토리에서 파일을 보면 흐름 차트로 렌더링됩니다.

![흐름 차트의 스크린샷. "A"라는 레이블이 지정된 상자에서 "B" 및 "C"라는 레이블이 지정된 상자까지 두 개의 화살표가 가리키고, "B" 및 "C"에서 "D"로 두 개의 화살표가 더 있습니다.](/assets/images/help/repository/mermaid-file-diagram.png)

### Mermaid 파일 문제 해결

차트가 전혀 렌더링되지 않으면 [Mermaid 라이브 편집기](https://mermaid.live/edit)를 사용하여 차트를 확인한 후 유효한 Mermaid Markdown 구문이 포함되어 있는지 확인합니다.

차트가 표시되지만 예상대로 표시되지 않는 경우 새 [GitHub Community 토론](https://github.com/orgs/community/discussions/categories/general)을 만들고 `Mermaid` 레이블을 추가할 수 있습니다.

#### 알려진 문제

* 시퀀스 다이어그램 차트는 차트 아래에 추가 패딩을 사용하여 렌더링되는 경우가 많으며 차트 크기가 증가함에 따라 더 많은 안쪽 여백이 추가됩니다. Mermaid 라이브러리의 알려진 문제입니다.
* 팝오버 메뉴가 있는 행위자 노드는 시퀀스 다이어그램 차트 내에서 예상대로 작동하지 않습니다. Mermaid 라이브러리의 API를 사용하여 차트를 렌더링할 때 JavaScript 이벤트가 차트에 추가되는 방식이 불일치하기 때문입니다.
* 모든 차트가 a11y 규격인 것은 아닙니다. 이는 화면 읽기 프로그램을 사용하는 사용자에게 영향을 줄 수 있습니다.

### Markdown의 Mermaid

Markdown에서 직접 Mermaid 구문을 포함할 수 있습니다. 자세한 내용은 [다이어그램 만들기](/ko/enterprise-server@3.22/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-mermaid-diagrams)을(를) 참조하세요.

### Mermaid에 대한 추가 읽기

* [Mermaid.js 설명서](https://mermaid-js.github.io/mermaid/#/)
* [Mermaid.js 라이브 편집기](https://mermaid.live/edit)