<div id="readability-page-1" class="page"><div>
												
<p>Mermaid는 텍스트 기반의 마크다운(Markdown)과 유사한 문법을 사용하여 순서도, 차트, 다이어그램을 자동으로 생성해 주는 도구입니다. 복잡한 그래픽 툴 없이 코드만으로 그림을 그릴 수 있다는 것이 가장 큰 장점입니다.</p>
<h2>순서도 (Flowcharts)</h2>
<p>가장 기본이 되는 문법으로, 방향을 설정하고 노드(도형)와 화살표를 연결합니다.</p>
<ul>
<li>
<p>방향 설정: graph TD (위에서 아래로), graph LR (왼쪽에서 오른쪽으로)</p>
</li>
<li>
<p>도형 모양:</p>
<ul>
<li>
<p><code>[ ]</code>: 직사각형 (프로세스)</p>
</li>
<li>
<p><code>(( ))</code>: 원형 (이벤트)</p>
</li>
<li>
<p><code>{ }</code>: 마름모 (결정/조건)</p>
</li>
</ul>
</li>
</ul>
<pre><code>graph LR
    A[시작] --&gt; B{조건 확인}
    B -- 예 --&gt; C[승인]
    B -- 아니오 --&gt; D[거절]</code></pre>
<p><img decoding="async" src="https://www.skyer9.pe.kr/wordpress/wp-content/uploads/2025/12/image-1766125202970.png" alt="file"></p>
<p>&amp;<code>nbsp</code>; 를 이용해 박스의 폭을 늘릴 수 있습니다.</p>
<pre><code>graph TD
    %% 박스 01
    subgraph "박스 01"
        A["&lt;b&gt;제목 01&lt;/b&gt;&lt;br/&gt;내용 01"]
    end

    %% 박스 02
    subgraph "박스 02"
        B["&lt;b&gt;제목 02&lt;/b&gt;&lt;br/&gt;내용 02"]
        C["&lt;b&gt;제목 03&lt;/b&gt;&lt;br/&gt;내용 03"]
        A --&gt; B
        B --&gt; C
    end

    %% 스타일링
    style A fill:#FFECB3,stroke:#FFA000,stroke-width:2px
    style B fill:#E3F2FD,stroke:#2196F3,stroke-width:2px
    style C fill:#E3F2FD,stroke:#2196F3,stroke-width:2px</code></pre>
<p><img decoding="async" src="https://www.skyer9.pe.kr/wordpress/wp-content/uploads/2025/12/image-1766125941224.png" alt="file"></p>
<h2>시퀀스 다이어그램 (Sequence Diagrams)</h2>
<p>객체 간의 상호작용과 메시지 흐름을 시간 순서대로 보여줄 때 사용합니다.</p>
<ul>
<li>
<p>participant: 등장인물 정의</p>
</li>
<li>
<p>-&gt;&gt; : 실선 화살표 (요청)</p>
</li>
<li>
<p>–&gt;&gt; : 점선 화살표 (응답)</p>
</li>
</ul>
<pre><code>sequenceDiagram
    사용자-&gt;&gt;브라우저: URL 입력
    브라우저-&gt;&gt;서버: 페이지 요청
    서버--&gt;&gt;브라우저: HTML 응답
    브라우저--&gt;&gt;사용자: 화면 표시</code></pre>
<p><img decoding="async" src="https://www.skyer9.pe.kr/wordpress/wp-content/uploads/2025/12/image-1766125380062.png" alt="file"></p>
<h2>간트 차트 (Gantt Charts)</h2>
<p>프로젝트 일정과 작업 진행 상황을 시각화합니다.</p>
<pre><code>gantt
    title 프로젝트 일정표
    dateFormat  YYYY-MM-DD
    section 기획
    요구사항 분석   :a1, 2023-10-01, 10d
    section 개발
    DB 설계        :after a1, 7d
    API 개발       :2023-10-15, 14d</code></pre>
<p><img decoding="async" src="https://www.skyer9.pe.kr/wordpress/wp-content/uploads/2025/12/image-1766125511212.png" alt="file"></p>
<h2>상태 다이어그램 (State Diagrams)</h2>
<p>시스템이나 객체의 상태 변화를 나타낼 때 유용합니다.</p>
<pre><code>stateDiagram-v2
    [*] --&gt; 대기중
    대기중 --&gt; 실행중: 시작 버튼
    실행중 --&gt; 중지됨: 오류 발생
    실행중 --&gt; [*]: 완료</code></pre>
<p><img decoding="async" src="https://www.skyer9.pe.kr/wordpress/wp-content/uploads/2025/12/image-1766125596200.png" alt="file"></p>
<h2>기타</h2>
<ul>
<li>
<p>주석: %%를 사용하면 코드 내에 메모를 남길 수 있습니다.</p>
</li>
<li>
<p>스타일 수정: style 노드이름 fill:#색상코드를 사용하여 특정 도형의 색상을 바꿀 수 있습니다. (사용자님이 처음에 주신 코드 하단에 있던 방식입니다.)</p>
</li>
<li>
<p>서브그래프: subgraph를 사용하면 연관된 노드들을 박스로 묶어 그룹화할 수 있습니다.</p>
</li>
</ul>
<p><span></span> <span>Post Views:</span> <span>9</span>
			</p>											</div></div>

상구리의 기술 블로그

Mermaid 시작하기
Mermaid는 텍스트 기반의 마크다운(Markdown)과 유사한 문법을 사용하여 순서도, 차트, 다이어그램을 자동으로 생성해 주는 도구입니다. 복잡한 그래픽 툴 없이 코드만으로 그림을 그릴 수 있다는 것이 가장 큰 장점입니다.
순서도 (Flowcharts)
가장 기본이 되는 문법으로, 방향을 설정하고 노드(도형)와 화살표를 연결합니다.
방향 설정: graph TD (위에서 아래로), graph LR (왼쪽에서 오른쪽으로)
도형 모양:
[ ]: 직사각형 (프로세스)
(( )): 원형 (이벤트)
{ }: 마름모 (결정/조건)
graph LR
    A[시작] --> B{조건 확인}
    B -- 예 --> C[승인]
    B -- 아니오 --> D[거절]
&nbsp; 를 이용해 박스의 폭을 늘릴 수 있습니다.
graph TD
    %% 박스 01
    subgraph "박스 01"
        A["<b>제목 01</b><br/>내용 01"]
    end
    %% 박스 02
    subgraph "박스 02"
        B["<b>제목 02</b><br/>내용 02"]
        C["<b>제목 03</b><br/>내용 03"]
        A --> B
        B --> C
    end
    %% 스타일링
    style A fill:#FFECB3,stroke:#FFA000,stroke-width:2px
    style B fill:#E3F2FD,stroke:#2196F3,stroke-width:2px
    style C fill:#E3F2FD,stroke:#2196F3,stroke-width:2px
시퀀스 다이어그램 (Sequence Diagrams)
객체 간의 상호작용과 메시지 흐름을 시간 순서대로 보여줄 때 사용합니다.
participant: 등장인물 정의
->> : 실선 화살표 (요청)
–>> : 점선 화살표 (응답)
sequenceDiagram
    사용자->>브라우저: URL 입력
    브라우저->>서버: 페이지 요청
    서버-->>브라우저: HTML 응답
    브라우저-->>사용자: 화면 표시
간트 차트 (Gantt Charts)
프로젝트 일정과 작업 진행 상황을 시각화합니다.
gantt
    title 프로젝트 일정표
    dateFormat  YYYY-MM-DD
    section 기획
    요구사항 분석   :a1, 2023-10-01, 10d
    section 개발
    DB 설계        :after a1, 7d
    API 개발       :2023-10-15, 14d
상태 다이어그램 (State Diagrams)
시스템이나 객체의 상태 변화를 나타낼 때 유용합니다.
stateDiagram-v2
    [*] --> 대기중
    대기중 --> 실행중: 시작 버튼
    실행중 --> 중지됨: 오류 발생
    실행중 --> [*]: 완료
기타
주석: %%를 사용하면 코드 내에 메모를 남길 수 있습니다.
스타일 수정: style 노드이름 fill:#색상코드를 사용하여 특정 도형의 색상을 바꿀 수 있습니다. (사용자님이 처음에 주신 코드 하단에 있던 방식입니다.)
서브그래프: subgraph를 사용하면 연관된 노드들을 박스로 묶어 그룹화할 수 있습니다.

Mermaid 시작하기

댓글