Mermaid 치트 시트

모든 Mermaid.js 다이어그램 문법에 대한 완전한 빠른 참조입니다. 모든 다이어그램 유형에 빠르게 접근하려면 이 페이지를 북마크하세요.

순서도 문법 시퀀스 다이어그램 문법 클래스 다이어그램 문법 상태 다이어그램 문법 간트 차트 문법 ER 다이어그램 문법 여정 맵 문법 Git 그래프 문법 마인드맵 문법 파이 차트 문법 타임라인 문법 칸반 문법 사분면 차트 문법 생키 다이어그램 문법 XY 차트 문법 블록 다이어그램 문법 아키텍처 다이어그램 문법 패킷 다이어그램 문법

순서도 문법

노드와 방향 화살표로 프로세스, 워크플로, 알고리즘을 시각화합니다. 비즈니스 프로세스와 의사결정 트리에 적합합니다.

Basic top-down flow

에디터에서 시도

graph TD
    A[Start] --> B[End]

Decision branching

에디터에서 시도

graph TD
    A{Decision} -->|Yes| B[OK]
    A -->|No| C[Cancel]

Subgraph grouping

에디터에서 시도

graph LR
    subgraph Group
        A --> B
    end

Node shapes

에디터에서 시도

graph TD
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C --> D((Circle))
    C --> E([Stadium])

시퀀스 다이어그램 문법

시간에 따른 액터 또는 시스템 간의 상호작용을 문서화합니다. API 문서화와 시스템 설계에 이상적입니다.

Basic message exchange

에디터에서 시도

sequenceDiagram
    Alice->>Bob: Hello
    Bob-->>Alice: Hi

Loop block

에디터에서 시도

sequenceDiagram
    loop Every minute
        Alice->>Bob: Ping
    end

Alternative flows

에디터에서 시도

sequenceDiagram
    alt Success
        A->>B: 200 OK
    else Error
        A->>B: 500 Error
    end

Activation boxes

에디터에서 시도

sequenceDiagram
    Alice->>+Bob: Request
    Bob-->>-Alice: Response

클래스 다이어그램 문법

클래스, 속성, 관계로 객체지향 시스템을 모델링합니다. 소프트웨어 아키텍처 설계에 필수적입니다.

Class with members

에디터에서 시도

classDiagram
    class Animal {
        +String name
        +makeSound()
    }

Inheritance relationships

에디터에서 시도

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name

Cardinality notation

에디터에서 시도

classDiagram
    Customer "1" --> "*" Order

상태 다이어그램 문법

시스템이나 애플리케이션의 상태 전이를 표현합니다. 라이프사이클 상태와 워크플로 모델링에 적합합니다.

Basic state transitions

에디터에서 시도

stateDiagram-v2
    [*] --> Active
    Active --> [*]

Labeled transitions

에디터에서 시도

stateDiagram-v2
    Idle --> Running: start
    Running --> Idle: stop

Nested composite state

에디터에서 시도

stateDiagram-v2
    state Active {
        [*] --> Working
        Working --> Paused
    }

간트 차트 문법

작업과 종속성으로 프로젝트 타임라인을 계획하고 추적합니다. 프로젝트 관리와 일정 관리에 완벽합니다.

Basic project schedule

에디터에서 시도

gantt
    title Project
    dateFormat YYYY-MM-DD
    section Phase 1
    Task A :a1, 2024-01-01, 30d
    Task B :after a1, 20d

Task status markers

에디터에서 시도

gantt
    Task Done :done, d1, 2024-01-01, 10d
    Task Active :active, 2024-01-11, 10d
    Task Crit :crit, 2024-01-21, 10d

ER 다이어그램 문법

엔티티와 관계로 데이터베이스 스키마를 설계합니다. 데이터베이스 모델링과 문서화에 이상적입니다.

Entity relationships

에디터에서 시도

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

Entity with attributes

에디터에서 시도

erDiagram
    CUSTOMER {
        int id PK
        string name
        string email
    }

여정 맵 문법

터치포인트 전반에 걸친 사용자 경험과 상호작용을 매핑합니다. UX 설계와 고객 여정 매핑에 탁월합니다.

User experience journey

에디터에서 시도

journey
    title User Flow
    section Login
      Visit site: 5: User
      Enter credentials: 3: User
      Dashboard: 4: User

Onboarding satisfaction

에디터에서 시도

journey
    title New User Onboarding
    section Sign up
      Open homepage: 5: Visitor
      Create account: 3: Visitor
      Verify email: 2: Visitor
    section First diagram
      Choose template: 4: User
      Edit code: 5: User
      Export PNG: 5: User

Multi-actor checkout

에디터에서 시도

journey
    title Checkout Flow
    section Browse
      Search product: 4: Customer
      View details: 5: Customer
    section Purchase
      Add to cart: 5: Customer
      Pay: 3: Customer, Stripe
      Confirm order: 5: Customer, Stripe

Git 그래프 문법

Git 브랜치 전략과 커밋 히스토리를 시각화합니다. 버전 관리 워크플로 설명에 유용합니다.

Basic branch and merge

에디터에서 시도

gitGraph
    commit
    branch develop
    commit
    checkout main
    merge develop

Feature branch workflow

에디터에서 시도

gitGraph
    commit
    branch feature
    commit
    commit
    checkout main
    merge feature
    commit

마인드맵 문법

아이디어를 정리하고, 개념을 브레인스토밍하며, 계층적 시각 구조를 만듭니다. 기획과 지식 매핑에 완벽합니다.

Central topic with branches

에디터에서 시도

mindmap
  root((Central))
    Topic A
      Detail 1
      Detail 2
    Topic B
      Detail 3

Project planning mindmap

에디터에서 시도

mindmap
  root((Launch Plan))
    Engineering
      Backend API
      Frontend UI
      Testing
    Marketing
      Landing page
      Social media
    Operations
      Support docs
      Pricing

Node shapes and icons

에디터에서 시도

mindmap
  root((Mermaid))
    ::icon(fa fa-book)
    Origins
      Long history
      Popularisation
    [Square]
      (Rounded)
      ((Circle))
    {{Hexagon}}

파이 차트 문법

원형 차트로 비율 데이터 분포를 표시합니다. 백분율과 시장 점유율 분석에 이상적입니다.

Budget distribution

에디터에서 시도

pie title Budget
    "Engineering" : 45
    "Marketing" : 25
    "Operations" : 30

Browser market share

에디터에서 시도

pie showData title Browser Share 2026
    "Chrome" : 64.2
    "Safari" : 18.5
    "Edge" : 5.3
    "Firefox" : 3.1
    "Other" : 8.9

Time allocation

에디터에서 시도

pie title How I Spend My Day
    "Sleep" : 8
    "Work" : 9
    "Meals" : 2
    "Exercise" : 1
    "Free time" : 4

타임라인 문법

시간 축을 따라 연대순 이벤트와 마일스톤을 시각화합니다. 프로젝트 히스토리와 로드맵에 적합합니다.

Chronological events

에디터에서 시도

timeline
    title History
    2020 : Event A
    2021 : Event B
         : Event C
    2022 : Event D

Product roadmap by section

에디터에서 시도

timeline
    title Product Roadmap
    section 2024
      Q1 : Beta launch
      Q2 : Public release
    section 2025
      Q1 : Mobile apps
      Q2 : Enterprise plan
      Q3 : API v2
    section 2026
      Q1 : AI assistant
      Q2 : Marketplace

Personal study plan

에디터에서 시도

timeline
    title Mermaid Study Plan
    Week 1 : Read syntax docs
           : Try flowcharts
    Week 2 : Sequence diagrams
           : Class diagrams
    Week 3 : Gantt and timeline
    Week 4 : Build a real project

칸반 문법

워크플로 단계를 나타내는 열에 작업을 정리합니다. 애자일 프로젝트 관리와 작업 추적에 완벽합니다.

Task board columns

에디터에서 시도

kanban
  Todo
    Task 1
    Task 2
  In Progress
    Task 3
  Done
    Task 4

Sprint board with metadata

에디터에서 시도

kanban
  Backlog
    [Auth flow]@{ assigned: 'alice', priority: 'High' }
    [Onboarding tour]@{ assigned: 'bob', priority: 'Low' }
  In Progress
    [Payments]@{ assigned: 'carol', priority: 'High' }
  Review
    [Settings page]@{ assigned: 'dan', priority: 'Medium' }
  Done
    [Landing redesign]@{ assigned: 'erin', priority: 'High' }

Bug triage board

에디터에서 시도

kanban
  Reported
    Login 500 error
    Slow PDF export
  Triaged
    Mobile menu glitch
  Fixing
    Dark mode contrast
  Verified
    Empty state typo

사분면 차트 문법

두 축 그리드에 항목을 배치하여 비교하고 우선순위를 정합니다. 기능 우선순위 설정과 전략 분석에 이상적입니다.

Priority matrix

에디터에서 시도

quadrantChart
    title Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan
    quadrant-2 Do First
    quadrant-3 Delegate
    quadrant-4 Eliminate
    Item A: [0.3, 0.8]
    Item B: [0.7, 0.2]

Reach vs engagement

에디터에서 시도

quadrantChart
    title Reach and Engagement
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Stars
    quadrant-2 Hidden Gems
    quadrant-3 Filler
    quadrant-4 Volume Plays
    Campaign A: [0.7, 0.8]
    Campaign B: [0.3, 0.7]
    Campaign C: [0.2, 0.2]
    Campaign D: [0.8, 0.3]

Styled quadrant chart

에디터에서 시도

quadrantChart
    title Tech Choices
    x-axis Hard --> Easy
    y-axis Slow --> Fast
    quadrant-1 Adopt
    quadrant-2 Trial
    quadrant-3 Hold
    quadrant-4 Assess
    Vue: [0.8, 0.7] radius: 12, color: #41b883
    React: [0.7, 0.7] radius: 12, color: #61dafb
    Svelte: [0.6, 0.85] radius: 10, color: #ff3e00

생키 다이어그램 문법

비례 화살표로 노드 간 흐름량을 시각화합니다. 에너지 흐름, 예산 배분, 전환 퍼널에 완벽합니다.

Flow quantities between nodes

에디터에서 시도

sankey-beta

Source,Target,Value
A,X,5
A,Y,3
B,X,2
B,Y,8

Marketing funnel breakdown

에디터에서 시도

sankey-beta

Visitors,Signups,1200
Visitors,Bounce,3800
Signups,Trial,800
Signups,Free Plan,400
Trial,Paid,250
Trial,Churn,550

Energy flow diagram

에디터에서 시도

sankey-beta

Solar,Grid,40
Wind,Grid,30
Coal,Grid,80
Grid,Residential,50
Grid,Industrial,80
Grid,Losses,20

XY 차트 문법

사용자 정의 가능한 축으로 막대 차트와 라인 차트를 만듭니다. 데이터 시각화와 트렌드 분석에 이상적입니다.

Bar and line chart

에디터에서 시도

xychart-beta
    title "Sales"
    x-axis [Jan, Feb, Mar, Apr]
    y-axis "Revenue" 0 --> 100
    bar [30, 50, 70, 90]
    line [30, 50, 70, 90]

Quarterly bar chart

에디터에서 시도

xychart-beta
    title "Quarterly Revenue (USD k)"
    x-axis ["Q1", "Q2", "Q3", "Q4"]
    y-axis "Revenue" 0 --> 250
    bar [120, 145, 180, 220]

Multi-line growth comparison

에디터에서 시도

xychart-beta
    title "Active Users"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Users (k)" 0 --> 50
    line [10, 14, 18, 25, 33, 42]
    line [8, 11, 15, 20, 24, 28]

Horizontal bar chart

에디터에서 시도

xychart-beta horizontal
    title "Programming Language Popularity"
    x-axis "Share (%)" 0 --> 30
    y-axis [JavaScript, Python, Java, C#, Go]
    bar [25, 22, 14, 8, 5]

블록 다이어그램 문법

열과 행으로 배열된 블록으로 구조화된 레이아웃을 만듭니다. 시스템 아키텍처와 구성 요소 개요에 적합합니다.

Columnar block layout

에디터에서 시도

block-beta
columns 3
  a["A"]:3
  b["B"] c["C"] d["D"]

Block shapes and arrows

에디터에서 시도

block-beta
columns 4
  a["Input"] b("Process") c{{"Decision"}} d[("Storage")]
  a --> b
  b --> c
  c --> d

System architecture blocks

에디터에서 시도

block-beta
columns 3
  Web["Web App"]:3
  space:3
  API["REST API"] Auth["Auth Service"] DB[("Postgres")]
  Web --> API
  API --> Auth
  API --> DB

아키텍처 다이어그램 문법

서비스 아이콘과 연결로 클라우드 및 시스템 아키텍처를 설계합니다. 인프라 문서화에 완벽합니다.

Cloud service topology

에디터에서 시도

architecture-beta
    group api(cloud)[API]
    service web(internet)[Web] in api
    service db(database)[DB]
    web:R --> L:db

Three-tier web app

에디터에서 시도

architecture-beta
    group public(cloud)[Public Network]
    group private(cloud)[Private VPC]

    service cdn(internet)[CDN] in public
    service lb(server)[Load Balancer] in public
    service web(server)[Web Tier] in private
    service api(server)[API Tier] in private
    service db(database)[Postgres] in private
    service cache(disk)[Redis] in private

    cdn:R --> L:lb
    lb:R --> L:web
    web:R --> L:api
    api:R --> L:db
    api:B --> T:cache

Event-driven microservices

에디터에서 시도

architecture-beta
    service gw(internet)[API Gateway]
    service queue(server)[Event Bus]
    service orders(server)[Orders]
    service billing(server)[Billing]
    service notify(server)[Notifications]
    service db(database)[Shared DB]

    gw:R --> L:orders
    orders:R --> L:queue
    queue:T --> B:billing
    queue:B --> T:notify
    orders:B --> T:db

패킷 다이어그램 문법

비트 수준 필드 레이아웃으로 네트워크 프로토콜 패킷 구조를 시각화합니다. 네트워크 프로토콜 문서화에 필수적입니다.

Network packet field layout

에디터에서 시도

packet-beta
  0-15: "Source Port"
  16-31: "Dest Port"
  32-63: "Sequence Number"

TCP header layout

에디터에서 시도

packet-beta
title TCP Header
  0-15: "Source Port"
  16-31: "Destination Port"
  32-63: "Sequence Number"
  64-95: "Acknowledgment Number"
  96-99: "Data Offset"
  100-105: "Reserved"
  106-111: "Flags"
  112-127: "Window"
  128-143: "Checksum"
  144-159: "Urgent Pointer"

IPv4 header layout

에디터에서 시도

packet-beta
title IPv4 Header
  0-3: "Version"
  4-7: "IHL"
  8-15: "Type of Service"
  16-31: "Total Length"
  32-47: "Identification"
  48-50: "Flags"
  51-63: "Fragment Offset"
  64-71: "TTL"
  72-79: "Protocol"
  80-95: "Header Checksum"
  96-127: "Source IP Address"
  128-159: "Destination IP Address"

에디터에서 시도