Наконец-то добавил шаблон для mind maps. Это оказалось сложнее чем я думал. Пока-что реализовал только самые базовые фичи, в числе которых иконки и трекер прогресса с автоматическим пересчетом для родительских нод. Если интересно вот тут есть демо видео https://www.linkedin.com/feed/update/urn:li:activity:7201881225144262656/
А что вы имеет в виду под "точкой входа" в диаграмме? Я если честно не очень понимаю как это должно выглядеть.
Я почему сравнил это с шаблонами, потому что я уже ранее продумывал возможность загрузки других диаграмм как шаблонов, и показалось что эти две фичи можно было бы совместить.
Есть и альтернативное решение - использовать существующий тип "component", только расширить его так, чтобы он загружался и отображался сразу же в режиме редактирования (т.е. без динамической загрузки как в демо, когда пользователь нажимает кнопку "Show more"). В таком случае не будет никаких Zoom in, кнопок "Show more" и "Go back", а сама компонентная диаграмма загрузится так же как и любая картинка в диаграмме. Проблема такого подхода, заключается в том, что в режиме редактирования не получится нажимать и выделять отдельные объекты из компонентной диаграммы, это будет работать только в режиме просмотра (специфика реализации типа "component"). Именно поэтому я подумал что лучше использовать движок шаблонов для этого. Тогда хотя бы можно будет в редакторе выделять и изменять какие-то объекты в компоненте.
"Библиотека компонент", изменения компонента отображаются всюду, где он используется.
"Библиотека компонент" - отличная идея! Спасибо! Я уже думал о чем-то подобном, но не знал как это аккуратно реализовать. Думаю это можно было бы сделать на основе уже существующего движка шаблонов, просто надо будет его немного доработать и дать возможность пользователям использовать свои и чужие диаграммы через представление шаблонов. Я вижу себе это так, что пользователь загружает другую диаграмму так, что она со всеми ее объектами просто копируется на его диаграмму. Но внутри (скрыто от пользователя) все эти скопированные объекты будут помечены как шаблонные. Таким образом можно будет к этим объектам прикрепить свои объекты, изменить текст, а в случае изменения той компонентной диаграммы, schemio сможет отследить какие элементы нужно обновить, а какие были добавлены поверх этой компоненты. То что я описал уже работает с шаблонами, просто надо продумать удобный формат для пользователей работы со своими диаграммами как с шаблонами + нужно продумать несколько нюансов:
1) нужно ли всегда последние версии этих компонент/шаблонов/диаграмм подгружать при загрузке своей диаграммы, или же нужно чтобы пользователь сам решал синхронизировать изменения с шаблоном с уже ранее размещенными компонентами.
2) Как пользователям указать в своей диаграмме минимально простую конфигурацию шаблона, например задать ему какие-то параметры и связать это с поведением или свойствами объектов в шаблоне/компоненте.
3) Нужно ли явно пользователю указывать что его диаграмма является шаблоном/компонентой, например через использование специального объекта типа "template", у которого могут быть специфические параметры. Или же можно разрешить использовать любую доступную диаграмму как шаблон/компоненту. Или же и то и другое.
4) Как определить и удобно это реализовать в UI какие объекты разрешать изменять, а какие нет. Например в движке шаблонов schemio используется скрытый маркер по типу args: { templateIgnoredProps: ["shapeProps.fill", "shapeProps.strokeColor", "shapeProps.strokeSize", "shapeProps.strokePattern"] }(https://github.com/ishubin/schemio/blob/master/assets/templates/diagrams/hierarchy-chart.yaml#L153). Но как это реализовать из UI, чтобы пользователь прямо в редакторе мог это настроить, я пока не знаю.
5) Как реализовать правильный "resize" компоненты со всеми ее внутренностями. В идеале было бы сначала реализовать Auto-layout, я кстати тоже над ним работал но пока отложил из-за непредвиденного скоупа. Или же просто использовать автоматическое масштабирование всех внутренних объектов компоненты, по ее контейнеру.
Задачка не легкая и нужно хорошо все продумать. Но вообще это точно то, над чем я буду работать в скором времени.
Типизация компонент и атрибутов к ним
Думаю если развить мою предыдущую идею, возможно будет добиться такого эффекта.
Ну и, на будущее, интеграция с разными wiki. Хотя бы в виде "SVG+ссылка на сайт".
К сожалению не имею опыта настройки wiki движка. Не уверен что при существующем своем бэклоге я смогу до этого дойти. Думаю это уже в будущем, если будет своя полноценная команда. Все же это больше похоже на решение для какого-то бизнеса, а не для обычных пользователей.
Может быть стоит попробовать найти крупную компанию, где есть спрос на подобный инструментарий и договорится о совместном развитии. Или сделаться стартапером, написать бизнес-план и попробовать пару миллионов баксов получить на развитие )
Да, я бы хотел попробовать себя в качестве стартапера, но мне кажется пока что рано бросаться к инвесторам. Сначала я хочу протестировать Schemio и найти его основную нишу. Пока что у меня нет четкого видения Schemio как компании, а просто копировать другие компании не хочу. Есть только видение самого проекта и что с его помощью можно создать. В первую очередь я хочу создать удобный инструмент для структуризации и визуализации информации, чтобы помочь людям изучать любую область. О бизнесе я пока не думал
Пока что нет, но я работаю над новыми шаблонами. Как раз вчера закомитил новый шаблон "Hierarchy Chart", думаю смогу на его основе сделать шаблон для mind maps только с более сложной функциональностью.
Может все-таки "переобуться" и взять за основу Drawio?
draw.io отличный инструмент для создания диаграмм, но, насколько я в нем смог разобраться, он не подходит для того, что я хотел реализовать:
Hidden text
динамическая загрузка других диаграмм внутри друг друга
компонентное редактирование (использование повторяющихся сложных элементов внутри диаграммы). Вот хороший пример - нажмите на синюю кнопку "schem.io ?", а потом выберите "DNS Query" или "DNS Answer" и понажимайте на разные поля DNS пакета. "DNS Header" и "DNS Question" секции используются повторно. Можете войти в режим редактирования и увидите как это сделано.
Интерактивность которая позволяет создавать сложные интерактивные демонстрации
Почему не использовать формат файла Drawio (несжатый XML)?
А чем плох формат JSON? Я думал сделать возможность импорта drawio, но это будет очень нелегкая задача.
то векторная графика (например, схемы) в привязке к БД (или таблице) – это конечно интереснее. Когда говорят, про «простую» визуализацию именно «баз знаний», то в простом варианте это ZettelKasten с графовой подсистемой (obsidian, Joplin, logseq и т.п.), если с более сложной интерактивной доской, то https://ontonet.ru/
Я мог некорректно выразиться на счет "баз знаний". Я имел ввиду что-то вроде Википедии, но для диаграмм и интерактивных демонстраций, где за основу документа берется не страница с текстом, а диаграмма. Поэтому я и создал в schem.io возможность отправки patch requests для публичных диаграмм.
Меня же интересует задача интеграции объектов схем (произвольная, сложная нотация) с внешней таблицей \ БП
А это очень интересная идея, возьму на заметку.
Вашим инструментом получится заменить штатную связку visio + excel? Если нет, то что посоветуете?
Нет, у schemio нет интеграции с Excel, и тут я к сожалению ничего посоветовать не могу.
Там просто переход между табличками?
Не очень понимаю что вы имеете в виду под "табличками". Это вы имеете ввиду про гифку с демонстрацией HUD? Если да, то это набор скриншотов разных команд диагностики в Linux (top, netstat, vmstat, free и т.д.). На каждом из этих скриншотов я выделил какие-то поля и их задокументировал (зачастую копируя текст из man pages). Это лишь один из примеров подачи информации.
Сам проект "Site Reliability Engineering" это попытка создать удобные для понимания и быстрого усвоения информации диаграммы. Т.к. это близко моей специальности, я вот и решил создать такой проект и там есть разные форматы (статичный, анимированный, скриншоты и т.д.). Пока с сожалению диаграмм не много, но я планирую в будущем продолжить и надеюсь найти энтузиастов, которым понравится такая идея и они присоединятся
К сожалению на это у меня пока что нет времени. Документы хранятся в JSON формате с очень простой структурой, так что в принципе кто угодно может реализовать свой тул для генерации диаграмм. Вот небольшое пример JSON.
Вот пример JSON документа (убрал некоторые дефолтные поля чтобы уменьшить код)
Если быть честным, то о draw.io я ничего не знал, когда начал работать над Schemio. Но, когда я с ним чуть позже познакомился, я не обнаружил тех фич интерактивности, которые я хотел реализовать. Я хотел именно встроенную возможность документировать какие-то элементы и легко создавать компоненты с динамической загрузкой. Ну а потом уже я загорелся идеей e-learning визуализаций и решил сделать упор на более сложные анимации и интерактивное поведение элементов. Я знаю что в draw.io какие-то вещи можно сделать с помощью плагинов, но я пока не увидел именно того, что нужно было мне. Возможно я не разобрался до конца в draw.io.
Диаграммы хранятся в JSON формате. Пока что версионнирование реализовано только на облачной версии https://schem.io. В планах есть цель заняться разработкой текстового формата по аналогии с PlantUML, но пока что не хватает на все времени. В self-hosted версии (доступной с гитхаба) диаграммы хранятся просто в виде json файлов. Думаю можно написать какой-нибудь тул, который будет этот json генерировать из другого текстового формата. Но это все пока только в виде идей.
К сожалению применить этот инструмент в той компании, о которой говорится вначале статьи не получилось, т.к. я перешел в другую еще не успев довести Schemio до ума. До того как я начал в 2018-м году работать над Schemio, я пытался найти нечто похожее, но ничего не подходило. У меня в голове тогда был идефикс - диаграммы загружающиеся внутри других диаграмм, появляющиеся ссылки и документация для отдельных объектов и все это хостится на сервере компании. Отдельные какие-то фичи были реализованы в других редакторах, но мне этого не хватало. Плюс хотелось решение, которое можно захостить самому. Ну а потом меня уже просто захватил процесс разработки и продолжил развивать проект дальше
Он позволяет проверять расположение элементов относительно друг друга, а также имеет возможность проверять изображения отдельных элементов по цветовой схеме или по-пиксельно. При грамотном подходе ваши тесты могут превратится в читабельный документ полностью описывающий верстку.
А каким именно образом вы проводите пакетное тестирование? Просто мы все делаем в Jenkins: каждый проект с тестами (например Selenium тесты или Service Acceptance) хранится отдельным репозиторием в гитхабе. В самом jenkins мы выстроили свой pipeline из разных тест проектов и Galen как-раз один из них. Есть возможность запуска с выводом testng отчетов:
galen test . --testngreport "report/testng.xml"
Правда в этих отчетах очень обрезанная информация о самих проверках, но нам достаточно зафейленого статуса в Jenkins, а уже подробности смотрим в html отчете
Наконец-то добавил шаблон для mind maps. Это оказалось сложнее чем я думал. Пока-что реализовал только самые базовые фичи, в числе которых иконки и трекер прогресса с автоматическим пересчетом для родительских нод. Если интересно вот тут есть демо видео https://www.linkedin.com/feed/update/urn:li:activity:7201881225144262656/
А что вы имеет в виду под "точкой входа" в диаграмме? Я если честно не очень понимаю как это должно выглядеть.
Я почему сравнил это с шаблонами, потому что я уже ранее продумывал возможность загрузки других диаграмм как шаблонов, и показалось что эти две фичи можно было бы совместить.
Есть и альтернативное решение - использовать существующий тип "component", только расширить его так, чтобы он загружался и отображался сразу же в режиме редактирования (т.е. без динамической загрузки как в демо, когда пользователь нажимает кнопку "Show more"). В таком случае не будет никаких Zoom in, кнопок "Show more" и "Go back", а сама компонентная диаграмма загрузится так же как и любая картинка в диаграмме. Проблема такого подхода, заключается в том, что в режиме редактирования не получится нажимать и выделять отдельные объекты из компонентной диаграммы, это будет работать только в режиме просмотра (специфика реализации типа "component"). Именно поэтому я подумал что лучше использовать движок шаблонов для этого. Тогда хотя бы можно будет в редакторе выделять и изменять какие-то объекты в компоненте.
Что вы думаете об этом?
"Библиотека компонент" - отличная идея! Спасибо! Я уже думал о чем-то подобном, но не знал как это аккуратно реализовать. Думаю это можно было бы сделать на основе уже существующего движка шаблонов, просто надо будет его немного доработать и дать возможность пользователям использовать свои и чужие диаграммы через представление шаблонов. Я вижу себе это так, что пользователь загружает другую диаграмму так, что она со всеми ее объектами просто копируется на его диаграмму. Но внутри (скрыто от пользователя) все эти скопированные объекты будут помечены как шаблонные. Таким образом можно будет к этим объектам прикрепить свои объекты, изменить текст, а в случае изменения той компонентной диаграммы, schemio сможет отследить какие элементы нужно обновить, а какие были добавлены поверх этой компоненты. То что я описал уже работает с шаблонами, просто надо продумать удобный формат для пользователей работы со своими диаграммами как с шаблонами + нужно продумать несколько нюансов:
1) нужно ли всегда последние версии этих компонент/шаблонов/диаграмм подгружать при загрузке своей диаграммы, или же нужно чтобы пользователь сам решал синхронизировать изменения с шаблоном с уже ранее размещенными компонентами.
2) Как пользователям указать в своей диаграмме минимально простую конфигурацию шаблона, например задать ему какие-то параметры и связать это с поведением или свойствами объектов в шаблоне/компоненте.
3) Нужно ли явно пользователю указывать что его диаграмма является шаблоном/компонентой, например через использование специального объекта типа "template", у которого могут быть специфические параметры. Или же можно разрешить использовать любую доступную диаграмму как шаблон/компоненту. Или же и то и другое.
4) Как определить и удобно это реализовать в UI какие объекты разрешать изменять, а какие нет. Например в движке шаблонов schemio используется скрытый маркер по типу
args: { templateIgnoredProps: ["shapeProps.fill", "shapeProps.strokeColor", "shapeProps.strokeSize", "shapeProps.strokePattern"] }(https://github.com/ishubin/schemio/blob/master/assets/templates/diagrams/hierarchy-chart.yaml#L153). Но как это реализовать из UI, чтобы пользователь прямо в редакторе мог это настроить, я пока не знаю.5) Как реализовать правильный "resize" компоненты со всеми ее внутренностями. В идеале было бы сначала реализовать Auto-layout, я кстати тоже над ним работал но пока отложил из-за непредвиденного скоупа. Или же просто использовать автоматическое масштабирование всех внутренних объектов компоненты, по ее контейнеру.
Задачка не легкая и нужно хорошо все продумать. Но вообще это точно то, над чем я буду работать в скором времени.
Думаю если развить мою предыдущую идею, возможно будет добиться такого эффекта.
К сожалению не имею опыта настройки wiki движка. Не уверен что при существующем своем бэклоге я смогу до этого дойти. Думаю это уже в будущем, если будет своя полноценная команда. Все же это больше похоже на решение для какого-то бизнеса, а не для обычных пользователей.
Да, я бы хотел попробовать себя в качестве стартапера, но мне кажется пока что рано бросаться к инвесторам. Сначала я хочу протестировать Schemio и найти его основную нишу. Пока что у меня нет четкого видения Schemio как компании, а просто копировать другие компании не хочу. Есть только видение самого проекта и что с его помощью можно создать. В первую очередь я хочу создать удобный инструмент для структуризации и визуализации информации, чтобы помочь людям изучать любую область. О бизнесе я пока не думал
Пока что нет, но я работаю над новыми шаблонами. Как раз вчера закомитил новый шаблон "Hierarchy Chart", думаю смогу на его основе сделать шаблон для mind maps только с более сложной функциональностью.
С prezi я не знаком. Посмотрел, выглядит интересно, спасибо за отсылку. Действительно многие вещи пересекаются.
draw.io отличный инструмент для создания диаграмм, но, насколько я в нем смог разобраться, он не подходит для того, что я хотел реализовать:
Hidden text
динамическая загрузка других диаграмм внутри друг друга
компонентное редактирование (использование повторяющихся сложных элементов внутри диаграммы). Вот хороший пример - нажмите на синюю кнопку "schem.io ?", а потом выберите "DNS Query" или "DNS Answer" и понажимайте на разные поля DNS пакета. "DNS Header" и "DNS Question" секции используются повторно. Можете войти в режим редактирования и увидите как это сделано.
сложные анимации (встроенные, покадровые, скриптовые)
Интерактивность которая позволяет создавать сложные интерактивные демонстрации
А чем плох формат JSON? Я думал сделать возможность импорта drawio, но это будет очень нелегкая задача.
Я мог некорректно выразиться на счет "баз знаний". Я имел ввиду что-то вроде Википедии, но для диаграмм и интерактивных демонстраций, где за основу документа берется не страница с текстом, а диаграмма. Поэтому я и создал в schem.io возможность отправки patch requests для публичных диаграмм.
А это очень интересная идея, возьму на заметку.
Нет, у schemio нет интеграции с Excel, и тут я к сожалению ничего посоветовать не могу.
Не очень понимаю что вы имеете в виду под "табличками". Это вы имеете ввиду про гифку с демонстрацией HUD? Если да, то это набор скриншотов разных команд диагностики в Linux (top, netstat, vmstat, free и т.д.). На каждом из этих скриншотов я выделил какие-то поля и их задокументировал (зачастую копируя текст из man pages). Это лишь один из примеров подачи информации.
Сам проект "Site Reliability Engineering" это попытка создать удобные для понимания и быстрого усвоения информации диаграммы. Т.к. это близко моей специальности, я вот и решил создать такой проект и там есть разные форматы (статичный, анимированный, скриншоты и т.д.). Пока с сожалению диаграмм не много, но я планирую в будущем продолжить и надеюсь найти энтузиастов, которым понравится такая идея и они присоединятся
К сожалению на это у меня пока что нет времени. Документы хранятся в JSON формате с очень простой структурой, так что в принципе кто угодно может реализовать свой тул для генерации диаграмм. Вот небольшое пример JSON.
Вот пример JSON документа (убрал некоторые дефолтные поля чтобы уменьшить код)
Если быть честным, то о draw.io я ничего не знал, когда начал работать над Schemio. Но, когда я с ним чуть позже познакомился, я не обнаружил тех фич интерактивности, которые я хотел реализовать. Я хотел именно встроенную возможность документировать какие-то элементы и легко создавать компоненты с динамической загрузкой. Ну а потом уже я загорелся идеей e-learning визуализаций и решил сделать упор на более сложные анимации и интерактивное поведение элементов. Я знаю что в draw.io какие-то вещи можно сделать с помощью плагинов, но я пока не увидел именно того, что нужно было мне. Возможно я не разобрался до конца в draw.io.
Диаграммы хранятся в JSON формате. Пока что версионнирование реализовано только на облачной версии https://schem.io. В планах есть цель заняться разработкой текстового формата по аналогии с PlantUML, но пока что не хватает на все времени. В self-hosted версии (доступной с гитхаба) диаграммы хранятся просто в виде json файлов. Думаю можно написать какой-нибудь тул, который будет этот json генерировать из другого текстового формата. Но это все пока только в виде идей.
К сожалению применить этот инструмент в той компании, о которой говорится вначале статьи не получилось, т.к. я перешел в другую еще не успев довести Schemio до ума. До того как я начал в 2018-м году работать над Schemio, я пытался найти нечто похожее, но ничего не подходило. У меня в голове тогда был идефикс - диаграммы загружающиеся внутри других диаграмм, появляющиеся ссылки и документация для отдельных объектов и все это хостится на сервере компании. Отдельные какие-то фичи были реализованы в других редакторах, но мне этого не хватало. Плюс хотелось решение, которое можно захостить самому. Ну а потом меня уже просто захватил процесс разработки и продолжил развивать проект дальше
Я уже писал для него статью на хабре habrahabr.ru/post/203506/
Он позволяет проверять расположение элементов относительно друг друга, а также имеет возможность проверять изображения отдельных элементов по цветовой схеме или по-пиксельно. При грамотном подходе ваши тесты могут превратится в читабельный документ полностью описывающий верстку.
Спасибо, хорошая идея. Добавил в issues на гитхабе.
Правда в этих отчетах очень обрезанная информация о самих проверках, но нам достаточно зафейленого статуса в Jenkins, а уже подробности смотрим в html отчете