liminfo

Mermaid Diagram Editor

Mermaid 다이어그램 에디터 - 플로우차트, 시퀀스, ER 다이어그램

27개 결과

Mermaid Diagram Editor 소개

Mermaid 다이어그램 레퍼런스는 GitHub README, Notion, Confluence, GitLab 등 수많은 문서 플랫폼에서 사용되는 텍스트 기반 다이어그램 라이브러리 Mermaid.js의 완전한 문법 검색 가이드입니다. 플로우차트(graph TD/LR, 노드 모양, 화살표 종류), 시퀀스(참여자, 실선/점선 화살표, 노트), 클래스(클래스 선언, 접근 제한자, 상속), ER(개체 관계, 카디널리티 표기), 기타(간트, 파이 차트, 상태 다이어그램, 마인드맵, git 그래프, 사용자 여정, 타임라인) 다섯 가지 카테고리로 구성되어 있습니다.

소프트웨어 아키텍트, 기술 문서 작성자, 엔지니어링 관리자, 개발자들은 Mermaid를 사용해 Markdown 파일 안에서 시스템 설계 다이어그램, API 상호작용 플로우, 데이터베이스 스키마, 프로젝트 타임라인, UML 클래스 계층도를 별도 드로잉 도구 없이 바로 만들 수 있습니다. 다이아몬드 결정 노드({text}), 일대다 ER 관계(||--o{), 시퀀스 다이어그램 점선 응답 화살표(-->>), 상태 머신 전환의 정확한 문법이 필요할 때 이 레퍼런스가 특히 유용합니다.

레퍼런스의 각 항목은 Mermaid 문법 키워드, 명확한 설명, 그리고 Mermaid 지원 에디터에 바로 붙여넣을 수 있는 동작하는 코드 블록을 제공합니다. Mermaid v10+에서 지원되는 모든 주요 다이어그램 유형을 다루며, 많은 개발자에게 익숙하지 않은 mindmap, timeline, gitgraph와 같은 신규 유형도 포함합니다. 다이어그램 유형별로 검색하거나 필터링하면 필요한 문법을 빠르게 찾을 수 있습니다.

주요 기능

  • 5개 카테고리: 플로우차트, 시퀀스, 클래스, ER, 기타(간트·파이·상태·마인드맵·Git·여정·타임라인)
  • 플로우차트 노드 모양: 직사각형 [text], 둥근 (text), 다이아몬드 {text}, 원형 ((text))
  • 플로우차트 링크 유형: 화살표 -->|label|, 열린 링크 ---, 레이블 화살표
  • 시퀀스 다이어그램 참여자, 실선 요청 화살표 ->>, 점선 응답 화살표 ->>, 노트
  • 클래스 다이어그램 접근 제한자(+public, -private), 상속 <|--, 메서드/필드 선언
  • ER 다이어그램 카디널리티: 일대다 ||--o{, 일대일 ||--||, 영 이상 패턴
  • 최신 다이어그램 유형: mindmap, timeline, gitgraph, journey, stateDiagram-v2, pie, gantt
  • 검색 및 필터링 기능 — Mermaid 문법 키워드나 다이어그램 유형을 즉시 검색

자주 묻는 질문

Mermaid.js란 무엇이고 어디서 사용할 수 있나요?

Mermaid.js는 텍스트 기반 다이어그램 정의를 SVG 다이어그램으로 렌더링하는 JavaScript 라이브러리입니다. GitHub Markdown, GitLab, Notion, Confluence, Obsidian, MkDocs, Docusaurus 등 다양한 문서 플랫폼에서 기본으로 지원됩니다. 간단한 텍스트 정의만 작성하면 다이어그램이 자동으로 렌더링됩니다.

Mermaid에서 graph TD와 graph LR의 차이는 무엇인가요?

graph TD(위에서 아래)는 노드가 위에서 아래로 흐르도록 플로우차트를 렌더링하며, 조직도나 프로세스 흐름 같은 계층 구조에 적합합니다. graph LR(왼쪽에서 오른쪽)은 노드를 좌우로 배치하며, 파이프라인, 타임라인, 수평 진행을 나타내는 결정 트리에 더 잘 맞습니다.

Mermaid 플로우차트에서 다이아몬드 결정 노드는 어떻게 만드나요?

레이블 주위에 중괄호를 사용하세요: A{결정?}. 이렇게 하면 다이아몬드 모양으로 렌더링됩니다. 조건 분기를 표시하려면 A -->|예| B 와 A -->|아니오| C 처럼 레이블이 붙은 화살표를 추가하세요.

Mermaid 시퀀스 다이어그램에 노트를 추가하는 방법은?

Note 키워드를 사용하세요: Note over Alice,Bob: 두 참여자 또는 Note right of Alice: 생각 중. "over" 형식은 여러 참여자를 가로질러 생명선 위에 표시되고, "right of"/"left of"는 단일 참여자의 한쪽에 노트를 배치합니다.

Mermaid ER 다이어그램에서 ||--o{ 는 무엇을 의미하나요?

||--o{ 는 일대다 관계를 나타냅니다. 왼쪽의 || 는 정확히 하나, 오른쪽의 o{ 는 영 이상을 의미합니다. Mermaid는 까마귀 발(Crow's Foot) 표기법을 사용합니다: | 는 하나, o 는 영, { 는 여러 개. ||--|{ 는 일대일 이상, |o--o{ 는 영 또는 하나 대 영 이상을 나타냅니다.

Mermaid 클래스 다이어그램에서 상속은 어떻게 표현하나요?

부모 클래스에서 자식 클래스 방향으로 <|-- 화살표를 사용하세요: Animal <|-- Dog. 이렇게 하면 부모 클래스를 향하는 속이 빈 화살촉으로 렌더링되어 표준 UML 상속(일반화) 관계를 나타냅니다. 인터페이스 구현은 점선 화살표를 사용합니다: Interface <|.. ConcreteClass.

GitHub README 파일에서 Mermaid를 사용할 수 있나요?

네, GitHub는 Markdown 파일에서 Mermaid 다이어그램을 기본으로 렌더링합니다. 백틱 세 개 뒤에 언어 식별자로 "mermaid"를 붙인 코드 블록 안에 Mermaid 정의를 작성하면, GitHub에서 볼 때 SVG 이미지로 렌더링됩니다.

Mermaid에서 플로우차트 외에 어떤 다이어그램 유형을 지원하나요?

Mermaid는 sequenceDiagram, classDiagram, erDiagram, gantt, pie, stateDiagram-v2, mindmap, gitgraph, journey(사용자 여정 맵), timeline을 지원합니다. mindmap, timeline, gitgraph는 Mermaid v9+에서 추가된 신규 유형으로, 엔지니어링 문서와 프로젝트 계획에서 점점 더 많이 활용되고 있습니다.