# Как использовать Mermaid.js для создания схем в NoteRich – полный руководство Визуализация сложных процессов, системных архитектур или деревьев решений может быть сложной при использовании только текста. **Mermaid.js** – это мощный инструмент для создания диаграмм и графиков на основе JavaScript, который позволяет создавать диаграммы с помощью простых текстовых определений. В **NoteRich** мы интегрировали Mermaid.js напрямую в редактор, что позволяет создавать профессиональные схемы, последовательные диаграммы и многое другое, не покидая при этом свои заметки. Это руководство поможет вам понять все, что необходимо для использования диаграмм Mermaid в NoteRich, включая способы использования AI и OCR для создания диаграмм мгновенно. --- ## 🚀 Почему использовать Mermaid в NoteRich? * **Текстовое представление:** Определите свои диаграммы с помощью кода, что делает их легко управляемыми и подлежащими редактированию. * **Прямая превью:** Увидите изменения сразу после ввода текста. * **Универсальность:** Поддерживает схемы, последовательные диаграммы, диаграммы классов, диаграммы состояний, графы Ганта и многое другое. * **AI и OCR:** Создание диаграмм на основе описаний в естественном языке или путем сканирования существующих изображений. * **Локальная хранение:** Определения диаграмм хранятся локально в ваших заметках, что обеспечивает конфиденциальность и возможность использования в автономном режиме. --- ## 📝 Начало: вставка диаграммы Mermaid Есть три основных способа вставки диаграммы Mermaid в NoteRich: ### Способ 1: Команда `/` 1. Положите курсор в нужное место для вставки диаграммы. 2. Нажмите `/`, чтобы открыть меню компонентов. 3. Найдите **"Mermaid"** или **"Diagram"**. 4. Выберите **Mermaid Diagram** из списка. ### Способ 2: Панель инструментов 1. Нажмите кнопку **Insert** в панели инструментов. 2. Перейдите в раздел **Visualization** или **Diagrams**. 3. Нажмите **Mermaid**. ### Способ 3: AI-ассистент 1. Откройте **AI Assistant** (через `/ai` или панель инструментов). 2. Опишите диаграмму, которую вы хотите создать (например, "Создать схему процесса входа пользователя"). 3. AI создаст код диаграммы для вас, который можно будет вставить в вашу заметку. После вставки появится окно конфигурации с редактором кода и окном прямой превью. --- ## 🛠️ Интерфейс редактора Mermaid Редактор Mermaid в NoteRich предназначен для повышения эффективности: * **Окно для кода:** Простое поле для ввода текста, в котором вы можете написать синтаксис Mermaid. * **Прямая превью:** Рендеринг диаграммы в реальном времени. Если есть ошибки синтаксиса, появится надпись с описанием ошибки, чтобы помочь в отладке. * **Иконка помощи:** Нажмите иконку `?` рядом с "Код диаграммы", чтобы открыть официальную документацию [Mermaid.js](https://mermaid.js.org/intro/) с подробными рекомендациями по синтаксису. * **Кнопка подтверждения:** Сохраняет диаграмму и вставляет ее в заметку. > **Совет:** Можно двойным кликом на любую существующую диаграмму Mermaid в вашей заметке снова открыть редактор и внести изменения. --- ## 📊 Основный синтаксис схемы Схемы – самый распространенный случай использования Mermaid. Вот как их создавать. ### 1. Определение направления Начните с определения направления процесса: * `graph TD`: Вверх-вниз * `graph LR`: Влево-вправо * `graph BT`: Вниз-вверх * `graph RL`: Вправо-влево ### 2. Добавление узлов Узлы определяются по идентификатору и метке. ```mermaid graph TD A[Начало] --> B[Процесс] B --> C{Решение} C -->|Да| D[Конец] C -->|Нет| B ``` * `[Текст]`: Квадратный узелок. * `(Текст)`: Округленный квадратный узелок. * `((Текст))`: Круглый узелок. * `{Текст}`: Ромбовидный узелок (решение). * `[[Текст]]`: Подручный узелок. ### 3. Соединение узлов * `-->`: Твердый стрелка. * `-.->`: Пунктирная стрелка. * `==>`: Толстая стрелка. * `-- Текст -->`: Стрелка с меткой. --- ## 🤖 Генерация диаграмм с помощью AI Не хотите писать код? Пусть AI в NoteRich это сделает за вас. 1. Откройте **AI Assistant**. 2. Введите команду вроде: *"Создать последовательную диаграмму Mermaid для клиента, который оформляет заказ онлайн."* 3. AI вернет код в виде следующего примера: ```mermaid sequenceDiagram participant Customer participant Website participant Database Customer->>Website: Оформить заказ Website->>Database: Проверить наличие товара Database-->>Website: Товар доступен Website-->>Customer: Заказ подтвержден ``` 4. Копируйте код или используйте кнопку **Insert**, чтобы вставить его в свою заметку. --- ## 📸 OCR: Сканирование рукописных или напечатанных диаграмм У вас есть фотография доски или напечатанная схема? **NoteRich’s Note Scanner (OCR)** может преобразовать ее в редактируемый код Mermaid. 1. Откройте **AI Assistant** и выберите **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 App] --> B[UI Components] end subgraph Backend C[API Server] --> D[Database] 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. --- ## 🏁 Заключение Mermaid.js в NoteRich меняет способ документирования процессов и систем. Путем сохранения диаграмм в виде кода вы гарантируете, что они всегда будут актуальными, легко модифицируемыми и интегрированными с вашей базой знаний. С помощью AI-генерации и OCR-сканирования создание сложных визуальных изображений стало проще, чем когда-либо. Начните визуализацию ваших идей сегодня! ---