Оцініть ідею сервісу інтерактивних діаграм зі спільним редагуванням

Вже 5 років я працюю над своїм проєктом і ось нарешті вирішив його відкрити та поділитися із DOU спільнотою. schem.io — це сервіс для спільного (але поки що не в «лайв» режимі) малювання інтерактивних діаграм. Я вже раніше викладав відкриту версію цього проєкту з бекендом на Google Drive, а також з можливістю запуску локально, та у вигляді Electron програми. Але потім я зрозумів, що основний потенціал Schemio буде повністю розкритий, якщо люди зможуть працювати разом і робити свої діаграми публічно доступними. І ось зараз я прохаю DOU спільноту оцінити саму ідею та її реалізацію.

Можливості Schemio

Спочатку Schemio мав бути простою програмою для створення діаграм, проте після реалізації головних фіч, я зрозумів, що його можна застосовувати і для таких речей як прототипування, слайд шоу або використовувати як векторний редактор SVG. Ось список загальних фіч:

  • Опис та лінки для кожного елемента діаграми
  • Relative transformation — можна будь-який елемент причепити до іншого елементу та створити ієрархічну структуру. Таким чином можна групувати різні елементи, щоб їх ховати, показувати або анімувати.
  • Event handling — можна задати різні ефекти на різні події, такі як натискання, наведення курсору або кастомні події.
  • Різні функції анімації (рухи, системи часток та інше)
  • Динамічне завантаження діаграм — можна підвантажувати діаграми будь-якого рівня вкладеності. Так можно грузити більш детальні діграмми для якихось елементів.
  • Компонентні елементи — можна будь-який елемент діаграми повторно використовувати як внутрішню компоненту
  • Frame Animation — покадрова анімація дозволяє більш тонко налаштувати анімацію сцени.
  • Скриптінг — можна запускати власний код мовою Schemio Script
  • Малювання будь-яких фігур та експорт у SVG або PNG
  • Templated Items — можна використовувати шаблони для створення слайд-шоу, дропдаун, панелі з табами і т.д. Щоправда, поки що вони дуже обмежені, але я планую додати більше шаблонів у майбутньому.
  • Patch Requests — можливо надсилати будь-кому запит на зміну діаграми.

Демо

Ось демка, яка показує різні можливості Schemio — schem.io/...​G0b/docs/USqkMRHEY7JZav9t. Ця демка є відповіддю на відоме питання на технічних співбесідах «Що відбувається коли користувач вбиває адресу сайту в браузері». Демка складається з різніх діаграм, які динамічно навантажуються при натисканні на «Show more».

Є ще такі демо:

Open-Source

Основна частина проєкту викладена в опен-соурс на GitHub github.com/ishubin/schemio та розповсюджується за ліцензією Mozilla Public License Version 2.0. Проєкт написаний на JavaScript, Vue.js, а рендеринг реалізовано на SVG. Бекендова частина schem.io написана на Go, але поки що закрита.

Команди у мене немає, працюю сам у вільний від основної роботи час. Буду радий будь-якій критиці, відгукам, ідеям, а також допомоги у тестуванні.

👍ПодобаєтьсяСподобалось3
До обраногоВ обраному1
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

круто! і домен гарний! роби більш юзер френдлі і більш логічно для новачків! і воно стрельне, не зупиняйся ui/ux і дизайн, я б рекомендував відвязатись від гунл драйва або опційно це зробити, а і ще щоб можна було анонімно та через гунл авторищацію користуватись та фейсбук

Дякую. Так в порівнянні с іншими тулам, schemio виглядає досить складним, треба бути щось з цим робити

відвязатись від гунл драйва або опційно це зробити

Не дуже розумію що ви маєте на увазі. schem.io не використає гугл драйв, а використає власну БД. Тому ви можете зробити свої діаграми публічними. А от schemio.app — ця версія використає гугл-драйв. Також на головному сайті ви можете робити діаграми анонімно та навіть давати доступ іншим через спеціальні лінки.

Юзкейс за яким перевіряю «адекватність» тула для діаграм:
Чи можу я швидко створити сіквенс діаграму (en.wikipedia.org/wiki/Sequence_diagram) і відредагувати її (важливо вставка в середину). Важливо щоб підтримувались бари (які відображають обробку повідомлення) для відображення самих процесів. І при зміні висоти бара стрілочки лишались горизонтальними, а не доводилось вручну їх вирівнювати.

Спробував відредагувати цю schem.io/...​andshake-aHNAmatYuh9kzrlZ
Проблеми:
1) Потягнув вертикальний процес вниз і трохи вбік — роз’їхалося, треба руками центрувати вертикальну направляючу
2) Зміг виділити групу стрілок. Клавішами вниз вони їдуть (але логічно, що повільно). Перетягнути мишкою поки не зрозумів як (тягнеться весь квадрат «TLS Handshake»)
3) Елементів lifeline не знайшов на панелі в блоці UML

Дякую за такий детальний відгук! буду працювати далі

Потягнув вертикальний процес вниз і трохи вбік — роз’їхалося, треба руками центрувати вертикальну направляючу

В schemio я зробив у першу чергу акцент на інтерактивність, дінамічне завантаження діаграми та суспільне редагування. В ньому поки що немає редакторів Sequence diagram, mind maps і тому подібного. Я хотів це зробити але не ще не встиг. Планую над цим працювати у наступну чергу

тягнеться весь квадрат «TLS Handshake»

мабуть це тому що у edit box неможна натискати в центрі якщо там немає виділеного елементу. Усі ці елементи «приатачені» до TLS Handshake квадрату, і коли ви натискаєте в центрі едіт-бокса то воно виділяє той TLS Handshake. Я спробую додати fill для едіт-бокса, але тоді буде не зручно виділяти елементи між двома виділеними.

Елементів lifeline не знайшов на панелі в блоці UML

Це має бути такий елемент www.ibm.com/...​doc/images/lifeline_c.gif щи щось інше? Виглядає як комбінація чотирикутника та лінії

Це має бути такий елемент www.ibm.com/...​doc/images/lifeline_c.gif щи щось інше? Виглядає як комбінація чотирикутника та лінії

Так це він. А «бар» по науці називається «activation box».

В schemio я зробив у першу чергу акцент на інтерактивність, дінамічне завантаження діаграми та суспільне редагування.
В ньому поки що немає редакторів Sequence diagram, mind maps і тому подібного.

Тут ще варто подумати чи треба все. Нормальний редактор УМЛ — це буде багато роботи.
Якщо у вашій ідеї колаборація важливіша за діаграми, то напевне юзкейсти архітектора вам і не так критичні.
А от майндмапи виглядають як важливий юзкейс для того що ви описали як задумку. Бізнес сценарій — мозковий штурм.

Тут ще варто подумати чи треба все.

Я вважаю що треба, бо це вже стало таким стандартом серед різних діаграм редакторів, але це доволі складно. Треба реалізувати кожний редактор для кожного типу діаграм зі своїми правилами і все це якось поєднати із тою системою редактору та інтеракцій що вже є в schemio.

Чесно кажучі я ще не знаю як саме розвивати сервіс, тому і вирішив спитати. Моя головна задумка перед тим як приступити до розробки була — самозадокументовані діаграми. Тобто я хотів щоб уся документація біла в діаграмі і кожен елемент мав свій опис та лінки до різних ресурсів. Ця ідея прийшла до мене у мій перший 24/7 on-call на платформі з 250+ мікросервісами. Документація була розкидана по різних ресурсах (Confluence, Google Docs, Github тощо). Були і діаграми, які або ніхто не оновлював, або до них не було нормального опису, або текст було розкидано по різних сторінках Confluence. Я хотів мати інструмент який допоможе швидко зрозуміти як працює складна розподілена система, та який дозволить «зумитись» більш детально в ту частину діаграма яку хочу я, а не шукати в описі на різних документах.

Переробив усю систему переміщення «коннекторів» (ліній та стрілки що прикріплюються до інших елементів). Добавив fill для едіт-бокса так, що можливо натискати поміж ліній та переміщати їх. Також тепер можливо виділяти ліній частково та перетискати/видаляти. Добавив різні елементи lifeline. Доречі змінив ті два елемента на тій діаграмі на lifeline щоб було зручніше їх переміщувати вліво та вправо. Можете, будь ласка, ще раз перевірити ваш кейс на цій діаграмі schem.io/...​e-aHNAmatYuh9kzrlZ#m=edit. На жаль поки що я не зробив специфічну систему редагування саме для sequence diagram, але сподіваюсь що тепер буде трохи зручніше.

Поставив зірочку github.com/ishubin/schemio, щоб репозиторій потрапив у тренди «JavaScript» за сьогодні то треба ще 10 зірочок

Бекендова частина schem.io написана на Go, але поки що закрита.

Як відкриєте то можна буде опублікувати в групі GolangUA

На DOU вже писали про схожий інструмент okso.app

Підписатись на коментарі