# NoteRich에서 Mermaid.js를 사용하여 플로우차트를 만드는 방법 – 완전한 튜토리얼 복잡한 프로세스, 시스템 아키텍처, 또는 의사결정 트리를 시각화하는 것은 텍스트만으로는 어려울 수 있습니다. **Mermaid.js**는 강력한 JavaScript 기반의 다이어그램 및 차트 생성 도구로, 간단한 텍스트 정의를 사용하여 다이어그램을 만들 수 있습니다. **NoteRich**에서는 Mermaid.js를 직접 편집기에 통합하여, 노트를 떠나지 않고 전문적인 플로우차트, 시퀀스 다이어그램 등을 생성할 수 있습니다. 이 가이드에서는 NoteRich에서 Mermaid 다이어그램을 마스터하는 데 필요한 모든 정보를 알려드리겠습니다. AI와 OCR을 사용하여 다이어그램을 즉시 생성하는 방법도 포함되어 있습니다. --- ## 🚀 NoteRich에서 Mermaid를 사용하는 이유는? * **텍스트 기반:** 코드를 사용하여 다이어그램을 정의함으로써 버전 관리 및 편집이 용이합니다. * **실시간 미리보기:** 입력할 때마다 변경 사항을 즉시 확인할 수 있습니다. * **다재함:** 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, 가트맨 차트 등을 지원합니다. * **AI & OCR 기반:** 자연어 설명이나 기존 이미지를 스캔하여 다이어그램을 생성합니다. * **로컬 우선:** 다이어그램 정의는 노트에 로컬로 저장되어 개인정보 보호 및 오프라인 접근이 가능합니다. --- ## 📝 시작하기: Mermaid 다이어그램 삽입 NoteRich에서 Mermaid 다이어그램을 삽입하는 세 가지 주요 방법이 있습니다: ### 방법 1: 슬래시 명령어 (`/`) 1. 다이어그램을 원하는 위치에 커서를 놓습니다. 2. `/`를 입력하여 구성 요소 선택기를 열어줍니다. 3. **"Mermaid"** 또는 **"다이어그램"**을 검색합니다. 4. 목록에서 **"Mermaid 다이어그램"**을 선택합니다. ### 방법 2: 도구 모음 1. 도구 모음의 **삽입** 버튼을 클릭합니다. 2. **시각화** 또는 **다이어그램** 섹션으로 이동합니다. 3. **Mermaid**를 클릭합니다. ### 방법 3: AI 어시스턴트 1. **AI 어시스턴트**를 열어줍니다 (`/ai` 또는 도구 모음을 통해). 2. 원하는 다이어그램을 설명합니다(예: "사용자 로그인 프로세스의 플로우차트를 생성하세요"). 3. AI가 Mermaid 코드를 생성해줍니다. 이 코드는 노트에 직접 삽입할 수 있습니다. 삽입 후, 코드 편집기와 실시간 미리보기 창이 있는 구성 모달이 나타납니다. --- ## 🛠️ Mermaid 편집기 인터페이스 NoteRich의 Mermaid 편집기는 효율성을 위해 설계되었습니다: * **코드 영역:** Mermaid 구문을 작성할 수 있는 단일 공간 텍스트 영역입니다. * **실시간 미리보기:** 다이어그램의 실시간 렌더링입니다. 문법 오류가 있으면 오류가 표시되어 디버깅을 도와줍니다. * **도움말 아이콘:** "다이어그램 코드" 옆의 `?` 아이콘을 클릭하여 [Mermaid.js 문서](https://mermaid.js.org/intro/)를 열어 자세한 문법 참고 자료를 확인할 수 있습니다. * **확인 버튼:** 다이어그램을 저장하고 노트에 삽입합니다. > **팁:** 노트에 있는 기존 Mermaid 다이어그램을 더블 클릭하여 편집기를 다시 열고 변경할 수 있습니다. --- ## 📊 기본 플로우차트 문법 플로우차트는 Mermaid의 가장 일반적인 사용 사례입니다. 다음은 플로우차트를 만드는 방법입니다. ### 1. 방향 정의 플로우의 방향을 정의합니다: * `graph TD`: 상하 방향 * `graph LR`: 좌우 방향 * `graph BT`: 하상 방향 * `graph RL`: 우하 방향 ### 2. 노드 추가 노드는 ID와 레이블로 정의됩니다. ```mermaid graph TD A[시작] --> B[프로세스] B --> C{결정] C -->|예| D[종료] C -->|아니오| B ``` * `[텍스트]`: 직사각형 노드 * `(텍스트)`: 둥근 직사각형 * `((텍스트))`: 원형 * `{텍스트}`: 직사각형 (결정) * `[[텍스트]]`: 서브루틴 ### 3. 노드 연결 * `-->`: 단단한 화살표 * `-.->`: 점선 화살표 * `==>`: 두꺼운 화살표 * `-- 텍스트 -->`: 레이블이 있는 화살표 --- ## 🤖 AI 기반 다이어그램 생성 코드를 작성하고 싶지 않으신가요? NoteRich의 AI가 대신 해드릴 것입니다. 1. **AI 어시스턴트**를 열어줍니다. 2. "고객이 온라인으로 주문하는 과정을 나타내는 Mermaid 시퀀스 다이어그램을 생성해 주세요."와 같은 프롬프트를 입력합니다. 3. AI가 다음과 같은 코드 블록을 반환합니다: ```mermaid sequenceDiagram participant Customer participant Website participant Database Customer->>Website: 주문하기 Website->>Database: 재고 확인 Database-->>Website: 재고 있음 Website-->>Customer: 주문 확인됨 ``` 4. 코드를 복사하거나 AI 인터페이스에서 사용 가능한 "삽입" 버튼을 사용하여 노트에 추가합니다. --- ## 📸 OCR: 손글씨 또는 인쇄된 다이어그램 스캔 白板 사진이나 인쇄된 플로우차트가 있나요? NoteRich의 **Note Scanner (OCR)**를 사용하면 편집 가능한 Mermaid 코드로 변환할 수 있습니다. 1. **AI 어시스턴트**를 열고 **Note Scanner (OCR)**를 선택합니다. 2. 손글씨나 인쇄된 다이어그램의 이미지를 업로드합니다. 3. 프롬프트에서 "이 이미지를 Mermaid.js 플로우차트 코드로 변환해 주세요."라고 지정합니다. 4. AI가 이미지 구조를 분석하고 해당 Mermaid 문법을 생성합니다. 5. 편집기에서 생성된 코드를 검토하고 약간의 인식 오류를 조정합니다. > **참고:** 최상의 결과를 얻으려면 이미지가 선명하고 텍스트가 읽을 수 있도록 해야 합니다. 복잡한 손글씨 스케치는 변환 후 약간의 수정이 필요할 수 있습니다. --- ## 🎨 고급 기능 ### 노드 스타일링 CSS 클래스나 인라인 스타일을 사용하여 특정 노드의 외관을 맞춤 설정할 수 있습니다. ```mermaid graph LR A[시작] --> B[프로세스] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### 서브그래프 관련 노드를 함께 그룹화하여 더 나은 구조를 만듭니다. ```mermaid graph TD subgraph Frontend A[React 앱] --> B[UI 컴포넌트] end subgraph Backend C[API 서버] --> D[데이터베이스] end B --> C ``` ### 시퀀스 다이어그램 Mermaid는 플로우차트만을 위한 것이 아닙니다. 시스템 간의 상호작용을 시각화하기 위해 시퀀스 다이어그램도 만들 수 있습니다. ```mermaid sequenceDiagram participant User participant NoteRich participant Server User->>NoteRich: 노트 편집 NoteRich->>Server: 데이터 저장 Server-->>NoteRich: 저장 확인 NoteRich-->>User: UI 업데이트 ``` --- ## 💡 NoteRich 사용자를 위한 프로 팁 1. **특수 문자 이탈자:** 노드 텍스트에 `[]`나 `()`와 같은 특수 문자가 포함된 경우, 텍스트를 따옴표로 감싸줍니다. ```mermaid graph TD A["브라켓이 있는 노드"] --> B["원이 있는 노드"] ``` 2. **이미지로 복사:** 다이어그램이 렌더링된 후, 플로팅 도구 모음을 표시하려면 클릭합니다. "이미지 복사" 버튼을 사용하여 다이어그램을 Slack, Notion 또는 이메일과 같은 다른 애플리케이션에 붙여넣습니다. 3. **SVG 다운로드:** 프로 사용자는 프레젠테이션이나 출판물에 사용할 수 있는 고품질 SVG 파일로 다이어그램을 다운로드할 수 있습니다. --- ## ❓ 문제 해결 * **다이어그램 렌더링되지 않음?** 미리보기 창의 오류가 표시됩니다. 일반적인 문제로는 마감 괄호 `]`가 누락되거나 잘못된 화살표 문법이 있습니다. * **문법 오류?** 올바른 Mermaid 버전 문법을 사용하고 있는지 확인하세요. NoteRich은 최신 안정 버전의 Mermaid.js를 사용합니다. 확실하지 않다면 [공식 문서](https://mermaid.js.org/intro/)를 참고하세요. * **OCR 정확도?** OCR 결과가 완벽하지 않다면 AI 어시스턴트를 사용하여 코드를 수정하세요. 대략적인 OCR 출력물을 붙여넣고 AI에게 "Mermaid 문법 수정"을 요청할 수 있습니다. --- ## 🏁 결론 NoteRich의 Mermaid.js는 프로세스와 시스템을 문서화하는 방식을 변화시켜줍니다. 다이어그램을 코드로 유지함으로써 항상 최신 상태를 유지하고 수정하기 쉽게 만들며, 지식 베이스와 원활하게 통합됩니다. AI 생성 및 OCR 스캔 기능을 통해 복잡한 시각적 자료를 만들기가 이전보다 훨씬 쉬워졌습니다. 오늘부터 여러분의 아이디어를 시각화해 보세요! ---