Коли текст оживає в малюнках: Як перетворити код і дані на зрозумілу історію (Особистий досвід експерта з 20-річним стажем)
Чи замислювалися ви колись, дивлячись на заплутані блоки у вашому додатку для нотаток, що вони означають? Або, можливо, стикалися з складною схемою в технічній документації, відчуваючи себе розгадувачем давньоєгипетських ієрогліфів? Я розумію це відчуття як ніхто інший. У своїй роботі бізнес-аналітика, яка триває вже понад два десятиліття, я регулярно стикаюся з цим. Пригадую, як мій колега-дизайнер намагався пояснити мені нову концепцію, малюючи щось схоже на абстрактну скульптуру на серветці.
Мені, як і, мабуть, більшості з вас, простіше сприймати інформацію візуально. Ось чому відео, що візуалізують дані, такі популярні – ми краще розуміємо, коли бачимо, а не просто читаємо. Тому я вирішив поділитися з вами секретом, як змусити ІІ-агенти “малювати” та візуалізувати процеси.
Виявляється, штучний інтелект здатен не тільки писати код, а й малювати, пояснювати та візуалізувати дані. Уявіть собі: ваш помічник з кодування може створювати діаграми, які не тільки виглядають гарно, а й дійсно розповідають історію. Саме це я реалізовую у своїй повсякденній роботі, а також поділюся цим досвідом з вами.
Раніше я часто використовував Excalidraw, потужну програму для створення діаграм, у своїй роботі. Зараз я інтегрував її можливості з моїм кодувальним агентом. І ось, після багатьох експериментів, я готовий поділитися цим досвідом. Мета полягає в тому, щоб кодувальний агент не лише писав коди, але й допомагав візуалізувати їх, створюючи зрозумілі схеми.
Розділ 1: Коли код починає “говорити” візуально
В ході роботи над складними бізнес-застосуваннями, мені неодноразово доводилося описувати архітектуру або логіку систем. Раніше це вимагало або зосередженого вивчення довгих фрагментів коду, або спроб самостійно намалювати щось, що було б більш-менш зрозумілим, витрачаючи дорогоцінний час.
Тепер я просто кажу: “Гей, мій “Клод Код”, поясни мені цю частину коду діаграмою!”. І він робить це. Не просто перелік блоків, а зрозуміла візуалізація, що показує суть.
Останні кілька тижнів я присвятив саме цьому. Працювати було цікаво, адже ІІ не завжди дружить з візуалізацією. Він добре справляється з текстом та логікою, але малювання… Це як просити кота прочитати вам лекцію з квантової фізики. Спроби будуть, але результат може бути не зовсім таким, як очікувалося.
Я знайшов оптимальний інструмент – Excalidraw. Він дозволяє створювати “мальовані” діаграми, які виглядають невимушено та природно. Використовуючи мій досвід та знання Excalidraw, я створив спеціальну “навичку”. Вона дозволяє будь-якому кодувальному агенту – наприклад, Claude Code – “розмовляти” візуально, що значно підвищує ефективність у бізнес-аналізі.
Нотатка про особистий досвід: З позиції експерта з багаторічним досвідом, я можу стверджувати, що візуальний формат сприйняття інформації значно посилює розуміння. Люди з різним рівнем підготовки, як правило, краще запам’ятовують і швидше розуміють інформацію, коли бачать її графічне представлення.
Розділ 2: Як “приручити” кодувального агента до малювання? (Експертний підхід)
Отож, як це працює? Хоч і просто, але ефективно. Я розробив GitHub-репозиторій, де вміщено все для цієї “Excalidraw-навички”. Щоб розпочати, просто клонуйте репозиторій. Потім створіть директорію для навичок у вашому кодувальному агенті, наприклад, do.cloud/skills, та скопіюйте туди все з мого репозиторію. Готово! Ваш агент здатний творити.
Розповім, як воно виглядає у моїй конфігурації. У мене є директорія do.cloud/skills, де я створив папку “Excalidraw” і розмістив туди все з репозиторію.
Найважливіший тут файл – skill.md. Він містить основні інструкції, які навчають Claude Code, як візуалізувати дані, створюючи JSON-файли для Excalidraw-діаграм.
Що цікаво, я використав цю навичку для створення діаграми, яка пояснює весь цей процес! Це демонструє потужність інструменту. Спочатку діаграма виглядала дещо спрощено, але після кількох ітерацій вона стала саме такою, як планувалася.
Як застосувати це на практиці? Увійдіть у Claude Code та скажіть: “Створи діаграму, що пояснює…”. Потім вкажіть шлях до файлу, наприклад, до скрипту YouTube-відео (що я часто роблю для своїх роликів) або навіть до PDF-документа. Він зможе візуалізувати все, що завгодно!
Розділ 3: Магія самостійної валідації (або як ШІ перевіряє власну роботу)
Коли ви відправляєте запит, Claude Code (або інший агент) завантажує цю навичку. І починається магія. Ми даємо йому інструкції, як згенерувати діаграму, і головне – як її перевірити.
Валідація – це процес, коли агент не просто створює діаграму, а й оцінює її. Він генерує візуалізацію, робить скріншот, а потім аналізує зображення, виявляючи недоліки. Якщо щось не так, він вносить виправлення. Це дійсно вражає!
Попередження з особистого досвіду: Не намагайтеся пояснити складні речі довгими текстами, коли можна зобразити їх графічно. Це як намагатися детально описати рецепт борщу, описуючи кожну молекулу, замість простого переліку інгредієнтів та кроків приготування.
Яку користь це приносить? Кодувальні агенти не завжди сильні у візуальних завданнях. Їм потрібен інструмент для перевірки своєї роботи. Excalidraw, у поєднанні з цією навичкою, надає саме таку можливість.
Після того, як агент створив JSON-файл діаграми, ви можете зайти на excaldraw.com та завантажити його або використати плагін Excalidraw в Obsidian. Це безкоштовно та зручно.
Розділ 4: Від “сирого” до “ідеального” (і чому це нормально)
Не варто очікувати, що перша діаграма буде бездоганною. Навіть ця, мета-діаграма, яка описує систему, потребувала кількох ітерацій. Ось, для прикладу, перший варіант, створений Claude Code. Він виглядає непогано, але…
- Стрілки дещо “несправні”.
- Одна стрілка занадто коротка.
- Кольори не зовсім ті, що потрібно.
- Інформації малувато.
Мої критичні зауваження. Але найбільше тішить, що з цим легко працювати! Кілька уточнень – і ми наближаємося до ідеалу.
Чому так відбувається? Великій мовній моделі потрібно прийняти величезну кількість мікро-рішень: вибір кольору, форми, розташування кожного елемента. Це як малювати портрет – кожен штрих має значення.
Але в нас є чудовий старт! Ця навичка – це основа, від якої можна відштовхуватися, додаючи власне бачення та необхідну інформацію.
Розділ 5: Філософія: “Візуалізуй, щоб зрозуміли”
Основна ідея моєї навички – навчити кодувального агента “аргументувати візуально”. Це означає, що ми не просто створюємо блоки. Ми робимо так, щоб структура та підписи пояснювали суть контенту.
Навіть якщо видалити весь текст з діаграми, ви все одно повинні зрозуміти, про що йдеться. Це нагадує план міста: навіть без назв вулиць можна зрозуміти, де розташовані парки, площі та головні дороги.
Я поставив агенту два критичних запитання:
- Чи відображає візуальна структура поведінку концепції?
- Чи можна щось дізнатися з цієї діаграми?
Мій досвід роботи та любов до освітнього контенту підкреслюють важливість того, щоб діаграми доповнювали розповідь, а не існували ізольовано.
Розділ 6: Робочий процес: від ідеї до діаграми
Отже, як відбувається процес створення діаграми?
- Ідея: Все починається з вашої ідеї. Навичка передбачає, що ви знаєте, що саме хочете візуалізувати. Ви можете обговорити це з агентом перед використанням навички.
- Оцінка складності: Агент визначає складність діаграми. Для складних діаграм необхідно створювати фрагменти, щоб не перевищити ліміт токенів (32 000 у Claude Code).
- Зображення патерну: Агент перетворює ідею на конкретні форми, текст, структуру. Це основа для JSON-файлу.
- Генерація JSON: Створення файлу, зрозумілого Excalidraw.
- Цикл валідації: Найцікавіша частина! Агент генерує PNG, аналізує зображення, шукає помилки (візуальний потік, ієрархія інформації) та вносить зміни в JSON. Зазвичай потрібно 2-4 ітерації.
Розділ 7: Персоналізація: Кольори, шаблони та ваш унікальний стиль
Налаштування – одна з чудових можливостей. Діаграми можна адаптувати до вашого бренду та стилю.
Репозиторій містить файл з кольоровою палітрою. Ви можете просто сказати агенту: “Використовуй фіолетовий та жовтий замість синього”, і він згенерує відповідні HEX-коди. Після цього, ваші діаграми будуть у ваших кольорах.
Ви також можете налаштувати шаблони елементів, щоб контролювати, які “цеглинки” використовуватиме агент.
Все працює “з коробки”, якщо ви не хочете витрачати час на налаштування. Але персоналізація робить навичку надзвичайно гнучкою.
Висновок: Ваші ідеї заслуговують кращої візуалізації
Отже, друзі, навичка Excalidraw для кодувальних агентів – це інструмент, що може заощадити години роботи щотижня. Це інструмент, який перетворює код та дані на зрозумілу історію.
Я закликаю вас: клонуйте репозиторій, встановіть навичку та спробуйте її. Хоч на PDF-документі, на уривку коду, на простому тексті. Можливості безмежні!
Мова не лише про діаграми. Мова про те, як зробити складне доступним. Як будувати мости між технічною складністю та розумінням людей.
Якщо вам сподобалося відео та ви хочете бачити більше матеріалів про навички та “агентну інженерію”, ставте лайки, підписуйтесь. Давайте творити разом!
Підсумовуючи, ми отримали потужний інструмент, який дозволяє кодувальним агентам візуалізувати інформацію по-новому. Самовалідація, гнучкість у налаштуваннях та легкість використання роблять цю навичку цінною. Тож не бійтеся експериментувати! Ваші ідеї заслуговують того, щоб їх побачили чітко та зрозуміло.
