#ObsidianCanvas

💹 Раніше в моїй уяві “планування” значило або стратегічне на кшталт “чого я (чи ми) хочемо досягнути цього року”, або процедурне “розбити розвʼязок на кроки”. Останнім часом зрозумів, що чого дійсно не вистачає — це тактичного планування з метою зрозуміти “що це значить та з чого складається”, а потім вже “що робити”. Причому так розглядати можна будь-які справи, навіть малі — якщо вони викликають роздуми, а не чіткий поклик до дії. Навіть навпаки, малі справи з невизначеністю здатні вбити весь ентузіазм.

🎨 Зараз я беру Obsidian Canvas. Починаю з постановки задачі. А далі скидаю на канву думки, з яких поступово вимальовується картина задачі та зрештою наступні дії. Те саме можна робити на папері, або навіть в текстовому редакторі. Корисно забарвлювати вузли різними стилями: твердження, знання, питання, висновки, дії.

➡️ Потім, коли зробив достатньо планування, виписую декілька наступних дій. Нічого дивного в тому, що вони дуже відрізняються від “очевидних” дій, які я записував раніше. Як один приклад: з мети “худнути” виплив проєкт “навчитися привабливо подавати страви”… 🍱

🏃‍♂️ Якщо невизначену задачу відразу почати з постановки кроків, то, по-перше, зі всією ймовірністю ми оберемо щось наївне та позбавлене змісту, що потім тільки демотивує як робити, так і планувати надалі.

🧠 А по-друге, та більш важливо, весь той контекст, що був тільки що записаний, залишився б в голові. А коли голову звільнити — то в неї полізуть нові ідеї. В тому числі навіяні тим, що ми записали.

В Obsidian Canvas бракує можливості перетворити список задач у вузли канви. Проте канва — це просто документ JSON з простою схемою. Взявся згенерувати.

Взагалі сама генерація не ставить проблем. ID для вузла може бути будь-яким рядком, унікальним в межах канви; UUID цілком влаштовує. З розміром вузлів доведеться вгадати; хоча розумніший алгоритм можливо дивився б на довжину рядка. Можна було б зробити обробку вкладених списків, якщо розбирати Markdown, а також звʼязувати вузли між собою.

Мені поки було потрібно тільки перетворити простий список у вузли, тому й скрипт вийшов дуже простий.

А далі стало дурне питання: як його додати в Obsidian? Дурне, бо звісно ж, файл можна просто скопіювати чи навіть перетягнути у вікно Obsidian. Але мені не стільки потрібний файл, скільки ці ж вузли на канві, що вже існує. В ідеалі, скопіювати їх в буфер та вставити, куди потрібно. Спробував звичайним pbcopy - нічого не вийшло; код JSON додається текстом. При цьому в самому Obsidian можна копіювати та вставляти з канви, тож що не так?

Знайшов у XCode Additional Tools утиліту Clipboard Viewer. Вона показала, що Obsidian копіює дані у “внутрішньому форматі”, а саме org.chromium.web-custom-data. :) Всередині з HEX-перегляду очевидно сидить той самий JSON, але як його прочитати? А ще, як записати? З вихідного коду Chromium знайшов, що дані закодовані в формат Pickle (не той самий, що в Python.) Формат простецький, за допомогою ImHex запрототипував читач.

Далі — як його записати в буфер обміну? Не те щоб хотів знову про Swift, але на macOS легше за все це зробити з оточення Apple функцією Pasteboard.setData(forType:). Але як у Swift зібрати той бінарний формат? Знайшов за рекомендацією клас ByteBuffer з офіційної бібліотеки для серверної розробки Swift NIO.

Довелося ще згадати про те, що система в мене big-endian, а формат цей little-endian… але зрештою все запрацювало та результат успішно вставився в канву! Таке рішення могло б допомогти в інших випадках, коли застосунки на Electron/Chromium копіюють у внутрішньому форматі… є ідеї?

У форматі JSON Canvas мене відразу привабило те, що у вузлів та ребер можуть зʼявлятися власні атрибути; таким чином, канва набуває не тільки вигляду, а й змісту, тобто стає семантичною.

Наприклад, якщо порівняти моє виконання схеми BRIDGeS (див. малюнок вище) в Obsidian та офіційне в Figma, то в останньому схема має суто візуальний характер: це вузли різного кольору та приліплені до них візуально відмітки пріоритетів. А в Obsidian кожен тип вузла та кожен пріоритет стає атрибутом.

Мені зараз для планування потрібне рішення, щоб було помітно, де задача, де питання, де ідея, а де просто факт. Поки що просто придумав фарбувати активні задачі червоним, а виконані — зеленим (це єдина вбудована можливість оформлення, якщо не рахувати Markdown). Але хочу зробити власні атрибути, та за допомогою Obsidian Canvas Style Menu їх оформити.

Це стане корисним для автоматичної обробки. Наприклад, скрипт може знайти в канві всі задачі, та зробити список за пріоритетом. Також, звісно, оформлення допомагає розрізняти вузли, причому можна навіть комбінувати класи: на ілюстрації зверху дуже просте поєднання типу (за кольором) та пріоритету (міткою); але можна робити навіть на кшталт “якщо це задача та вона виконана, показати галочку.”

Ось перша версія стилів для канви. Не знаю, наскільки вони універсальні, бо мені більше подобається ідея стилів для індивідуальних потреб — в кого як голова працює.

Що в мене: по-перше, обовʼязково треба бачити, які вузли потребують додаткового опрацювання. Це задачі (червоним), питання (жовтим) та ідеї (синім). Далі, відзначаю закінчені (зеленим), скасовані (сірим), та заблоковані (крижано-блакитним) вузли, щоб не звертати увагу на них. Тип та стан можна поєднувати: заблоковане питання. Нарешті, для кращої організації додав великі та дуже великі вузли; вони грають роль заголовків.

Про технічну реалізацію. В Obsidian потужна система змінних CSS. Через неї, в сукупності з сучасними функціями CSS як calc та color-mix, можна вийти на власний набір кольорів. Масштабування вузлів зробив через атрибут zoom; так вони зберігають внутрішню структуру.

До речі, всі ці стилі можна додавати не тільки до текстових вузлів, а й до будь-яких — малюнків, вебсторінок тощо. Сторінки на канві я не люблю, бо це виходить повільно, до того ж більше хотілося б додавати вирізки, а не весь зміст. А малюнки навпаки, революційно зручно. Почав розуміти, чому Obsidian Sync надає 40 Гб місця — для тексту точно занадто.

Весь пакет можна забрати тут, але зручності поки на альфа-рівні. Пізніше, теоретично можна навіть написати скрипт, який зробить все повністю автоматично, оскільки всі налаштування — це зміст файлів JSON, не більше.

Приблизно відтоді, як відкрив для себе Obsidian Canvas, в моєму житті відбулася просто революція когнітивних мап. Це прям помітно розширює здібності.

Я взагалі звик до текстових документів чи списків-нарисів. Мапа мені зручніше, бо вона не є лінійною. Пробував після мап робити нариси — вони скоріше втрачають ясність та стають стіною тексту, який потрібно читати, щоб знайти місце. А в мапі місце часто запамʼятовується візуально. Так би мовити, складність O(1) замість O(N).

Це важливо, бо наші думки лінійні — наступна заміняє попередню. А предметна область ніколи не лінійна. Коли ми думаємо про будь-який предмет, то неминуче стрибаємо від одного до іншого аспекту. Це робити незрівнянно легше, коли фіксуєш думки в мапу.

По-перше, не доводиться тримати в голові весь “стек” того, про що можна подумати. Так голова вільніша думати “вперед”, а не “назад”. По-друге, ще й нічого не забудеш. Мапа залишається як нагадування про всі можливі напрямки міркувань.

Ефект такий, що коли я помічаю, що ментально “буксую”, то простий процес побудови мапи думок приносить ясність. Причому доходиш до розуміння, на яке до того навіть натяку не було, ось що найцікавіше.

Я зазвичай бачу приклади мап думок як щось завершене, як конспект. Треба розуміти, що найбільше користі від них в процесі; тому всім раджу спробувати власноруч. Софт шукати не обовʼязково — вистачить аркушу A4.

Не так давно писав про генерацію Obsidian Canvas зі списку. Сьогодні переді мною стала зворотна задача. В канві накопичилася купка задач та я хотів перекинути їх у список. (Бо саму канву як список задач складно використовувати.) Отже, проста людина перекопіювала б ті задачки за декілька хвилин. Але ж мені потрібно автоматизоване рішення.

Дописав до утиліти pbcopy-chromium з попереднього поста режим вставки: тобто тепер вона може вивести зміст буфера обміну Chromium - наприклад, вузли канви. Бо конвертувати цілий файл то гарно, але на практиці сьогодні пені потрібні були лише декілька вузлів.

Далі в мене є нехитрий скрипт на Ruby, який обходить спрямований граф вузлів та будує з них список в Markdown. Це така задача, яку в повному обсязі буде досить складно розвʼязати (бо є цикли, орієнтація вузлів в просторі, різновиди стрілочок-ребер), але якщо обмежитись обумовленими, “нормальними” графами, то це традиційний обхід в глибину.

На Markdown історія не закінчується, бо ті списки в мене сидять в Reminders.app. А туди Markdown не вставиш. (Та й взагалі можливості вводу-виводу мінімальні.) Знайшов поки тільки ручне рішення — скопіювати список у Notes.app, там перетворити його на “список задач”, та ось цей “список задач” вже можна скопіювати у Reminders. Поки не знайшов, як то автоматизувати, бо формат буфера обміну тут знову закритий, com.apple.notes.richtext, та бозна-як з ним працювати.

Obsidian Canvas - найбільш успішний з інструментів, що я спробував у 2024. Але в цього доповнення є суттєві недоліки. Головний з них — навіть не брак функціональності (хоча в порівнянні з іншими програмами тут сміховинні можливості стилізації.) А те, що Obsidian Canvas не має відкритих точок розширення. Дарма що це офіційний плагін, документовані тільки його CSS-стилі.

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

Отже, нещодавно я подивився на доповнення Excalidraw. Взагалі Excalidraw це векторний редактор для вебу, а це доповнення інтегрує його в Obsidian (де редактор працює вже з файлами з Obsidian, без жодної привʼязки до якогось сервера). Документи Excalidraw виглядають (примруживши очі) так само як і Canvas. Зате в Excalidraw багатші образотворчі можливості: не тільки вбудована стилізація, а й бібліотека фігур тощо.

Але можливо, головне це те, що в доповнення Excalidraw є відкритий API. Причому, як я розумію, зроблений конкретно для Obsidian.

Також документи Excalidraw зберігаються так, що їхній зміст видно в пошуку Obsidian (а документи Canvas - ні або неповноцінно.) Структура канви й там, і там знаходиться у JSON, з тою різницею, що в Excalidraw він містить більше атрибутів стилю, тому є більшим за розміром.

Я поки не вирішив, чи переїду на Excalidraw. З недоліків: тут немає форматування Markdown прямо на канві та не так зручно робити стрілочки (доводиться кожну створювати окремо, тоді як в Canvas можна одним рухом миші створити вузол, привʼязаний до поточного.)