Markdown에서 GPT 와이어프레임, 코드 확인 방법

Markdown

 

Mermaid 다이어그램 확인하기

GPT가 생성한 Mermaid.js 구조 예시:

```mermaid
graph TD
     A[로그인 페이지] --> B[대시보드]
    B --> C[설정 페이지]
```

▶︎ 확인 가능한 환경:

• Mermaid Live Editor ← 붙여넣기만 하면 즉시 확인 가능
• Notion: 설정 → Labs → Mermaid 지원 켜기
• Obsidian, Typora, VS Code (Mermaid 플러그인 설치 필요)
• GitHub: 최근에는 일부 Mermaid 지원 (gist나 .md 파일에서 확인 가능)

 

HTML/Tailwind 코드 확인하기

GPT가 만든 HTML 코드는 다음과 같이 Markdown에 삽입합니다:

```html
<div class="flex">
     <div class="w-1/2 bg-gray-100">왼쪽</div>
     <div class="w-1/2">오른쪽</div>
</div>
```

 

확인 방법:

• Markdown 파일을 HTML로 변환해서 확인하거나,
• CodePen, JSFiddle, Vite + Tailwind 프로젝트에 붙여넣기

🔸 예: 코드 미리 보기 하고 싶다면

1. CodePen.io
2. HTML 영역에 GPT 코드 붙여넣기
3. Tailwind CDN 추가 → <script src="https://cdn.tailwindcss.com"></script>
4. 행하면 즉시 시안 확인 가능

 

요약

내용	확인 방법
Mermaid 와이어프레임	Mermaid Live Editor, Notion, Obsidian
GPT HTML/Tailwind 코드	CodePen, VS Code + Live Server, Vite
Markdown 문법 내 시각화	Markdown Preview 지원 에디터 사용