[short tip]Mermaid문법, 노션 또는 draw.io로 코드 구조 시각화하기

코드를 이해하기 위해서 시각적 그래프를 그릴 필요가 있다.

 

1. 먼저 chatGPT로 주어진 코드를 머메이드 코드로 변환하자

* mermaid 문법 : 순서도, 구조도를 나타내는 문법

https://chat.openai.com/

ChatGPT

https://sharegpt.com/c/RTp19sz

Java DFS BFS Flowchart - A ShareGPT conversation

https://sharegpt.com/c/YF25kaX

Code Logic Explanation - A ShareGPT conversation

1. 노션 활용법

노션 창에서 코드 블럭(''')에 변환된 코드를 붙여넣고, Mermaid 옵션을 선택

예쁘게 그려주지만, 편집이 어려움.

 

2. draw.io 활용

주석은 모두 삭제한다

필요하다면 배치 -> 레이아웃 으로 재배치한다