기본 정의
순서도는 노드(기하학적 도형)와 연결선(화살표 또는 선)으로 구성됩니다. Mermaid 코드는 노드와 연결선을 구성하는 방식을 정의하며, 다양한 화살표 유형, 다방향 화살표 및 하위 그래프와의 임의 연결을 지원합니다.
경고 순서도 노드에서 단어 "end"를 사용하는 경우 첫 글자나 단어 전체를 대문자로 입력하세요(예: "End" 또는 "END"). 모두 소문자로 "end"를 입력하면 순서도에 오류가 발생합니다.
경고 순서도 노드를 연결할 때 문자 "o" 또는 "x"를 첫 글자로 사용하는 경우, 문자 앞에 공백을 추가하거나 문자를 대문자로 입력하세요(예: "dev--- ops", "dev---Ops").
하나의 노드(기본)
복사
임베드
---
title: Node
---
flowchart LR
id
id는 상자 안에 표시되는 내용입니다.
순서도 생성 문법은 flowchart 외에도 graph 를 사용할 수 있습니다.
텍스트가 있는 노드
상자에 id와 다른 텍스트를 설정할 수도 있습니다. 이 작업을 여러 번 수행하면 시스템은 해당 노드에 마지막으로 지정된 텍스트를 사용합니다. 또한 나중에 노드에 연결선을 정의하면 텍스트 정의를 생략할 수 있으며, 상자를 렌더링할 때 이전에 정의된 텍스트를 사용합니다.
복사
임베드
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode 텍스트
큰따옴표로 Unicode 텍스트를 감쌉니다.
복사
임베드
flowchart LR
id["This ❤ Unicode"]
Markdown 형식
큰따옴표와 백틱으로 Markdown 텍스트를 감쌉니다.
복사
임베드
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
방향
순서도의 방향을 선언합니다.
순서도가 위에서 아래로 배치됨을 나타냅니다(TD 또는 TB).
복사
임베드
flowchart TD
Start --> Stop
순서도 방향은 다음과 같습니다:
- TB - 위에서 아래로
- TD - 위에서 아래로(위에서 아래와 동일)
- BT - 아래에서 위로
- RL - 오른쪽에서 왼쪽으로
- LR - 왼쪽에서 오른쪽으로
노드 도형
둥근 모서리 사각형
복사
임베드
flowchart LR
id1(This is the text in the box)
스타디움 형태
복사
임베드
flowchart LR
id1([This is the text in the box])
하위 그래프
복사
임베드
flowchart LR
id1[[This is the text in the box]]
데이터베이스
복사
임베드
flowchart LR
id1[(Database)]
원형
복사
임베드
flowchart LR
id1((This is the text in the circle))
비대칭 도형
복사
임베드
flowchart LR
id1>This is the text in the box]
다이아몬드
복사
임베드
flowchart LR
id1{This is the text in the box}
육각형
복사
임베드
flowchart LR
id1{{This is the text in the box}}
평행사변형
복사
임베드
flowchart TD
id1[/This is the text in the box/]
역평행사변형
복사
임베드
flowchart TD
id1[\This is the text in the box\]
사다리꼴
복사
임베드
flowchart TD
A[/ProcessOn\]
역사다리꼴
복사
임베드
flowchart TD
B[\ProcessOn/]
이중 원
복사
임베드
flowchart TD
id1(((This is the text in the circle)))
Mermaid 순서도 노드 도형 확장
Mermaid는 순서도 생성의 유연성과 정확성을 높이기 위해 30가지 새로운 도형을 도입했습니다. 이러한 새로운 도형은 프로세스, 결정, 이벤트, 데이터 저장 및 순서도의 기타 요소를 직관적으로 표현하는 더 많은 옵션을 제공하여 명확성과 의미론적 의미를 향상시킵니다.
도형 정의의 새로운 문법
Mermaid는 이제 증가하는 도형을 수용하기 위해 도형 유형을 정의하는 범용 문법을 지원합니다. 이 문법을 사용하면 명확하고 유연한 형식으로 노드에 특정 도형을 지정할 수 있습니다.
복사
임베드
A@{ shape: rect }
이 문법은 노드 A를 사각형으로 생성합니다. 렌더링 방식은 [A] 또는 A와 동일합니다.
노드 도형 전체 목록
다음은 새로 도입된 노드 도형과 그에 해당하는 의미, 약칭 및 별칭의 전체 목록입니다:
| 의미론적 이름 | 그래프 문법 | 문법 약칭 | 문법 대체 | 상세 설명 |
|---|---|---|---|---|
| 카드 | Notched Rectangle | notch-rect | card, notched-rectangle | 카드를 나타냅니다. |
| 정리 | Hourglass | hourglass | collate | 정리 작업을 나타냅니다. |
| 통신 링크 | Lightning Bolt | bolt | com-link, lightning-bolt | 통신 링크 |
| 주석 | Curly Brace | brace | brace-l, comment | 주석 추가 |
| 오른쪽 주석 | Curly Brace | brace-r | 주석 추가 | |
| 양쪽에 중괄호가 있는 주석 | Curly Braces | braces | 주석 추가 | |
| 데이터 입력 또는 출력 | Lean Right | lean-r | in-out, lean-right | 입력 또는 출력을 나타냅니다. |
| 데이터 입력 또는 출력 | Lean Left | lean-l | lean-left, out-in | 출력 또는 입력을 나타냅니다. |
| 데이터베이스 | Cylinder | cyl | cylinder, database, db | 데이터베이스 저장 |
| 판정 | Diamond | diam | decision, diamond, question | 결정 단계 |
| 지연 | Half-Rounded Rectangle | delay | half-rounded-rectangle | 지연을 나타냅니다. |
| 직접 접근 저장 | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | 직접 접근 저장 |
| 디스크 저장 | Lined Cylinder | lin-cyl | disk, lined-cylinder | 디스크 저장 |
| 디스플레이 | Curved Trapezoid | curv-trap | curved-trapezoid, display | 정보가 화면, 터미널 등 장치에 표시됨을 나타냅니다. |
| 분할 처리 | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | 분할 처리 도형 |
| 문서 | Document | doc | document | 문서를 나타냅니다. |
| 이벤트 | Rounded Rectangle | rounded | event | 이벤트를 나타냅니다. |
| 추출 | Triangle | tri | extract, triangle | 추출 과정 |
| 분기/병합 | Filled Rectangle | fork | join | 순서도의 분기 또는 병합 |
| 내부 저장 | Window Pane | win-pane | internal-storage, window-pane | 내부 저장 |
| 연결점 | Filled Circle | f-circ | filled-circle, junction | 연결점 |
| 선이 있는 문서 | Lined Document | lin-doc | lined-document | 선이 있는 문서 |
| 선/그림자 프로세스 | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | 선이 있는 프로세스 도형 |
| 루프 제한 | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | 루프 제한 단계 |
| 수동 파일 | Flipped Triangle | flip-tri | flipped-triangle, manual-file | 수동 파일 작업 |
| 수동 입력 | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | 수동 입력 단계 |
| 수동 작업 | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | 수동 작업을 나타냅니다. |
| 다중 문서 | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| 다중 프로세스 | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| 불규칙 도형 | Odd | odd | 불규칙 도형 | |
| 종이 테이프 | Flag | flag | paper-tape | 종이 테이프 |
| 준비 조건 | Hexagon | hex | hexagon, prepare | 준비 또는 조건 단계 |
| 우선 동작 | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | 우선 동작 |
| 처리 | Rectangle | rect | proc, process, rectangle | 표준 처리 도형 |
| 시작 | Circle | circle | circ | 시작점 |
| 시작 | Small Circle | sm-circ | small-circle, start | 작은 원 시작점 |
| 정지 | Double Circle | dbl-circ | double-circle | 정지점을 나타냅니다. |
| 정지 | Framed Circle | fr-circ | framed-circle, stop | 정지점을 나타냅니다. |
| 데이터 저장 | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | 데이터 저장 |
| 하위 그래프 | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | 하위 프로세스, 서브루틴 |
| 요약 | Crossed Circle | cross-circ | crossed-circle, summary | 요약 |
| 태그된 문서 | Tagged Document | tag-doc | tagged-document | 태그된 문서 |
| 표준 프로세스 | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| 종료점 | Stadium | stadium | pill, terminal | 종료점 |
| 텍스트 블록 | Text Block | text | 텍스트 블록 |
다음은 새로 도입된 도형을 사용한 순서도 코드 예시입니다:
복사
임베드
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
프로세스
복사
임베드
flowchart TD
A@{ shape: rect, label: "This is a process" }
이벤트
복사
임베드
flowchart TD
A@{ shape: rounded, label: "This is an event" }
하위 프로세스
복사
임베드
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
데이터베이스(원통)
복사
임베드
flowchart TD
A@{ shape: cyl, label: "Database" }
시작(원형)
복사
임베드
flowchart TD
A@{ shape: circle, label: "Start" }
불규칙 도형
복사
임베드
flowchart TD
A@{ shape: odd, label: "Odd shape" }
판단(다이아몬드)
복사
임베드
flowchart TD
A@{ shape: diamond, label: "Decision" }
준비 조건 (육각형)
복사
임베드
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
데이터 입력/출력(오른쪽으로 기울어짐)
복사
임베드
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
데이터 입력/출력(왼쪽으로 기울어짐)
복사
임베드
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
우선 동작 (사다리꼴)
복사
임베드
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
수동 작업 (역사다리꼴)
복사
임베드
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
정지 (이중 원)
복사
임베드
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
텍스트 블록
복사
임베드
flowchart TD
A@{ shape: text, label: "This is a text block" }
카드(노치 사각형)
복사
임베드
flowchart TD
A@{ shape: notch-rect, label: "Card" }
선/그림자 프로세스
복사
임베드
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
시작(작은 원)
복사
임베드
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
정지 (테두리가 있는 원)
복사
임베드
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
분기/병합 (긴 사각형)
복사
임베드
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
정리(모래시계)
복사
임베드
flowchart TD
A@{ shape: hourglass, label: "Collate" }
주석(중괄호)
복사
임베드
flowchart TD
A@{ shape: comment, label: "Comment" }
주석 오른쪽(오른쪽 중괄호)
복사
임베드
flowchart TD
A@{ shape: brace-r, label: "Comment" }
주석(양쪽 모두 괄호가 있음)
복사
임베드
flowchart TD
A@{ shape: braces, label: "Comment" }
통신 링크(번개)
복사
임베드
flowchart TD
A@{ shape: bolt, label: "Communication link" }
문서
복사
임베드
flowchart TD
A@{ shape: doc, label: "Document" }
지연(반원 모서리 사각형)
복사
임베드
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
복사
임베드
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
디스크 저장(홈이 있는 원통)
복사
임베드
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
디스플레이(디스플레이 도형)
복사
임베드
flowchart TD
A@{ shape: curv-trap, label: "Display" }
분할 처리(분할 사각형)
복사
임베드
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
추출(작은 삼각형)
복사
임베드
flowchart TD
A@{ shape: tri, label: "Extract" }
내부 저장(창 패널)
복사
임베드
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
연결점(속이 찬 원)
복사
임베드
flowchart TD
A@{ shape: f-circ, label: "Connect" }
선이 있는 문서
복사
임베드
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
루프 제한 (노치 오각형)
복사
임베드
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
수동 파일 (뒤집힌 삼각형)
복사
임베드
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
수동 입력 (직각 사다리꼴)
복사
임베드
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
다중 문서 (적층 문서)
복사
임베드
flowchart TD
A@{ shape: docs, label: "Multi-document" }
다중 프로세스 (적층 사각형)
복사
임베드
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
종이 테이프 (깃발)
복사
임베드
flowchart TD
A@{ shape: flag, label: "Paper tape" }
데이터 저장 (나비 리본 사각형)
복사
임베드
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
요약 (십자가 있는 원)
복사
임베드
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
태그된 문서
복사
임베드
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
표시된 프로세스
복사
임베드
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Mermaid 순서도의 특수 도형
Mermaid는 또한 순서도를 향상시키기 위해 이미지를 도입하여, 순서도에 직접 이미지를 포함할 수 있게 함으로써 더 많은 시각적 배경과 명확성을 제공합니다.
이미지 도형
image 를 사용하여 순서도에 이미지를 삽입할 수 있으며, 이미지를 정의하는 문법은 다음과 같습니다:
복사
임베드
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
매개변수
- img: 표시할 이미지의 URL 주소입니다.
- label: 이미지와 연결된 텍스트 레이블로, 임의의 문자열이 될 수 있습니다. 정의하지 않으면 레이블이 표시되지 않습니다.
- pos: 레이블의 위치입니다. 정의하지 않으면 레이블은 기본적으로 이미지 하단이 됩니다.
- w: 이미지의 너비입니다. 정의하지 않으면 이미지의 자연 너비가 기본값이 됩니다.
- h: 이미지의 높이입니다. 정의하지 않으면 이미지의 자연 높이가 기본값이 됩니다.
- constraint: 이미지가 노드 크기를 제한하는지 여부를 결정합니다. 이 설정은 또한 이미지가 원래 종횡비를 유지하고 너비에 따라 높이를 조정하도록 보장합니다. 정의하지 않으면 기본값은 off 입니다.
이미지는 순서도에 추가적인 유연성과 시각적 매력을 제공하여 더 많은 정보와 흥미를 줍니다.
노드 간의 연결
노드는 연결선과 화살표로 연결할 수 있습니다. 다양한 유형의 링크가 있으며, 텍스트 문자열을 링크에 첨부할 수도 있습니다.
화살표가 있는 링크
복사
임베드
flowchart LR
A-->B
열린 링크
복사
임베드
flowchart LR
A --- B
텍스트가 있는 링크
복사
임베드
flowchart LR
A-- This is the text! ---B
또는
복사
임베드
flowchart LR
A --- | This is the text| B
화살표와 텍스트가 있는 링크
복사
임베드
flowchart LR
A-->|text|B
또는
복사
임베드
flowchart LR
A-- text -->B
점선 링크
복사
임베드
flowchart LR
A-.->B;
텍스트가 있는 점선 링크
복사
임베드
flowchart LR
A-. text .->B;
굵은 링크
복사
임베드
flowchart LR
A ==> B
텍스트가 있는 굵은 링크
복사
임베드
flowchart LR
A == |text| ==> B
보이지 않는 링크
복사
임베드
flowchart LR
A ~~~ B
링크의 연쇄 연결
복사
임베드
flowchart LR
A -- text --> B -- text2 --> C
다음과 같이 같은 줄에서 여러 노드 링크를 선언할 수도 있습니다:
복사
임베드
flowchart LR
a --> b & c--> d
아래 코드처럼 의존성을 설명할 수도 있습니다:
복사
임베드
flowchart LR
a --> b & c--> d & e--> f
기본 문법으로 동일한 그래프를 설명하려면 8줄이 필요합니다. 이 방법을 과도하게 사용하면 Markdown 형식의 순서도를 읽기 더 어려워질 수 있다는 점을 유의하세요.
복사
임베드
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
연결선에 ID 추가
Mermaid는 이제 노드에 ID와 메타데이터를 첨부하는 것과 유사하게 연결선에 ID를 추가하는 것을 지원합니다. 이 기능은 연결선에서 더 고급 스타일, 클래스 및 애니메이션 기능을 위한 기반을 마련합니다.
문법:연결선에 ID를 추가하려면 연결선 문법 앞에 ID를 붙이고 바로 뒤에 @ 문자를 붙입니다. 예:
복사
임베드
flowchart LR
A e1@--> B
이 예에서 e1은 A와 B를 연결하는 연결선의 ID입니다. 노드를 사용하듯이 이후 정의나 스타일 문에서 이 ID를 사용할 수 있습니다.
애니메이션 켜기
연결선에 ID를 추가한 후, 연결선의 속성을 정의하여 연결선의 애니메이션을 켤 수 있습니다:
복사
임베드
flowchart LR
A e1@==> B
e1@{ animate: true }
이는 Mermaid에게 연결선 e1 이 애니메이션임을 알립니다.
애니메이션 유형 선택
초기 버전에서는 fast 와 slow 두 가지 애니메이션 속도를 지원합니다. 특정 애니메이션 유형을 선택하는 것은 애니메이션을 활성화하고 한 번에 애니메이션 속도를 설정하는 간편한 방법입니다.
복사
임베드
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
classDef 문을 사용한 애니메이션
연결선에 클래스를 할당한 다음 classDef 문에서 애니메이션 속성을 정의하여 연결선에 애니메이션을 추가할 수도 있습니다. 예:
복사
임베드
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
이 코드에서:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate 는 animate 라는 이름의 클래스를 정의하며 스타일과 애니메이션 속성을 가집니다.
- class e1 animate 는 animate 클래스를 연결선 e1에 적용합니다.
이스케이프 쉼표에 대한 설명: stroke-dasharray 속성을 설정할 때 쉼표는 Mermaid의 스타일 정의에서 구분 기호로 사용되므로 쉼표를 , 로 이스케이프하는 것을 잊지 마세요.
새로운 화살표 유형
새로운 화살표 유형 지원
- 속이 찬 원이 있는 연결선
- 교차 표시가 있는 연결선
속이 찬 원이 있는 연결선
복사
임베드
flowchart LR
A --o B
교차 표시가 있는 연결선
복사
임베드
flowchart LR
A --x B
다방향 화살표
다방향 화살표를 사용할 수 있습니다. 예:
복사
임베드
flowchart LR
A o--o B
B <--> C
C x--x D
연결선 길이
순서도의 각 노드는 연결된 노드에 따라 렌더링된 그래프에서 하나의 등급, 즉 수직 또는 수평 레벨(순서도 방향에 따라 다름)이 할당됩니다. 기본적으로 링크는 임의의 수의 등급을 가로지를 수 있지만, 연결 정의에 추가 대시를 추가하여 특정 연결이 다른 연결보다 더 길도록 요구할 수 있습니다.
이 예에서는 노드 B에서 노드 E로의 연결에 두 개의 대시를 추가로 추가하여 일반 링크보다 두 등급 더 많이 가로지릅니다:
복사
임베드
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
연결 레이블이 연결 중간에 작성되면 연결 오른쪽에 추가 대시를 추가해야 합니다. 이 예는 이전 예와 동일합니다:
복사
임베드
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
점선이나 굵은 링크의 경우 추가할 문자는 등호 또는 점이며, 아래 표와 같습니다:
| 길이 | 1 | 2 | 3 |
|---|---|---|---|
| 일반 연결 | --- | ---- | ----- |
| 화살표가 있는 일반 연결 | --> | ---> | ----> |
| 굵은 연결 | === | ==== | ===== |
| 화살표가 있는 굵은 연결 | ==> | ===> | ====> |
| 점선 | -.- | -..- | -...- |
| 화살표가 있는 점선 | -.- | -..-> | -...-> |
특수 문자
텍스트를 따옴표 안에 넣어 더 까다로운 문자를 렌더링할 수 있습니다. 아래 예와 같습니다:
복사
임베드
flowchart LR
id1["This is the (text) in the box"]
문자 이스케이프를 위한 엔티티 인코딩
예시의 문법을 사용하여 문자를 이스케이프할 수 있습니다.
복사
임베드
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
제시된 숫자는 십진수이므로 # 은 #35 로 인코딩할 수 있습니다. HTML 문자 이름도 지원합니다.
하위 그래프
복사
임베드
subgraph title
graph definition
end
다음은 예시입니다:
복사
임베드
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
하위 그래프에 id를 설정할 수도 있습니다.
복사
임베드
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
플로우차트
순서도 유형의 차트를 사용하면 아래 순서도처럼 하위 그래프를 향하거나 하위 그래프에서 나오는 연결선을 설정할 수도 있습니다.
복사
임베드
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
하위 그래프 방향
순서도 유형을 사용할 때 방향 문을 사용하여 하위 그래프의 렌더링 방향을 설정할 수 있습니다. 아래와 같습니다:
복사
임베드
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
제한 사항
하위 그래프의 노드가 외부에 연결된 경우 하위 그래프의 방향은 무시됩니다. 그렇지 않으면 하위 그래프는 상위 그래프의 방향을 상속합니다:
복사
임베드
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Markdown 문자열
Markdown 문자열은 더 유연한 문자열 유형을 제공하여 순서도와 마인드맵을 강화하며, 굵게 및 기울임꼴 같은 텍스트 형식 옵션을 지원하고 레이블 내에서 텍스트를 자동으로 줄바꿈할 수 있습니다.
복사
임베드
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- 텍스트를 굵게 하려면 텍스트 앞뒤에 두 개의 별표(**)를 사용합니다.
- 기울임꼴은 텍스트 앞뒤에 단일 별표(*)를 사용합니다.
- 기존 문자열의 경우 노드에서 텍스트를 줄바꿈하려면 <br> 태그를 추가해야 합니다. 그러나 Markdown 문자열은 텍스트가 너무 길면 자동으로 줄바꿈되며, <br> 태그 대신 줄바꿈 문자만 사용하여 새 줄을 시작할 수 있습니다.
이 기능은 노드 레이블, 연결선 레이블 및 하위 그래프 레이블에 적용됩니다.
특정 문법을 사용하여 자동 줄바꿈을 비활성화할 수 있습니다.
복사
임베드
---
config:
markdownAutoWrap: false
---
graph LR
주석
순서도에 주석을 입력할 수 있으며 편집기는 이러한 주석을 무시합니다. 주석은 한 줄을 차지해야 하며 이중 퍼센트 기호(%%)로 시작해야 합니다. 주석 시작부터 다음 줄까지의 모든 텍스트는 주석으로 간주되며, 모든 순서도 문법을 포함합니다.
복사
임베드
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
스타일 및 클래스
링크 스타일
링크 스타일을 설정할 수 있습니다. 예를 들어 프로세스에서 뒤로 이동하는 링크를 디자인하려는 경우, 링크는 노드처럼 ID가 없으므로 다른 방식으로 링크가 사용할 스타일을 결정해야 합니다. 링크를 정의할 때의 순서 번호를 사용하거나 기본값을 사용하여 모든 링크에 적용합니다.
복사
임베드
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
단일 문에서 링크 번호를 쉼표로 구분하여 여러 링크에 스타일을 추가할 수도 있습니다:
복사
임베드
linkStyle 1,2,7 color:blue;
연결선 곡선 스타일 설정
기본 방법이 요구 사항을 충족하지 못하면 프로젝트 간 연결선의 곡선 스타일을 설정할 수 있습니다. 사용 가능한 곡선 스타일에는 basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter 및 stepBefore가 있습니다.
아래 예에서는 왼쪽에서 오른쪽으로의 차트가 stepBefore 곡선 스타일을 사용합니다.
복사
임베드
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
노드 스타일 설정
노드에 특정 스타일을 설정할 수 있습니다. 예를 들어 더 굵은 테두리나 다른 배경색을 지정할 수 있습니다.
복사
임베드
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
클래스
매번 스타일을 정의하는 것보다 스타일 클래스를 정의하고 해당 클래스를 다른 모양이 필요한 노드에 첨부하는 것이 더 편리합니다.
클래스 정의는 다음과 같습니다:
복사
임베드
classDef className fill:pink,stroke:#333,stroke-width:4px;
또한 단일 문에서 여러 클래스에 대한 스타일을 정의할 수 있습니다:
복사
임베드
classDef firstClassName,secondClassName font-size:12pt;
클래스를 노드에 첨부하는 작업은 다음과 같습니다:
복사
임베드
class nodeId1 className;
또한 단일 문에서 클래스를 노드 목록에 첨부할 수 있습니다:
복사
임베드
class nodeId1,nodeId2 className;
클래스 추가는 ::: 연산자를 사용하여 클래스 이름을 노드에 첨부할 수 있습니다. 아래와 같습니다:
복사
임베드
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
노드 사이에 여러 링크를 선언할 때 이 형식을 사용할 수 있습니다:
복사
임베드
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- 그래프 선언에서 문은 이제 세미콜론으로 끝나지 않아도 됩니다. 0.2.16 버전 이후로 그래프 문은 세미콜론으로 끝나는 것이 선택 사항입니다. 따라서 아래 그래프 선언은 이전 그래프 선언과 마찬가지로 유효합니다.
- 정점과 링크 사이에는 공백 하나가 허용됩니다. 그러나 정점과 그 텍스트, 링크와 그 텍스트 사이에는 공백이 없어야 합니다. 이전 그래프 선언도 여전히 유효하므로 이 새로운 기능은 선택 사항이며 가독성을 높이기 위한 것입니다.
다음은 연결선의 새 선언으로, 이전 연결선 선언과 마찬가지로 유효합니다.
복사
임베드
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
