연결문서
Mermaid를 사이트에 추가하면, 다이어그램을 시각적으로 아름답게 표현할 수 있지만, 사용량이 많을 경우 사이트 로딩 속도가 느려질 수 있습니다. 따라서 이 기능이 불필요한 경우에는 사용을 자제하는 것을 추천합니다. 필요한 경우에만 활용하세요.
구글 블로그에서 Mermaid 다이어그램 사용하기
마크다운에서 글을 작성하다 보면 Mermaid를 활용한 다이어그램을 구글 블로그에도 적용하는 방법이 필요하다는 점을 느꼈습니다. 처음에는 그냥 사용해보려고 했으나, 결국 구글 블로그에서도 Mermaid가 제대로 지원될 수 있도록 수정한 방법을 공유합니다.
Mermaid란?
Mermaid는 텍스트 기반으로 다이어그램을 생성할 수 있는 도구입니다. 이를 통해 복잡한 플로우차트, 시퀀스 다이어그램, 간트 차트 등을 마크다운 형식으로 작성할 수 있습니다. Mermaid는 특히 마크다운 편집기와 호환되어, 코드로 작성한 내용을 시각적으로 표현할 수 있는 강력한 도구로 자리 잡고 있습니다. 옵시디언과 같은 툴에서는 간단한 코드로 다양한 시각적 요소를 추가할 수 있어 편리합니다.
구글 블로그에 Mermaid 기능 추가하기
구글 블로그에서 Mermaid를 사용하기 위해서는 HTML 코드와 CSS를 추가해야 합니다. 아래 단계를 따라 설정할 수 있습니다.
-
구글 블로그 HTML 수정
- 구글 블로그 대시보드에서 설정 > HTML 수정에 들어갑니다.
<head>태그 안에 다음의 Mermaid 스크립트를 추가해주세요:
<!-- Mermaid 스크립트 지연 로딩 --> <script defer src='https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'></script> <script>
window.addEventListener('load', () => {
const mermaidElements = document.querySelectorAll('code.language-mermaid');
if (mermaidElements.length === 0) return;
mermaid.initialize({
startOnLoad: true,
theme: 'default',
securityLevel: 'loose',
gantt: {
titleTopMargin: 25,
barHeight: 30,
barGap: 8,
topPadding: 50,
leftPadding: 75,
rightPadding: 75,
gridLineStartPadding: 35,
fontSize: 12,
timeAxisFormat: '%m-%d',
},
useMaxWidth: false, // 너비 제한 제거
});
mermaidElements.forEach(element => {
if (!element.textContent.trim()) return;
const div = document.createElement('div');
div.className = 'mermaid';
div.innerHTML = element.textContent;
const pre = element.parentElement;
if (pre) {
pre.style.textAlign = 'center';
pre.replaceChild(div, element);
}
});
});
</script>
```
-
CSS 추가하기
- 구글 블로그의 레이아웃 > 고급레이아웃 > CSS 추가로 이동합니다.
- 다음 CSS를 추가하여 Mermaid 다이어그램을 최적화합니다:
.mermaid {
width: 100% !important;
max-width: none; /* 너비 제한 제거 /
height: auto;
display: block;
overflow-x: auto; / 가로 스크롤 허용 */
}
.mermaid svg {
width: auto;
height: auto;
max-width: none; /* SVG 너비 제한 제거 */
}
```
이제 구글 블로그에서 Mermaid 기능을 정상적으로 사용할 수 있게 됩니다. Mermaid 다이어그램을 생성하려면 블로그 게시글에 code.language-mermaid 클래스를 사용하여 마크다운으로 작성하시면 됩니다.
결론
구글 블로그에서 Mermaid 다이어그램을 효과적으로 활용하면, 복잡한 정보를 시각적으로 간결하고 명확하게 전달할 수 있습니다. 다이어그램을 코드로 관리할 수 있어 수정이나 업데이트가 용이하며, 블로그에 다양한 시각적 요소를 추가하여 콘텐츠의 퀄리티를 높일 수 있습니다. 다만, Mermaid의 사용이 많아질 경우 사이트 속도에 영향을 미칠 수 있으므로, 필요할 때만 적절히 활용하는 것이 좋습니다. 이를 통해 블로그의 시각적 효과를 극대화하면서도 성능을 유지할 수 있습니다.
댓글 쓰기