2 days ago

Open

#53 MarkMermaid 사용 가이드

KKoZZi @admin

# MarkMermaid 사용 가이드

**MarkMermaid**는 Markdown 문서 작성과 Mermaid 다이어그램을 지원하는 macOS 에디터입니다.

> 이 문서는 다양한 Markdown 문법과 Mermaid 다이어그램 예제를 보여줍니다.

---

## 목차

- [기본 문법](#기본-문법)
- [코드 블록](#코드-블록)
- [Mermaid 다이어그램](#mermaid-다이어그램)
- [단축키](#단축키)

---

## 기본 문법

### 텍스트 스타일

| 스타일 | 문법 | 결과 |
|--------|------|------|
| 굵게 | `**텍스트**` | **굵은 텍스트** |
| 기울임 | `*텍스트*` | *기울인 텍스트* |
| 취소선 | `~~텍스트~~` | ~~취소된 텍스트~~ |
| 인라인 코드 | `` `코드` `` | `인라인 코드` |

### 목록

**순서 없는 목록:**
- 첫 번째 항목
- 두 번째 항목
  - 중첩된 항목
  - 또 다른 중첩
- 세 번째 항목

**순서 있는 목록:**
1. 문서 작성
2. 미리보기 확인
3. PDF로 내보내기

### 인용문

> "좋은 문서는 좋은 소프트웨어의 시작입니다."
>
> — *Unknown Developer*

### 링크와 이미지

- [GitHub](https://github.com)
- [Mermaid 공식 문서](https://mermaid.js.org)

---

## 코드 블록

### Swift 예제

```swift
struct MarkdownDocument {
    var title: String
    var content: String

func save(to url: URL) throws {
        try content.write(to: url, atomically: true, encoding: .utf8)
    }
}
```

### Python 예제

```python
def parse_markdown(content: str) -> dict:
    """마크다운 문서를 파싱합니다."""
    lines = content.split('\n')
    return {
        'title': lines[0].lstrip('# '),
        'body': '\n'.join(lines[1:])
    }
```

### JSON 설정

```json
{
  "app": "MarkMermaid",
  "version": "1.0.0",
  "features": ["markdown", "mermaid", "pdf-export"]
}
```

### Java 예제

```java
public class MarkdownParser {
    private String content;

public MarkdownParser(String content) {
        this.content = content;
    }

public String getTitle() {
        return content.lines()
            .findFirst()
            .map(line -> line.replaceFirst("^#\\s*", ""))
            .orElse("Untitled");
    }
}
```

### HTML 예제

```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>MarkMermaid Preview</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="preview" class="markdown-body">
        <h1>Hello, Markdown!</h1>
    </div>
    <script src="marked.min.js"></script>
</body>
</html>
```

### JavaScript 예제

```javascript
// Mermaid 다이어그램 렌더링
async function renderMermaid() {
    const diagrams = document.querySelectorAll('.language-mermaid');

for (const element of diagrams) {
        const code = element.textContent;
        const { svg } = await mermaid.render('diagram', code);
        element.innerHTML = svg;
    }
}

document.addEventListener('DOMContentLoaded', renderMermaid);
```

### Bash 예제

```bash
#!/bin/bash

# 마크다운 파일을 PDF로 변환
convert_to_pdf() {
    local input="$1"
    local output="${input%.md}.pdf"

echo "Converting $input to $output..."
    pandoc "$input" -o "$output" --pdf-engine=xelatex

if [ $? -eq 0 ]; then
        echo "Success: $output created"
    else
        echo "Error: conversion failed"
        exit 1
    fi
}

# 모든 .md 파일 변환
for file in *.md; do
    convert_to_pdf "$file"
done
```

---

## Mermaid 다이어그램

### 1. 플로우차트 (Flowchart)

앱의 문서 처리 흐름을 보여줍니다:

```mermaid
graph TD
    A[문서 열기] --> B{파일 형식?}
    B -->|.md| C[Markdown 파싱]
    B -->|.txt| D[텍스트 로드]
    C --> E[Preview 렌더링]
    D --> E
    E --> F{Mermaid 포함?}
    F -->|Yes| G[다이어그램 렌더링]
    F -->|No| H[완료]
    G --> H
```

### 2. 시퀀스 다이어그램 (Sequence)

에디터와 프리뷰 간의 동기화:

```mermaid
sequenceDiagram
    participant User as 사용자
    participant Editor as 에디터
    participant VM as ViewModel
    participant Preview as 프리뷰

User->>Editor: 텍스트 입력
    Editor->>VM: contentChanged
    VM->>Preview: 콘텐츠 업데이트
    Preview-->>User: 실시간 미리보기

User->>Editor: 스크롤
    Editor->>VM: scrollChanged
    VM->>Preview: 스크롤 동기화
```

### 3. 클래스 다이어그램 (Class)

앱의 주요 구조:

```mermaid
classDiagram
    class MarkdownDocument {
        +UUID id
        +String title
        +String content
        +URL filePath
        +save()
        +load()
    }

class DocumentViewModel {
        +MarkdownDocument document
        +ViewMode viewMode
        +updateContent()
        +openDocument()
        +saveDocument()
    }

class ContentView {
        +EditorWebView editor
        +PreviewWebView preview
    }

DocumentViewModel --> MarkdownDocument
    ContentView --> DocumentViewModel
```

### 4. 상태 다이어그램 (State)

문서의 상태 변화:

```mermaid
stateDiagram-v2
    [*] --> New: 앱 실행
    New --> Editing: 내용 입력
    Editing --> Modified: 변경됨
    Modified --> Saved: 저장 (Cmd+S)
    Saved --> Editing: 수정
    Modified --> Editing: 계속 수정

Editing --> [*]: 앱 종료
    Saved --> [*]: 앱 종료
```

### 5. ER 다이어그램 (Entity Relationship)

데이터 모델 관계:

```mermaid
erDiagram
    DOCUMENT ||--o{ VERSION : has
    DOCUMENT {
        uuid id PK
        string title
        string content
        datetime modified_at
    }
    VERSION {
        uuid id PK
        uuid document_id FK
        string content
        datetime created_at
    }
    USER ||--o{ DOCUMENT : owns
    USER {
        uuid id PK
        string name
        string email
    }
```

### 6. 파이 차트 (Pie)

기능 구성 비율:

```mermaid
pie showData
    title MarkMermaid 기능 구성
    "Markdown 편집" : 40
    "실시간 미리보기" : 25
    "Mermaid 렌더링" : 20
    "PDF/인쇄" : 15
```

### 7. 간트 차트 (Gantt)

개발 일정 예시:

```mermaid
gantt
    title MarkMermaid 개발 로드맵
    dateFormat YYYY-MM-DD
    section 핵심 기능
        에디터 구현      :done, a1, 2024-01-01, 30d
        프리뷰 구현      :done, a2, after a1, 20d
        Mermaid 통합    :done, a3, after a2, 15d
    section 추가 기능
        PDF 내보내기    :done, b1, after a3, 10d
        인쇄 기능       :done, b2, after b1, 7d
        다중 창 지원    :active, b3, after b2, 5d
    section 개선
        성능 최적화     :c1, after b3, 14d
        UI 개선        :c2, after b3, 14d
```

---

## 단축키

| 기능 | 단축키 |
|------|--------|
| 새 문서 | `Cmd + N` |
| 열기 | `Cmd + O` |
| 저장 | `Cmd + S` |
| 찾기 | `Cmd + F` |
| 바꾸기 | `Cmd + H` |
| 인쇄 | `Cmd + P` |
| PDF 내보내기 | `Cmd + Shift + E` |
| 에디터만 | `Ctrl + Cmd + 1` |
| 분할 보기 | `Ctrl + Cmd + 2` |
| 프리뷰만 | `Ctrl + Cmd + 3` |

---

**MarkMermaid** - *Write Markdown, Visualize Ideas*

Tasks

MarkMermaid 사용 가이드#

MarkMermaid는 Markdown 문서 작성과 Mermaid 다이어그램을 지원하는 macOS 에디터입니다.

이 문서는 다양한 Markdown 문법과 Mermaid 다이어그램 예제를 보여줍니다.

기본 문법#

텍스트 스타일#

스타일	문법	결과
굵게	`텍스트`	굵은 텍스트
기울임	`텍스트`	기울인 텍스트
취소선	`~~텍스트~~`	~~취소된 텍스트~~
인라인 코드	`코드`	`인라인 코드`

목록#

순서 없는 목록:

첫 번째 항목
두 번째 항목
- 중첩된 항목
- 또 다른 중첩
세 번째 항목

순서 있는 목록:

문서 작성
미리보기 확인
PDF로 내보내기

인용문#

"좋은 문서는 좋은 소프트웨어의 시작입니다."

— Unknown Developer

링크와 이미지#

코드 블록#

Swift 예제#

struct MarkdownDocument {
    var title: String
    var content: String

    func save(to url: URL) throws {
        try content.write(to: url, atomically: true, encoding: .utf8)
    }
}

Python 예제#

def parse_markdown(content: str) -> dict:
    """마크다운 문서를 파싱합니다."""
    lines = content.split('\n')
    return {
        'title': lines[0].lstrip('# '),
        'body': '\n'.join(lines[1:])
    }

JSON 설정#

{
  "app": "MarkMermaid",
  "version": "1.0.0",
  "features": ["markdown", "mermaid", "pdf-export"]
}

Java 예제#

public class MarkdownParser {
    private String content;

    public MarkdownParser(String content) {
        this.content = content;
    }

    public String getTitle() {
        return content.lines()
            .findFirst()
            .map(line -> line.replaceFirst("^#\\s*", ""))
            .orElse("Untitled");
    }
}

HTML 예제#

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>MarkMermaid Preview</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="preview" class="markdown-body">
        <h1>Hello, Markdown!</h1>
    </div>
    <script src="marked.min.js"></script>
</body>
</html>

JavaScript 예제#

// Mermaid 다이어그램 렌더링
async function renderMermaid() {
    const diagrams = document.querySelectorAll('.language-mermaid');

    for (const element of diagrams) {
        const code = element.textContent;
        const { svg } = await mermaid.render('diagram', code);
        element.innerHTML = svg;
    }
}

document.addEventListener('DOMContentLoaded', renderMermaid);

Bash 예제#

#!/bin/bash

# 마크다운 파일을 PDF로 변환
convert_to_pdf() {
    local input="$1"
    local output="${input%.md}.pdf"

    echo "Converting $input to $output..."
    pandoc "$input" -o "$output" --pdf-engine=xelatex

    if [ $? -eq 0 ]; then
        echo "Success: $output created"
    else
        echo "Error: conversion failed"
        exit 1
    fi
}

# 모든 .md 파일 변환
for file in *.md; do
    convert_to_pdf "$file"
done

Mermaid 다이어그램#

1. 플로우차트 (Flowchart)#

앱의 문서 처리 흐름을 보여줍니다:

graph TD
    A[문서 열기] --> B{파일 형식?}
    B -->|.md| C[Markdown 파싱]
    B -->|.txt| D[텍스트 로드]
    C --> E[Preview 렌더링]
    D --> E
    E --> F{Mermaid 포함?}
    F -->|Yes| G[다이어그램 렌더링]
    F -->|No| H[완료]
    G --> H

2. 시퀀스 다이어그램 (Sequence)#