markdown에서 프로세스 그래프 설명

카탈로그

1. Mermaid 프로세스 다이어그램

예제

문법 구조

디스플레이 방향

노드 유형

문법 상해

노드 연결

노드 스타일

2. Flowchart 프로세스 맵

예제

문법 구조

노드 유형

문법 상해

노드 정의

노드 연결

와이어 스타일

키워드

노드 상태

3. 시차도

예제

문법 구조

문법 상해

메시지 형식

연결 스타일

활성화 블록

참고 사항

순환(while)

조건(if/else)

  markdown은 서로 다른 플러그인으로 이루어지고 대응하는 문법도 다르다. 플러그인은 인용된 문법을 상응하는 라벨로 대응하는 것이다. 본고는 CSDN에서 작성한 것을 예로 삼아 메르메드와flowchart에 대해 실례적인 설명과 문법 해석을 한다.
1. Mermaid 프로세스 다이어그램
예제

	```mermaid
	graph TB
	A[Apple]-->B{Boy}
	A---C(Cat)
	B.->D((Dog))
	C== ==>D
	style A fill:#2ff,fill-opacity:0.1,stroke:#faa,stroke-width:4px
	style D stroke:#000,stroke-width:8px;
	```

야옹
Apple
Boy
Cat
Dog
문법 구조

	```mermaid
	graph   
	        （           ）
	（    ）
	```

방향 표시

TB/TD(top bottom/top down)는 위에서 아래로

BT(bottom top)는 아래에서 위로

RL(right left)은 오른쪽에서 왼쪽으로

LR(left right)은 왼쪽에서 오른쪽

을 나타냅니다.
노드 유형
  노드 자체의 표현 형식은 서로 다른 괄호를 통해 각기 다른 모양을 대표하고 기본적으로 직사각형이다.

기본 노드: A

사각형 노드: B[사각형]

둥근 사각형 노드: C(둥근 사각형)

원형 노드: D(원형)

비대칭 노드: E>비대칭]

마름모 노드: F{마름모}

A
직사각형
둥근 사각형
원형.
비대칭
마름모꼴
문법 설명
노드 연결
   선 자체의 형식은 여러 가지가 있는데 일반적인 영문 형식의 형식을 통해 다음과 같이 표시한다.

화살표 연결 A1-->B1

오픈 연결 A2---B2

점선 화살표 연결 A3.->B3 또는 A3-.->B3

점선 연결 A4.-B4나 A4-. -B4

굵은 화살표 연결 A5==>B5

굵은 선 개방 연결 A6===B6

라벨 점선 화살표 연결 A7-.text.->B7

레이블 오픈 연결 A8--text---B8

text
text
A1
B1
A2
B2
A3
B3
A4
B4
A5
B5
A6
B6
A7
B7
A8
B8
노드 스타일
  스타일 쓰기는 벡터 맵(SVG)의 CSS 쓰기와 일치하며 다음과 같은 속성을 포함합니다.

style       

2. Flowchart 흐름도
예제

	```mermaid
	flowchat
	st=>start:   
	e=>end:   
	op1=>operation:   1 | past
	op2=>operation:   2 | current
	op3=>operation:   3 | future
	pa=>parallel:      4 | approved
	cond=>condition:   ？ | rejected
	
	st->op1->cond
	cond(true)->e	
	cond(no)->op2(right)->op3->pa(path1,right)->op1
	pa(path2,left) ->e
	st@>op1({"stroke":"Blue"})@>cond({"stroke":"Green"})@>e({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})
	```

Created with Rapha l 2.2.0 시작 1 확인끝 조작 2 조작 3 다수출 조작 4 yes no
문법 구조

	```mermaid
	flowchat
	    
	    
	（    ）
	```

노드 유형
   현재 홈페이지에서 7가지 노드를 제공하고 있지만 다른 노드 유형이 많이 있지만 플러그인 스크립트가 지원되지 않았을 수도 있습니다.

시작(타원형):start

끝(타원형):end

작업(사각형):operation

다수출 조작(사각형):parallel

조건판단(마름모꼴):condition

입력출력(평행사각형): inputoutput

예처리/서브루틴(성지형):subroutine

문법 설명
노드 정의

   =>    :      

노드 연결

   1->   2->...->   n

연결 스타일
  변수 m과 변수 n 사이의 연결 스타일을 설정합니다. 구체적인 스타일은 변수 n 뒤에 있는 키-value로 제어되며 두 변수 사이에 직접적인 연결이 필요합니다.구문의 연결 문자는 (@>)입니다.

   m@>   n({"key":"value"})

키워드

yes/true:condition 유형 변수 연결 시 yes 조건의 흐름 방향을 표시하는 데 사용

no/false: 동상으로 부정조건의 흐름을 나타낸다

left/right: 연결 출구가 노드 위치에 있음을 표시합니다(기본 아래는 출구,op3),condition 변수와 함께 사용할 수 있습니다:cond(yes,right)

path1/path2/path3:parallel 변수의 세 개의 출구 경로(기본 아래는 출구)

노드 상태
노드에 대해 다른 상태를 설정하면 다음과 같은 6가지 색상으로 표시될 수 있습니다. 의미는 영문과 같지만 CSDN에서는 지원되지 않는 것 같습니다.

past

current

future

approved

rejected

invalid

3. 시차도
예제

	```mermaid
	    sequenceDiagram
	    participant   as   
	    participant   as   
	    participant   as       
	      ->> + :   ！  ,      ?
	     -->>  :       ，  ？
	     --x - :    ，  !
	    activate  
	     -x  :    ，  !   
	    Note over  , :         ,      
       .
	    deactivate  
	    loop      
	     -->> :      
	     -->> :    
	    end
	     -->> :      ...
	     ->> :   ...   ,     ?
	```

장삼이, 이, 사왕오 안녕!이사, 요즘 어때요?너 요즘 어때, 왕오야?고맙습니다.고맙습니다.이사는 오랫동안 생각했는데 글이 너무 길어서 한 줄에 놓기에 적합하지 않았다.생각 좀 해봐야겠다 loop [이사 또 생각] 왕오를...좋아..왕오 씨, 어떠세요?장 삼 이 사 왕 오
문법 구조

	```mermaid
	    sequenceDiagram
	    participant    as      （             ）
	             
	    （        ）
	```

문법 설명
메시지 형식

【  1】【    】【  2】 :     

연결 스타일
총 6가지 유형의 화살표 유형:

실선: ->

점선: -->

화살표가 있는 실선: ->>

화살표가 있는 점선: -->>

x가 있는 실선: -x

x가 있는 점선: --x

활성화 블록
   이 부분에는 두 가지 문법이 있는데 첫 번째는 문법을 통해 이루어진 것을 나타낸다. 문법은 다음과 같다. 지정한 대상의 메시지에 증가한다. 예시에서 이사.두 번째는 바로 객체 앞에 플러스 마이너스(시작할 때는 플러스'+', 끝날 때는 마이너스'-')를 추가하면 플러스 대응하는 대상에서 시작하고 마이너스 대응하는 시간은 끝난다. 예에서 왕오이다.

  ：activate 【  】
  ：deactivate 【  】

메모

Note 【  】 【  】

주석이 표시되는 위치는 태그가 지정된 객체의 중심을 참조계로 하는 세 가지로, 예를 들어 여러 횡단을 기준으로 쉼표로 구분할 수 있습니다.

right of

left of

over

주기(while)
예시를 보다

loop     
【   】
end

조건(if/else)

alt     
【   】
else
【   】
end

opt     
【   】
end

예시 내용이 너무 많아서 너무 비대해지는 것을 방지하기 위해 조건 내용을 독립적으로 프레젠테이션을 하고else가 있을 때alt를 사용하며 그렇지 않으면opt를 사용합니다.

	```mermaid
	    sequenceDiagram
	    participant   as   
	    participant   as   
	      ->>  :   ！  ,      ?
	    alt      
	     ->>  :    ，   。
	    else    
	     ->>  :    ，  。
	    end
	        opt     
	         ->>  :     。
	    end
	```

장삼이, 이사님 안녕하세요!이사, 요즘 어때요?그다지 좋지 않아, 병이 났어.고맙습니다.alt [감기 걸리면] [좋네] 감사합니다.장삼이사
참조:https://mermaidjs.github.io/http://flowchart.js.org/