Комментарии 28
"Да это же круто!" - так я сказал про себя об инструменте и его презентации в виде статьи. Но оффтоп вопрос - помогло ли это на практике систематизировать информацию о которой говорилось во вступлении? Интересно было ли желание написать инструмент результатом анализа остальных похожих или желанием создать именно СВОЙ?
К сожалению применить этот инструмент в той компании, о которой говорится вначале статьи не получилось, т.к. я перешел в другую еще не успев довести Schemio до ума. До того как я начал в 2018-м году работать над Schemio, я пытался найти нечто похожее, но ничего не подходило. У меня в голове тогда был идефикс - диаграммы загружающиеся внутри других диаграмм, появляющиеся ссылки и документация для отдельных объектов и все это хостится на сервере компании. Отдельные какие-то фичи были реализованы в других редакторах, но мне этого не хватало. Плюс хотелось решение, которое можно захостить самому. Ну а потом меня уже просто захватил процесс разработки и продолжил развивать проект дальше
Спасибо за ответ, мотивирует заканчивать свои идеи до достойных результатов)
Это конечно совершенно не то, но Вы видели prezi? Концепция визуала с зумингом в чем-то схожая. И на мой взгляд у них это было гениальным решением (учитывая, что ему уже лет 15).
Вопрос ни к чему, но вдруг натолкнет на какие-нибудь полезные мысли/идёт
"Да это же круто!"
Однозначно!
А какой формат сохранения? Возможно ли версионирование? И возможно ли изменения без редактора, в текстовом представлении?
Диаграммы хранятся в JSON формате. Пока что версионнирование реализовано только на облачной версии https://schem.io. В планах есть цель заняться разработкой текстового формата по аналогии с PlantUML, но пока что не хватает на все времени. В self-hosted версии (доступной с гитхаба) диаграммы хранятся просто в виде json файлов. Думаю можно написать какой-нибудь тул, который будет этот json генерировать из другого текстового формата. Но это все пока только в виде идей.
А почему не использовать уже готовый draw.io редактор?
Пользовался им в составе Confluence, но недавно Confluence создали проблему для self-hosted серверов - перестал работать draw.io плагин.
Сделали свой онлайн редактор диаграм с локальным хостингом и хранением в базе.
Заняло 3 дня, результатом очень довольны.
Если быть честным, то о draw.io я ничего не знал, когда начал работать над Schemio. Но, когда я с ним чуть позже познакомился, я не обнаружил тех фич интерактивности, которые я хотел реализовать. Я хотел именно встроенную возможность документировать какие-то элементы и легко создавать компоненты с динамической загрузкой. Ну а потом уже я загорелся идеей e-learning визуализаций и решил сделать упор на более сложные анимации и интерактивное поведение элементов. Я знаю что в draw.io какие-то вещи можно сделать с помощью плагинов, но я пока не увидел именно того, что нужно было мне. Возможно я не разобрался до конца в draw.io.
Может тогда подскажите , как в draw.io добавить не большую анимацию, как сделать раскрывающуюся детализацию и как копировать поведение родительского объекта.
В draw.io все таки более статичные вещи рисуются.
Нарезал картинок из рисовалки диаграмок на базе opensource Mermaid, BPMN.io, Draw.io.
BPMN designer:
ERD (ручной редактор)
Mermaid (ручной)
Mermaid (автомат - отображение class diagram)
Draw.io
Все диаграммы хранятся в базе, для всех генерится SVG.
На базе Mermaid сделали также динамический генератор.
Анимаций нет.
Вложенности сделаны в Mermaid (автомат) - кликаешь на класс и отображается иерархия классов для выбранного.
Про готовую интеграцию draw.io с таблицами excel или БД - ничего не расскажете?
Как связать пользовательские метаданные фигуры (shape-metadata) с внешним источником: таблицами excel или БД?
Как связать пользовательские метаданные фигуры (shape-metadata)
Боюсь что в draw.io эти метаданные позволяют лишь показываться при наведении мышки на объект их содержащий…
Возможности метаданных в draw.io
Или есть еще варианты применения метаданных?
PS Увидел, что в метаданных также добавляются гиперссылки
Первые впечатления - шикарно! Надо развивать дальше - это однозначно!
Поэтому я приступил к работе над собственным скриптовым языком SchemioScript. Сам язык немного похож на JavaScript, но он более простой.
Что-то похожее с Archi: jArchi — Скрипты для Archi
Почему не использовать формат файла Drawio (несжатый XML)? Может все-таки "переобуться" и взять за основу Drawio? В продолжение вопроса vagon333.
Помимо самого редактора я также параллельно работаю над созданием интерактивной базы знаний.
Если стартапов просто «flowchart editor» много, например,
Dgrm.net - flowchart editor, https://github.com/AlexeyBoiko/DgrmJS
то векторная графика (например, схемы) в привязке к БД (или таблице) – это конечно интереснее. Когда говорят, про «простую» визуализацию именно «баз знаний», то в простом варианте это ZettelKasten с графовой подсистемой (obsidian, Joplin, logseq и т.п.), если с более сложной интерактивной доской, то https://ontonet.ru/
Меня же интересует задача интеграции объектов схем (произвольная, сложная нотация) с внешней таблицей \ БП как показано на рис.
Вашим инструментом получится заменить штатную связку visio + excel? Если нет, то что посоветуете? Речь о моделировании бизнес-процессов (ВРМ, ЕА и т.п.), в идеале с «прицелом» в semantic BPM. Вообще «проект интерактивной документации» - хорошо ложится в тему ВРМ /ЕА. Посмотрите ценник на инструменты ВРМ /ЕА.
Анимация (визуальные эффекты) на первом этапе не интересует, это второй этап для реализации имитационного моделирования бизнес-процессов, как например bpsimulator
Также было бы хорошо добавить генератор dot (graphviz), как это сделано, например, в drawio (mermaid), т.к. добавляется возможность редактирования схемы (в отличие от многочисленных вьюверов). Редактирование конечно в привязке с атрибутами объектов.
“Site Reliability Engineering”
Там просто переход между табличками?
Может все-таки "переобуться" и взять за основу 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 документа (убрал некоторые дефолтные поля чтобы уменьшить код)
{
"name": "Untitled document",
"tags": [],
"items": [ {
"id": "6xXijGFl4",
"shape": "rect",
"area": { "x": 380, "y": 60, "w": 160, "h": 100, "r": 0 },
"name": "Container",
"links": [],
"tags": [],
"textSlots": {
"body": {
"text": "<p>Hello world</p>",
"valign": "top"
}
},
"behavior": { "events": [] },
"childItems": [ {
"shapeProps": {
"cornerRadius": 20,
"fill": { "type": "solid", "color": "rgba(51, 155, 187, 1)" },
"strokeColor": "rgba(60, 181, 208, 1)",
"strokeSize": 1,
"strokePattern": "solid"
},
"shape": "rect",
"cursor": "default",
"area": { "x": 40, "y": 40, "w": 80, "h": 40, "r": 0},
"opacity": 100,
"blendMode": "normal",
"name": "Rounded Rect",
"description": "",
"links": [],
"textSlots": {
"body": {
"text": "<p>Click me</p>",
"bold": true,
"color": "rgba(255, 255, 255, 1)"
}
},
"id": "24x-_0P0A"
}
]
}
]
}
Очень интересно!
Обязательно попробую!
Подскажите, есть ли в вашем инструменте возможность рисовать карты памяти (mind maps)?
Пока что нет, но я работаю над новыми шаблонами. Как раз вчера закомитил новый шаблон "Hierarchy Chart", думаю смогу на его основе сделать шаблон для mind maps только с более сложной функциональностью.
Наконец-то добавил шаблон для mind maps. Это оказалось сложнее чем я думал. Пока-что реализовал только самые базовые фичи, в числе которых иконки и трекер прогресса с автоматическим пересчетом для родительских нод. Если интересно вот тут есть демо видео https://www.linkedin.com/feed/update/urn:li:activity:7201881225144262656/
Если будет интересно - я готов вписаться в проект в качестве продакта на общественных началах. Как бывший аналитик я в восторге от этого продукта))
Очень интересный инструмент, спасибо.
Для архитектурных задач не хватает еще нескольких вещей
1. "Библиотека компонент", изменения компонента отображаются всюду, где он используется.
Ну, например, у нас внутренняя структура сервиса описывается в компоненте, там же можно указать его имя, часть атрибутов и используемую иконку. И если мы что-то поменяли в компоненте, то во всех диаграммах более высокого уровня - тоже все поменяется.
2. Типизация компонент и атрибутов к ним.
Т.е. завожу тип "контейнер" и указываю у него стандартные атрибуты "объем памяти", "OS" etc
И при содании - делаю уже готовый контейнер.
3. Ну и, на будущее, интеграция с разными wiki. Хотя бы в виде "SVG+ссылка на сайт".
Может быть стоит попробовать найти крупную компанию, где есть спрос на подобный инструментарий и договорится о совместном развитии. Или сделаться стартапером, написать бизнес-план и попробовать пару миллионов баксов получить на развитие )
"Библиотека компонент", изменения компонента отображаются всюду, где он используется.
"Библиотека компонент" - отличная идея! Спасибо! Я уже думал о чем-то подобном, но не знал как это аккуратно реализовать. Думаю это можно было бы сделать на основе уже существующего движка шаблонов, просто надо будет его немного доработать и дать возможность пользователям использовать свои и чужие диаграммы через представление шаблонов. Я вижу себе это так, что пользователь загружает другую диаграмму так, что она со всеми ее объектами просто копируется на его диаграмму. Но внутри (скрыто от пользователя) все эти скопированные объекты будут помечены как шаблонные. Таким образом можно будет к этим объектам прикрепить свои объекты, изменить текст, а в случае изменения той компонентной диаграммы, 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 как компании, а просто копировать другие компании не хочу. Есть только видение самого проекта и что с его помощью можно создать. В первую очередь я хочу создать удобный инструмент для структуризации и визуализации информации, чтобы помочь людям изучать любую область. О бизнесе я пока не думал
Компоненты - это не совсем шаблоны, это просто некоторая сущность, общая для всех диаграмм в проекте и изменяемая одновременно всюду. Обычно она является и "точкой входа" для отдельной диаграммы.
А что вы имеет в виду под "точкой входа" в диаграмме? Я если честно не очень понимаю как это должно выглядеть.
Я почему сравнил это с шаблонами, потому что я уже ранее продумывал возможность загрузки других диаграмм как шаблонов, и показалось что эти две фичи можно было бы совместить.
Есть и альтернативное решение - использовать существующий тип "component", только расширить его так, чтобы он загружался и отображался сразу же в режиме редактирования (т.е. без динамической загрузки как в демо, когда пользователь нажимает кнопку "Show more"). В таком случае не будет никаких Zoom in, кнопок "Show more" и "Go back", а сама компонентная диаграмма загрузится так же как и любая картинка в диаграмме. Проблема такого подхода, заключается в том, что в режиме редактирования не получится нажимать и выделять отдельные объекты из компонентной диаграммы, это будет работать только в режиме просмотра (специфика реализации типа "component"). Именно поэтому я подумал что лучше использовать движок шаблонов для этого. Тогда хотя бы можно будет в редакторе выделять и изменять какие-то объекты в компоненте.
Что вы думаете об этом?
Публикации
Интерактивные и документированные диаграммы для сложных систем