Github Pages에서 Mermaid 사용하기
⛔문제상황
아래 글에서 mermaid 문법을 사용해 그래프를 그렸는데, 나중에 확인해보니 그래프가 제대로 표시되지 않는 문제가 발생했다. (현재는 수정 완료!)
⭕제대로 표시 된 예
graph LR; A[사용자] --> B(파일 업로드); B --> C(클라이언트 측에서
스토리지에 이미지 업로드); C --> D(업로드된
이미지 URL 얻기); D --> F(해당 URL 정보를 Body에 담고,
Next API에 POST 요청) F --> G(Prisma를 이용해
Supabase에 업로드);
스토리지에 이미지 업로드); C --> D(업로드된
이미지 URL 얻기); D --> F(해당 URL 정보를 Body에 담고,
Next API에 POST 요청) F --> G(Prisma를 이용해
Supabase에 업로드);
❌그래프가 그려지지 않은 상황
1
2
3
4
5
6
graph LR;
A[사용자] --> B(파일 업로드);
B --> C(클라이언트 측에서<br/> 스토리지에 이미지 업로드);
C --> D(업로드된<br/> 이미지 URL 얻기);
D --> F(해당 URL 정보를 Body에 담고,<br/>Next API에 POST 요청)
F --> G(Prisma를 이용해<br/> Supabase에 업로드);
✅해결
해결 방법은 스택 오버플로우의 두 답변에서 얻었다. 먼저, mermaid를 사용할 수 있도록 default.html에 다음과 같이 코드를 추가해준다.
1
2
3
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
</head>
같은 body태그 밑에 코드를 추가해준다.
1
2
3
4
5
6
7
8
9
10
11
12
<script>
var config = {
startOnLoad: true,
theme: "forest",
flowchart: {
useMaxWidth: false,
htmlLabels: true,
},
}
mermaid.initialize(config)
window.mermaid.init(undefined, document.querySelectorAll(".language-mermaid"))
</script>
실제 사용할 때는 다음과 같이 작성해준다.
1
2
3
<div class="mermaid" markdown="0">
<!--mermaid 작성-->
</div>
그러면 아래와 같이 그래프가 정상적으로 동작한다!
graph LR; A(오류상황 발견) --> B(해결 완료!);
🗂️참고 사이트
This post is licensed under CC BY 4.0 by the author.