Сценарій

Створюйте та редагуйте Mermaid-діаграми у Slack

Slack сам не відображає Mermaid. З Arialine ви можете написати Mermaid самостійно — введіть /arialine і вставте код, і він відобразиться точно так, як написаний, без ШІ, — або описати діаграму звичайною мовою, і Arialine напише код за вас. У будь-якому разі діаграма з’являється у Slack як PNG та інтерактивний HTML-файл, а колеги змінюють її відповіддю в гілці, а не починають спочатку.

1Проблема

У чому проблема з Mermaid у Slack

  • Slack показує Mermaid як звичайний код — ніхто не рецензує діаграму, якої не бачить.
  • Скриншот локального превʼю Mermaid втрачає код, тож пізніше його ніхто не відредагує.
  • Сам PNG не показує, який код актуальний і яке обговорення призвело до зміни.
  • Slack екранує символи на кшталт > та & у повідомленнях, через що стрілки типу -->> непомітно ламаються, коли копіюєте код назад.
2Як це розвʼязує Arialine

Два способи створити Mermaid-діаграму у Slack

  1. 1

    Напишіть самі: вставте Mermaid

    Введіть /arialine, а після нього код Mermaid, або лише /arialine, щоб відкрити форму New diagram. Також можна згадати @arialine з блоком ```mermaid або поділитися файлом .mmd. Коректний Mermaid відображається точно так, як написаний, без виклику моделі ШІ.

  2. 2

    Опишіть: нехай Arialine напише код

    Напишіть речення в тій самій формі або згадайте @arialine: «checkout-процес із чергою повторів і dead-letter-чергою після трьох спроб». Arialine напише Mermaid, перевірить його й опублікує діаграму. Код завжди можна переглянути й експортувати.

  3. 3

    Перевірка перед публікацією

    Кожну діаграму спершу перевіряє рендерер. Помилковий Mermaid AI виправляє автоматично (або пропонує картку з виправленням в один клік) — зламана діаграма ніколи не публікується.

  4. 4

    Інтерактивний HTML + PNG у гілці

    На компʼютері ви отримуєте інтерактивний HTML-файл із масштабуванням, а всюди інде — PNG. Код лишається привʼязаним до дошки, і його будь-коли можна експортувати як .mmd, PNG або SVG.

  5. 5

    Редагуйте, не починаючи спочатку

    Колеги відповідають у гілці діаграми — «@arialine add a fraud check before payment» — і Arialine змінює наявний код, а не малює нову картинку. Кожна зміна — пронумерована версія з Undo, Rewind і посиланням на повідомлення, яке її ініціювало.

3Використовуйте код, який уже маєте

Вставте Mermaid — і редагуйте далі

Вставте блок коду Mermaid або завантажте .mmd і скористайтеся Render as diagram. Автоматичний рендеринг залежить від налаштувань каналу. Перегляньте опубліковану діаграму й код, перш ніж просити про зміну.

Дошка зберігає редагований Mermaid. Експортуйте код як .mmd або рендер як PNG чи SVG; у режимі пропозицій перегляньте запитану зміну, перш ніж застосувати її.

Вікно Arialine з кодом Mermaid, який можна редагувати
Експортуйте код як .mmd або рендер як PNG чи SVG.
4Що ви отримаєте

Діаграма просто в каналі

Arialine відповідає дошкою: відображений PNG, інтерактивний HTML-файл із масштабуванням і прокручуванням та кнопки History, Branch і Export. Наступні версії з’являються в гілці під нею.

Налаштування за кілька хвилин

  1. 1Натисніть Add to Slack і підтвердьте Arialine для свого робочого простору (можливо, знадобиться схвалення адміністратора).
  2. 2Запросіть його в канал: введіть /invite @Arialine.
  3. 3Введіть /arialine, вставте свій Mermaid або опишіть діаграму й натисніть Create.
  4. 4Відповідайте в гілці діаграми з @arialine і змінами, щоб створити версію 2.
Повідомлення Arialine у Slack із відображеною діаграмою checkout-review, кнопками History і Branch, меню Export та інтерактивним HTML-файлом
FAQ

Часті запитання

Чи підтримує Slack Mermaid-діаграми?+

Не нативно: Slack показує Mermaid як блок коду. Відображати його має застосунок для Slack. Arialine відображає вставлений або надісланий Mermaid і публікує результат як PNG та інтерактивний HTML-файл у каналі.

Яка найкраща інтеграція Mermaid для Slack?+

Якщо потрібне лише одноразове зображення, вистачить простого рендерера. Якщо діаграма змінюватиметься, Arialine створено саме для цього: він відображає вставлений Mermaid без ШІ, генерує Mermaid зі звичайного опису та зберігає кожну зміну як версію разом із повідомленням у Slack, що стоїть за нею.

Чи потрібно знати синтаксис Mermaid?+

Ні. Можна просто описати діаграму звичайними словами — @arialine сам напише Mermaid. Вставлений готовий Mermaid рендериться напряму, без AI.

Які типи діаграм Mermaid підтримуються?+

Усі типи Mermaid 12, а також ZenUML: flowchart, sequence, class, state, ER, C4, Gantt, pie, mindmap, timeline, Git graph, user journey, quadrant, requirement, Sankey, XY chart, block, packet, kanban, architecture, radar, treemap, swimlane, use case, event modeling, Venn, Ishikawa (fishbone), Wardley map, Cynefin, tree view, railroad, agent flow. PNG, інтерактивний HTML і PDF малюють однакові типи.

Чим це відрізняється від Mermaid Preview?+

Arialine робить усе, що й Mermaid Preview, — слеш-команда, вставлений Mermaid, відображена діаграма в каналі — і робить це краще: також публікує інтерактивний HTML, зберігає код, дозволяє колегам редагувати діаграму в її гілці, зберігає кожну версію та вміє писати Mermaid з опису.

Чи працює рендеринг, якщо AI-модель недоступна?+

Так — коректний вставлений Mermaid рендериться напряму без моделі, тож рендеринг працює навіть під час збою LLM.

Спробуйте у своєму робочому просторі

Free містить усі функції: до 3 дошок і 10 AI-генерацій на робочий простір щодня. Дії без моделі не витрачають щоденний ліміт. Може знадобитися схвалення адміністратора робочого простору.