ENG
  • KOR
  • ENG
  • JPN

mermaid

mermaid는 마크다운과 유사한 문법을 사용하여 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 간트 차트 등을 생성할 수 있는 라이브러리입니다.

Latest Ver 11.5.0
Homepage
Github
1
78,711
상상을 초월하는 그래픽
디자인의 경계를 넘어서, 강력한 다이어그램으로 당신의 데이터를 시각화하세요.
mermaid는 복잡한 다이어그램을 쉽게 작성할 수 있게 도와주는 라이브러리입니다.

CDN 다운로드

License: MIT
전체 버전 보기
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/mermaid.js
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/mermaid.min.js
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/Diagram.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/__mocks__/mermaidAPI.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/accessibility.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/accessibility.spec.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/assignWithDepth.d.ts
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/chunks/mermaid.core/architectureDiagram-PQUH6ZAG.mjs
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/chunks/mermaid.core/architectureDiagram-PQUH6ZAG.mjs.map
https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.5.0/chunks/mermaid.core/blockDiagram-5JUZGEFE.mjs

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요. 
📄 HTML
<div class="mermaid">
  graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

🧩 External JS
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.13.5/dist/mermaid.min.js"></script>

⚙️ JavaScript
mermaid.initialize({startOnLoad:true});

Related Libraries

Library Icon
d3

D3는 데이터 기반 문서를 조작하기 위한 강력한 시각화 기능을 제공합니다.

⚡ Top Tools for Developers
Text Compare

텍스트 비교

두 텍스트의 차이점을 한눈에 확인하세요.

Favicon Generator

Favicon 생성기

파비콘을 쉽고 빠르게 생성하세요.

Lorem Ipsum Generator

Lorem Ipsum 생성기

디자인을 위한 더미 텍스트를 생성하세요.

Character Counter

글자수 세기

글자 수와 단어 수를 실시간으로 확인하세요.

SRT ↔ SMI

SRT ↔ SMI 변환기

자막 형식을 간편하게 변환합니다.

Text Extract(OCR)

이미지 텍스트 추출

이미지 속 텍스트 자동 추출