Mermaid
확장자.mermaid , .mmd
MIME typetext/vnd.mermaid

TEST

ETC

---
title: Node with text
---

%% this is comment

flowchart LR
    id1[This is the text in the box]

    A -- text --> B -- text2 --> C

    style id1 fill:#f9f,stroke:#333,stroke-width:4px
TB위에서 아레Top to bottom
TD위에서 아레Top-down/ same as top to bottom
BT아레서 위Bottom to top
RL오른쪽에서 왼쪽Right to left
LR왼쪽에서 오른쪽Left to right
sequenceDiagram
gitGraph
flowchart
classDiagram
stateDiagram-v2
C4Context미묘...
subgraph title
    graph definition
end

%%는 주석

graph TD;
    A-->B;
    A-->C{b};
    B-->D[Sqaure];
    C-->D;

GameSir G8 Galileo

VSCode Extension

commit type
NORMAL
REVERSE
HIGHLIGHT
---
title: Git branch - Client
---

%%{init: {
  'logLevel': 'debug',
  'theme': 'default',
  'themeVariables': {
    'git0': '#000000',
    'git1': '#00ff00',
    'git2': '#f000ff',
    'git3': '#ff0000'
  },
  'gitGraph': { 'rotateCommitLabel': false }
}}%%

%% gitGraph TB:
gitGraph LR:
    commit
    
    branch task/issue-id
    checkout task/issue-id
    commit
    checkout main
    merge task/issue-id
    commit
    
    branch release
    checkout release
    commit type:HIGHLIGHT id: "merge with main" tag:"0.0.0"

    branch hotfix/issue-id
    checkout hotfix/issue-id
    commit

    checkout release
    merge hotfix/issue-id tag: "0.0.1"


---
title: Git branch - Server
---

%%{init: {
  'logLevel': 'debug',
  'theme': 'default',
  'themeVariables': {
    'git0': '#000000',
    'git1': '#00ff00',
    'git2': '#f000ff',
    'git3': '#f000ff',
    'git4': '#ff0000'
  },
  'gitGraph': { 'rotateCommitLabel': false }
}}%%

%% gitGraph TB:
gitGraph LR:
    commit
    
    branch task/issue-id
    checkout task/issue-id
    commit
    checkout main
    merge task/issue-id
    commit

    branch server/dev
    checkout server/dev
    commit type:HIGHLIGHT id: "merge with main"

    
    branch server/live
    checkout server/live
    commit type:HIGHLIGHT id: "merge with server/dev" tag:"0.0.0"

    branch hotfix/issue-id
    checkout hotfix/issue-id
    commit

    checkout server/live
    merge hotfix/issue-id tag: "0.0.1"

---
title: Git branch - Localize
---

%%{init: {
  'logLevel': 'debug',
  'theme': 'default',
  'themeVariables': {
    'git0': '#000000',
    'git1': '#00ff00',
    'git2': '#f000ff',
    'git3': '#ff0000'
  },
  'gitGraph': { 'rotateCommitLabel': false }
}}%%

%% gitGraph TB:
gitGraph LR:
    commit
    
    commit
    
    branch distribute/dev
    checkout distribute/dev
    commit type:HIGHLIGHT id: "merge with main"


    branch distribute/live
    checkout distribute/live
    commit type:HIGHLIGHT id: "merge with distribute/dev"

Ref

  • https://www.dandoescode.com/blog/plantuml-vs-mermaid