# Як використовувати 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 Редактор 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. Введіть команду, наприклад: “створити діаграму послідовності для клієнта, який здійснює замовлення онлайн”. 3. AI поверне код у вигляді: ```mermaid sequenceDiagram participant Клієнт participant Сайт participant База даних Клієнт->>Сайт: Замовлення Сайт->>База даних: Перевірка наявності товару База даних-->>Сайт: Товар доступний Сайт-->>Клієнт: Замовлення підтверджено ``` 4. Копіюйте код чи використовуйте кнопку “Вставити”, щоб додати його до нотатки. --- ## 📸 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 Клієнт participant NoteRich participant Server User->>NoteRich: Редагування нотатки NoteRich->>Server: Збереження даних Server-->>NoteRich: Підтвердження збереження NoteRich-->>User: Оновлення UI ``` --- ## 💡 Поради для користувачів NoteRich 1. **Евакуація спеціальних символів:** Якщо текст вузла містить спеціальні символи, наприклад `[]` чи `()`, обгорніть текст у лапки. ```mermaid graph TD A["Node with [brackets]"] --> B["Node with (parentheses)]" ``` 2. **Копіювання у вигляді зображення:** Після того, як діаграма буде відображена, натисніть на неї, щоб відкрити панель інструментів. Використовуйте кнопку “Копіювати зображення”, щоб вставити діаграму в інші програми, такі як Slack, Notion чи електронну пошту. 3. **Завантаження SVG:** Продвинуті користувачі можуть завантажити діаграму у вигляді якісного SVG-файлу для використання в презентаціях чи публікаціях. --- ## ❓ Виправлення проблем * **Діаграма не відображається?** Перевірте повідомлення про помилки у вікні перегляду. Зазвичай проблеми полягають у відсутності закінчувальних лапок `]` чи неправильному синтаксисі стрілок. * **Помилки в синтаксисі?** Переконайтеся, що ви використовуєте правильну версію Mermaid.js. NoteRich використовує останню стабільну версію Mermaid.js. Якщо ви не впевнені, ознайомтеся з офіційною документацією [Mermaid.js.org](https://mermaid.js.org/intro/). * **Точність OCR?** Якщо результат OCR не ідеальний, використовуйте AI-асист для виправлення коду. Можна вставити приблизний результат OCR та попросити AI виправити синтаксис. --- ## 🏁 Висновок Mermaid.js у NoteRich змінює спосіб документування процесів та систем. Завдяки збереженню діаграм у вигляді коду ви можете бути впевнені, що вони завжди будуть актуальними, легкими для модифікації та безпосередньо пов’язаними з вашою базою знань. Завдяки AI-створенню діаграм та OCR-скануванню створення складних візуальних матеріалів стало значно простішим. Почніть візуалізацію своїх ідей вже сьогодні! ---