221006_Mermaid를 이용한 Markdown 작성

Csw·2022년 10월 6일

mermaid

Tools

목록 보기

1/1

🤩 `markdown 작성 시 mermaid 사용해보기`

VS Code를 이용해보자!!!!!!!

🥡 `확장 플러그인 설치`

🥡 `마크다운 파일 생성`

🥡 `mermaid` 를 이용한 `diagram` 작성

작성 방법은 아래와 같다.

작성 예시 참고 : Mermaid github

🥡 `mermaid` 사용법

다이어그램 종류

🥗 순서도(Flowchart) : flowchart

모든 순서도는 노드, 기하학적 모양 및 가장자리, 화살표 또는 선으로 구성됨.

mermaid 코드는 이러한 node와 edge가 만들어지고 상호 작용하는 방식을 정의함.

🥗 시퀀스 다이어그램(Sequence Diagram) : sequenceDiagram

공정이 서로 어떻게 그리고 어떤 순서로 작동하는지 보여주는 상호 작용 다이어그램

🥗 클래스 다이어그램(Class Diagram) : classDiagram

소프트웨어 공학에서 통합 모델링 언어(UML)의 클래스 다이어그램(class diagram)은 시스템의 클래스, 속성, 작업(또는 방법) 및 객체 간의 관계를 보여줌으로써 시스템의 구조를 설명하는 정적 구조 다이어그램의 한 유형

🥗 상태 다이어그램(State Diagram) : stateDiagram

컴퓨터 과학 및 관련 분야에서 시스템의 동작을 설명하기 위해 사용되는 다이어그램의 한 유형.

상태 다이어그램은 기술된 시스템이 유한한 수의 상태로 구성되어 있어야 함.

🥗 엔티티 관계도(Entity relationship diagram) : erDiagram

특정 지식의 영역에서 상호 연관된 관심사를 설명.

기본 ER 모형은 (관심 있는 것들을 분류하는) 엔티티 유형으로 구성됨.

엔티티 간에 존재할 수 있는 관계(그 엔티티 유형의 인스턴스)를 명시함.

🥗 사용자 이동 경로 다이어그램(User Journey Diagram) : journey

시스템, 애플리케이션 또는 웹 사이트 내에서 다양한 사용자가 특정 작업을 완료하기 위해 어떤 단계를 밟는지 자세히 설명.

이 기법은 현재(있는 그대로) 사용자 워크플로우를 보여주고, 향후 워크플로우에 대한 개선 영역을 나타냄.

🥗 간트 차트(Gantt) : gantt

막대 차트의 일종으로, 프로젝트 일정과 하나의 프로젝트가 완료되는 데 걸리는 시간을 보여줌.

간트 차트는 프로젝트의 터미널 요소와 요약 요소의 시작 날짜와 종료 날짜 사이의 일 수를 보여줌.

🥗 원형 차트(Pie Chart) : pie

숫자 비율을 나타내기 위해 조각으로 나누어 표현.

🥗 요구사항 다이어그램(Requirement Diagram) : requirementDiagram

요구사항과 요구사항의 상호 연결 및 기타 문서화된 요소에 대한 시각화를 제공.

모델링 사양은 SysML v1.6에 정의된 사양을 따름.

🥗 깃 다이어그램(Gitgraph Diagram) : gitDiagram

다양한 분기에 대한 git 커밋 및 git 액션(명령)을 그림으로 표현한 것

🥗 C4 다이어그램 (C4 Diagram) : C4Content

공식문서 기준으로 그릴 수는 있으나 아직 실험 중인 다이어그램