Draw.io - бесплатное приложение, предназначенное для моделирования диаграмм и блок-схем бизнес-процессов. Присутствует возможность интеграции с Google Документами, Dropbox, OneDrive, JIRA, Confluence, Chrome и GitHub. Дополнение для серверов Confluence и JIRA Cloud являются платными. Онлайн-версия для синхронизации с Google Диском предлагается в 2 вариантах - с поддержкой Google Apps и без неё. Помимо веб-версии существует программа для установки на ПК, которая поддерживает ОС Windows, MacOS и Linux.
Приложение будет полезно менеджерам и руководителям компаний, которым требуется инструмент для построения схем бизнес-процессов. Сервис подходит для специалистов, чья деятельность связана с созданием презентаций и баз данных, построением инженерных и сетевых схем, проектированием программного обеспечения.
С помощью редактора можно создавать любые схематические изображения - от схем электрических цепей до структур бизнес-моделей. В числе возможностей - построение диаграмм, графиков и UML-моделей. В библиотеке форм присутствует несколько десятков фигур, сгруппированных по категориям. Объекты можно форматировать, меняя шрифты, цвет, градиент, толщину линий, уровень прозрачности. Благодаря возможности синхронизации с Google Диском над документами могут одновременно работать несколько пользователей. Готовые изображения можно сохранять на жёстком диске ПК или вставлять в вики-сайты и блоги. Доступные форматы для экспорта - PDF, GPG, SVG, XML и JPG.
Ключевые особенности
- Бесплатная интеграция с сервисами Google
- Платная интеграция с Confluence и JIRA Cloud
- HTML клиент с поддержкой IE 6-8
- Поддержка смартфонами и планшетами
- Экспорт документов в форматы PDF, GPG, SVG, XML и JPG
- Оффлайн приложение для Windows, MacOS и Linux
- Поддержка 27 языков
Поговорим о том, как построить схемы приложений онлайн
Инструменты для создания диаграмм
Мне кажется, основой всех современных проектов, является создание предварительных схем рабочих процессов. Также это может быть архитектура вашего приложения, много всего, на что только хватит воображения. Все просто, вы планируете приложение? Создаете проект? Необходимы схемы, диаграммы, графики, макеты интерфейсов? Тогда я посоветую вам несколько онлайн сервисов, которые облегчат вашу работу, помогут создать профессиональную схему, архитектуру, план действий.
Создайте профессиональную диаграмму
Создать профессиональную схему вашего приложения, проекта, достаточно просто. На рынке есть очень качественный инструмент Microsoft Visio, но он стоит денег. А что делать малому бизнесу, который еще не в состояние оплачивать столь дорогостоящий инструмент? Правильно, пользоваться бесплатными проектами.
Draw.io
Draw.io - это онлайн инструмент, который помогает создавать блок-схемы любого вида, с огромным количеством форм и объектов. При помощи Draw.io вы отлично сможете визуализировать всю вашу инфраструктуру.
Draw.io наполнен предварительными шаблонами, которые разделены на категории, начина от графиков и заканчивая проектированием ПО.
1. Все что вам нужно это пройти по ссылке Draw.io ;
2. Выбрать место расположения, сохранения, будущего проекта (вариантов много, один удобнее другого);
3. Нажимаем создать новую диаграмму;
4. Вписываем название нашей диаграммы;
5. Выбираем тип проекта. Создаем;
Создавать очень просто, для этого достаточно просто переносить объекты в рабочую область. Сохранить проект также просто. Так для того, чтобы вернуться в проект необходимо “Сохранить как”, таким образом вы сможете вносить правки в любое время. Рабочий процесс схож с тем как вы редактируете свои текстовые файлы – Открыть, исправить, сохранить или экспортировать.
Завершенный проект можно экспортировать в различные форматы (например один из самых удобных PDF). И это все на Русском языке, совершенно бесплатно.
Gliffy
Gliffy - другой замечательный инструмент создания блок-схем, диаграмм, Диаграмм Венна, mindmap и т.д.
Инструмент по своим возможностям несколько уступает Draw.io. При этом Gliffy также прост в работе.
Помните не все объекты отображены на начальном экране, можно попробовать поискать в библиотеке проекта, там находится много новых элементов.
1. Чтобы начать проект в Gliffy необходимо запустить gliffy.com ;
2. На стартовом экране выбрать - Start Drawing. И все, рисуйте, создавайте блок-схемы на Русском и совершенно бесплатно;
Drawpico продолжает линейку игр, в которых нужно рисовать и угадывать. Эта игра хороша тем, что сделана для русскоязычной аудитории да еще и с возможностью сохранения результатов в соцсетях. Если в кратце, то задача онлайн игры Крокодил - ведущему рисовать заданные слова или темы, остальным игрокам - угадывать быстрее соперников, что именно хочет нарисовать ведущий. По итогам 15 раундов определяется победитель.
Как играть
Игровая задача Drawpico - победить по общему количеству набранных за 15 раундов очков. Очки начисляются за угаданные рисунки. Причем ведущий получает очки, если его кто-нибудь угадал, а отгадывающие - за то, что угадали. Распределение ролей ведётся автоматически. У каждого будет возможность и поугадывать, и побыть в непростой роли объясняющего.
Для объяснения слов и понятий в онлайн Крокодиле предлагается только лишь обычный "карандаш" любого цвета. На объяснение даётся две минуты; за это время нужно донести свою мысль.
В Drawpico есть опция как войти в общую комнату, так и создать отдельную ото всех игру, где повеселиться со своими друзьями.
Здравствуйте, уважаемые Хабражители. Представляю вашему вниманию перевод статьи From Draw.io to Vue.js app автора Francesco Zuppichini.
Это моя первая публикация на Хабре и я решил начать с перевода статьи об одном классном инструменте, который позволяет сгенерировать Vue.js приложение из UML диаграммы.
Удивлены? Я был просто восхищен, когда наткнулся на него.
Конечно же, как и в любой бета версии, там есть над чем поработать. Например первым делом я связался с автором и сказал, что хочу внести исправления в структуру шаблона компонентов и именование путей. Автор вышел в течении часа на связь, выложил код на GitHub и написал небольшой туториал. После принятия PR было получено разрешение на перевод статьи, с указанием ссылки на оригинал.
Кому интересно - прошу под кат.
Из Draw.io в Vue.js приложение
Создание приложения должно быть таким же легким, как нарисовать граф в draw.io
Франческо Саверио
Что, если я скажу вам, что вы можете трансформировать это:
Получился проект Vue.js со всеми файлами и импортами, которые вам нужны для начала создания своего клевого продукта. Круто, да?
Я сделал небольшое демо-видео, которое вы можете посмотреть здесь:
Веб-приложение - это всего лишь граф
Каждое веб-приложение может быть выражено в виде графа
Давайте немного подумаем. Когда вы используете фреймворк, такой как React, Angular или Vue, у вас всегда есть один корневой компонент.
В нашем примере корневой компонент - это компонент App , все остальное - всего лишь узел графа. Мы можем идентифицировать на первом уровне Home и Index nodes как прямые дочерние элементы App .
Общим стандартом при разработке веб-приложений является хранение компонентов в структуре каталогов на основе графов. Поэтому обычно для каждого компонента создается каталог с тем же именем, где размещается сам компонент и все его дочерние элементы.
Например, Index - это корень подграфа, составленного самим собой, User и Post . Поэтому имеет смысл имитировать эту абстракцию в структурах приложения.
Это дает два преимущества: масштабируемость, поскольку подграфы являются независимыми, и легкое понимание структуры и логики приложения.
Кроме того, всегда можно видеть общую структуру приложения, просто глядя на граф.
От графа к приложению
Итак, мы сказали, что каждое веб-приложение на самом деле является графом, поэтому мы можем генерировать их из него.
В конце концов, каждый файл, начинающийся с графа, прост. Вам просто нужно найти пересечение деревьев и создать каждый файл в его локальном корневом каталоге, и вы можете сделать это рекурсивно.
Возникает проблема, мы знаем, что в современных веб-приложениях компоненты импортируют и используют другие компоненты. Поэтому нам нужно связать каждый из них с его зависимостями и создать динамический шаблон, основанный на текущем языке программирования, в котором внутри него содержится правильный синтаксис для их импорта.
В JavaScript файлы импортируются примерно так:
import italy from "italy" // import whole module import { Spaghetti} from "italy" // import a single entity in italy
Поэтому, чтобы перейти от графа к приложению, нам нужен создать каждый файл, поместить его в правильную позицию на основе самого графа и отобразить правильный шаблон для импорта зависимостей
Drawio2Vuejs
Я создал пакет, который позволяет вам нарисовать ваше приложение в draw.io и использовать экспортированный XML-файл для создания приложения Vue.js. Он называется graph2app-drawio2vuejs .
Пакет можно найти здесь:
На самом деле, это не новая идея, я разработал некоторое время назад способ сделать практически то же самое, используя python:
Но имейте в виду, что эта новая версия пакета npm намного лучше .
Поэтому, прежде всего, установите пакет глобально с помощью npm:
$ npm i -g graph2app-drawio2vuejs
Теперь можно использовать его в терминале с помощью команды:
$ drawio2vuejs
Но, конечно, нужно передать несколько аргументов:
$ drawio2vuejs --help Usage: drawio2vuejs scaffold Vuejs app from Draw.io Options: -V, --version output the version number -d, --dist
Обязательно нужно передать путь к xml-файлу draw.io.
Пришло время рисовать! Перейдите на draw.io , выберите UML на левой панели и нажмите на Object :
Теперь вы можете начать с создания первого узла. Помните, что это будет ваш корневой компонент. Для моих кейсов, корневой компонент всегда является первым узлом , который нарисован на диаграмме.
Затем, на основе приложения, которое вы хотите создать, вы можете добавить другой узел.
Теперь мы хотим, чтобы Home был дочерним элементом App . Так что нажмите на Home и используйте стрелку для подключения к App .
Что делать, если мы хотим также в App импортировать Home в качестве зависимости? Нажмите на use arrow в разделе UML слева и поместите его из App в Home .
Хорошо! Вы создали свой первый граф! Давайте используем его для создания приложения Vuejs на его основе.
Мы сказали, что нам нужен файл xml , поэтому экспортируйте его без сжатия . Нажмите Файл > Экспортировать как > XML > Сжатый (нет) .
Теперь создайте базовое приложение Vue.js, используя командную строку Vue:
$ vue init webpack app
После того, как вы это сделаете, мы готовы сгенерировать приложение из графа:
$ drawio2vuejs --xml=
Для меня будет такая команда:
$ drawio2vuejs --xml=/Users/VaeVictis/Desktop/app.xml --dist=/Users/VaeVictis/Desktop/app/src
Если все работает правильно, вы должны увидеть следующий результат:
Файл App.vue будет обновлен, поскольку он уже был там, добавив правильный импорт для Home . Также будет создан новый компонент Home . Если мы откроем App.vue , мы должны увидеть:
Компонент правильно импортируется, и папка Home с файлом Home.vue была правильно создана!
graph2app
Пакет drawio2vuejs разработан с использованием другого пакета, который я разработал: graph2app .
Скоро я собираюсь сделать статью о этом, как применить модуль, используя три части:
- GraphBuilder
App
, где основная логика, создает каталог и файлы из графа. Граф выполнен с использованием экземпляра GraphBuilder
. В нашем случае я создал DrawIoGraphBuilder
, который расширяет его, чтобы проанализировать XML-файл из draw.io.
graph2app-drawio-graph-builder
Разработчики смогут расширять базовый экземпляр для анализа графа с помощью других типов интерфейсов.
File - это абстракция узлов на графе. Он имеет шаблон , из котороо генерируется компонент. Таким образом, когда graph2app получает граф, ему также нужен экземпляр File , чтобы вызвать метод рендеринга на нем и сохранить файл правильно.
Как видите, пакет имеет модульную структуру. Мы могли бы использовать тот же DrawIoGraphBuilder с другим экземпляром File для создания, например, React приложений из того же графа draw.io.
Вывод
Надеюсь, вам понравится эта статья. Я твердо убежден, что визуализация приложения может повысить производительность. Библиотека по-прежнему является бета-версией, и ей нужно некоторое улучшение. Я думаю, что людям понравится эта идея и они будут способствовать развитию.
Пожалуйста, дайте мне знать о вашем мнении. Спасибо за проявленный интерес.
Франческо Саверио
Теги: Добавить метки
Многопользовательская игра «Drawpico io» предлагает продемонстрировать миру, насколько хорошо ты умеешь рисовать. Или научиться угадывать то, что нарисовали другие. Еще неизвестно, какое из заданий сложнее. В любом случае будет весело.
Как играть
После запуска ты увидишь экран, разделенный на две части: справа - виртуальный мольберт, слева - чат с участниками. Один из них становится ведущим. Он назначает игрока, который в данном раунде хочет рисовать, и называет три вида возможной картинки. Если сейчас твоя очередь быть художником, кликай мышкой по варианту, который собираешься изобразить, и приступай. Другие участники «Draw io» внимательно следят за воспроизводимыми на экране потугами и пытаются угадать, что же это такое. Предположения они пишут в чат до тех пор, пока кто-то не назовет правильный ответ. Как только это происходит, раунд заканчивается. Художник и угадыватель получают баллы. Вообще, играть в «Drawpico io» нужно так, чтобы очков у тебя было как можно больше. Когда участников много, сделать это не так-то и просто – конкуренция высока.
Каждый раунд игры «Дравпико ио» длится не больше двух минут. За это время ты должен успеть изобразить нечто на заданную тему. Рисовать можно что угодно: крокодила, футболиста, вермишель, мельницу и т.д. Самые сложные и для угадывания, и для воплощения задания, в которых нужно нарисовать эмоцию: радость, печаль, задумчивость.