Для меня будет такая команда:

Если все работает правильно, вы должны увидеть следующий результат:

Файл 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.

Вывод

Надеюсь, вам понравится эта статья. Я твердо убежден, что визуализация приложения может повысить производительность. Библиотека по-прежнему является бета-версией, и ей нужно некоторое улучшение. Я думаю, что людям понравится эта идея и они будут способствовать развитию.

Пожалуйста, дайте мне знать о вашем мнении. Спасибо за проявленный интерес.

Франческо Саверио

Теги: Добавить метки

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 языков

Io - компактный объектно-ориентированный язык программирования

Часть 1. Обзор возможностей и синтаксиса языка Io

Серия контента:

В группе языков, основанных на парадигме объектно-ориентированного программирования, Io выделяется своей простотой и лаконичностью. Идеальных программ, полностью свободных от каких бы то ни было недостатков, не бывает, тем более, когда речь идёт о реализации языка программирования. Именно поэтому необходимо достаточно подробно изучить возможности и особенности любого языка программирования (в данном случае - Io), а также области его применения, прежде чем выносить окончательное суждение о его необходимости, эффективности, удобстве для разработчика и т.д.

История появления языка Io

Язык Io появился в 2002 году, когда его автор Стив Декорт (Steve Dekorte), пытаясь лучше понять принципы функционирования и реализации языков программирования, решил совместить теорию с практикой и написать собственный простой и лаконичный язык. Декорт спроектировал Io, как чистый объектно-ориентированный язык, основанный на прототипах, с динамической типизацией, в котором устранено различие понятий "класс" и "экземпляр". В Wikipedia отмечается влияние на Io таких языков, как Smalltalk (принцип "всё есть объект" и динамическая типизация), Self и NewtonScript (объектная модель, основанная на прототипах), Lisp (равнозначность инструкций и данных в коде программы), а также Lua и Act1.

Общие сведения

Код программ на языке Io транслируется и выполняется с помощью компактной, легко переносимой виртуальной машины. Пакеты Io для различных платформ расположены на его Web-сайте . Язык Io распространяется в соответствии с условиями лицензии BSD/MIT.

Основными свойствами данного языка, которые подчёркивает сам автор, являются концептуальная простота и лаконичность, встраиваемость (возможность объединения с кодом, написанным на других языках) и расширяемость, возможность динамически изменять внутренние объекты во время выполнения, интроспективность, а также реализация концепции параллелизма.

В Io все сущности представляют собой объекты, которые обладают возможностью изменяться во время выполнения программы. Код любой программы компонуется из выражений, которые также могут быть модифицированы в процессе выполнения программы. В свою очередь выражения фактически представляют собой инструкции передачи сообщений. Реализован механизм контекстных областей видимости объектов на уровне функций и блоков кода. Для управления параллельными вычислениями применяются акторы (actors).

Выполнение программ

В программах на языке Io не требуется обязательного присутствия функции main() или какого-либо специального объекта, с которого должно начаться выполнение. Таким образом, Io-программы в определённой степени можно считать сценариями (скриптами – англ. scripts).

Запуск программы из командной строки выполняется следующим образом:

Также можно работать в интерактивном режиме интерпретатора Io, как показано в листинге 1.

Листинг 1. Использование интерпретатора Io в интерактивном режиме

В интерактивном режиме выводится не только результат выполнения введённого выражения, но и возвращаемое этим выражением значение, обозначаемое префиксом "==> ". В данном случае результат выполнения выражения совпадает с возвращаемым значением.

Следует отметить, что в интерактивном режиме вводимые выражения выполняются в общем контексте верхнего уровня, соответствующем объекту с именем Lobby.

Листинг 2. Содержимое контекста верхнего уровня Io-программы

В интерактивном режиме также можно выполнять программы, которые хранятся в отдельных файлах, как показано ниже:

Указанная программа по умолчанию будет выполнена в контексте всё того же объекта Lobby . Если необходимо выполнить загружаемую программу в контексте какого-либо другого объекта, то имя этого объекта указывается перед вызовом метода doFile() , а в терминах языка Io - объекту передаётся сообщение:

Синтаксис языка Io

Первое, что обращает на себя внимание при ознакомлении с синтаксисом языка Io, - это отсутствие зарезервированных ключевых слов и операторов, знакомых по другим языкам. Исходный код любой программы записывается исключительно с помощью выражений, составляемых из сообщений, каждое из которых представляет собой объект, доступный (и изменяемый) в любой момент выполнения программы.

Для большей ясности можно воспользоваться нестрогой нотацией формы Бэкуса-Наура (в кавычках записаны литералы), приведенной в листинге 3.

Листинг 3. Нотация языка Io

В языке Io поддерживаются три наиболее широко используемых формата комментариев: //, /* */ и # . Способы их практического применения очевидны.

Сообщение может включать список аргументов, которые передаются, как обычные выражения, и вычисляются объектом, принимающим сообщение.

Листинге 4. Использование сообщения для организации цикла

В список аргументов можно включать и условные выражения, как показано в листинге 5.

Листинг 5. Использование условных выражений в сообщении

Следует ещё раз обратить внимание на то, что в первом случае литерал for и во втором случае литерал if не являются специальными формами или зарезервированными ключевыми словами, а представляют собой просто сообщения.

Операторы, доступные в языке Io

Оператор – это сообщение, в имени которого отсутствуют алфавитно-цифровые символы (за исключением знаков препинания и символа подчёркивания). К операторам также относятся литералы: and, or, return . Пример использования оператора:

В соответствии с концепцией языка Io это выражение компилируется в сообщение:

То есть, числовому значению 1 передаётся сообщение "+ " с аргументом 2 .

В сложных выражениях приоритет стандартных арифметических операторов соответствует приоритету аналогичных арифметических операторов языка C.

Операторы, определённые пользователем, выполняются слева направо.

В языке Io существуют три оператора присваивания:

• ::= создаёт слот, создаёт set-метод для этого слота и присваивает слоту значение;
• := создаёт слот и присваивает ему значение;
• = если слот существует, то ему присваивается значение, в противном случае генерируется исключение.

Операторы присваивания при компиляции преобразовываются в соответствующие сообщения, как показано ниже:

Методы перечисленных выше сообщений можно переопределять (то есть заменять на свои методы). В частности, для локальных объектов методы updateSlot() переписываются таким образом, чтобы не возникало исключений в случаях присваивания значений слотам этих локальных объектов, указанных в явной форме.

Работа со строками

Строки в языке Io представлены в виде последовательностей символов, заключённых в двойные кавычки. Если сам символ двойной кавычки содержится в строке, то требуется его экранирование с помощью обратного слэша, например:

В строке могут быть записаны стандартные Esc-символы (\n, \t, \a и т.д.):

Для того, чтобы обойтись без экранирующих символов, а также записывать многострочные блоки текста в их естественной форме, необходимо начинать и завершать такой блок тремя двойными кавычками, как показано ниже:

Числовые значения

При записи чисел допускается применение практически всех стандартных форматов, также в Io поддерживается запись числовых значений в шестнадцатеричном представлении.

Листинг 6. Числовые форматы, поддерживаемые в языке Io

Арифметические выражения вычисляются по традиционной методике, несмотря на то, что операторы, обозначающие арифметические действия, внутри интерпретатора преобразовываются в вызовы соответствующих методов (этот механизм скрыт от пользователя):

Для передачи результата вычислений в какой-либо объект используется метод doString() , как показано в листинге 7.

Листинг 7. Использование метода doString()

Если перед вызовом метода doString() не указывается имя объекта, то вычисление и вывод результата выполняется в текущем контексте.

Пример Io-программы

В большинстве случаев лучше понять особенности синтаксиса языка программирования помогает исходный код программы, не очень большой по размеру и без излишних сложностей в логике. Упрощённая имитация операций с личным банковским счётом вполне подходит для первого опыта. Исходный код приведён в листинге 8.

Листинг 8. Операции с личным счётом

В этой программе использованы практически все элементы синтаксиса, описанные в предыдущих разделах, - сообщения, операторы присваивания и арифметические операторы, числовые значения. Создание и использование объектов, слотов и методов будет рассмотрено во второй статье цикла, а в данный момент достаточно их понимания на интуитивном уровне.

Управляющие конструкции

Для обеспечения работы логических управляющих конструкций в языке Io определены специальные синглтоны (singleton) true (истина) и false (ложь), а также особый синглтон nil , обозначающий неопределённое значение ("отсутствие значения").
Операции логического сравнения выполняются с помощью методов: ==!=><>=<= , которые возвращают true или false . Кроме того, существует метод compare() , возвращающий значения -1 (меньше), 0 (равно) или 1 (больше) и применяемый для реализации специализированных методов сравнения значений.

Метод if() используется в следующей форме:

Здесь необязательная часть else опущена. Условное выражение считается истинным, если его результатом является true , а если условное выражение даёт результат false или nil , то оно ложно.

Метод if() возвращает в качестве значения сообщение, вычисленное по результату проверки, поэтому выражения, представленные ниже, являются эквивалентными:

Условные выражения можно также записывать в более развёрнутой форме:

Кроме того, поддерживается метод для вложения условных выражений elseif() :

Также поддерживаются методы в стиле языка Smalltalk: ifTrue() , ifFalse() , ifNil() и ifNonNil() , позволяющие записывать выражения в форме:

Здесь следует обратить особое внимание на то, что начальное условное выражение обязательно должно быть записано в круглых скобках.

Циклы

Самый простой тип цикла - безусловный бесконечный цикл, реализуемый с помощью метода loop() :

Если цикл должен быть повторён строго определённое количество раз без проверки каких-либо условий, то применяется метод repeat() , как показано в листинге 9.

Листинг 9. Использование метода repeat()

Цикл, точное количество повторений которого заранее неизвестно, но задано определённое условие, при котором итерации должны выполняться, записывается с помощью метода while() :

Особенностью этого цикла является то, что при необходимости записи в теле цикла более одного сообщения следует отделять эти сообщения друг от друга символом перехода на новую строку, а не запятой, иначе цикл будет выполняться некорректно. Кроме того, целесообразно оставить условное выражение в первой строке, а каждое сообщение в теле цикла записывать на отдельной строке. Такая форма, приведенная в листинге 10, будет выглядеть более привычно.

Листинг 10. Пример организации цикла while

Метод for() позволяет организовать цикл с определёнными граничными значениями и с заданным шагом счётчика. Общая форма записи этого цикла выглядит так:

Если шаг изменения счётчика не указан, то по умолчанию принимается значение шага, равное 1.

Листинг 11. Пример организации цикла for

В теле любого из выше перечисленных циклов можно использовать методы изменения порядка выполнения: continue позволяет игнорировать оставшуюся часть тела цикла и начать новую итерацию, а break немедленно завершает выполнение всего цикла.

Листинг 12. Управление порядком выполнения цикла

Следует отметить, что при нестандартном завершении цикла (с помощью метода break ) возвращаемое значение считается неопределённым (обозначается, как nil ).

Метод return позволяет осуществить выход из любой части блока кода или тела метода с требуемым возвращаемым значением, например:

Листинг 13. Использование метода return для возврата значения из метода

В языке Io реализован также цикл foreach , но его практическое применение несколько отличается от применения традиционных циклов, поэтому этот цикл будет рассматриваться в следующих статьях.

Заключение

Язык Io представляет собой чистый объектный язык, то есть реализацию концепции "всё есть объект". Его синтаксис прост и ясен, хотя на первый взгляд и может показаться непривычным. В Io реализованы все считающиеся де-факто стандартными конструкции и операторы.

В первой статье цикла были описаны общие характеристики и синтаксис языка программирования Io. Во второй статье будет рассматриваться объектная система языка, а в третьей статье - дополнительные средства и возможности Io.

Работа любого инженера, IT-специалиста, маркетолога, бизнес-аналитика, менеджера связано с необходимостью создания различных диаграмм, блок-схем и графиков. Для данных целей замечательно подойдет сервис «draw», доступный по ссылке .

Его главное достоинство – бесплатность. За пользование ресурсом не взнимается плата, что делает его ещё более приятным. Кроме того, для полноценной работы не нужно проходить регистрацию и проходить нудный процесс авторизации на сайте.

При входе на главную страницу предстоит выбрать путь для сохранения проекта. Конечные результаты можно хранить на удаленном хранилище – «облаках» («Google Drive», «Dropbox», «OneDrive») , на ресурсе «GitHub», на жёстком диске устройства «Device» или непосредственно в среду для управления разработкой веб-приложений и программ «Trello».

По умолчанию, стоит включённой галочка для сохранения выбранных настроек в дальнейшем.

Чтобы упростить задачу по ознакомлению с возможностями онлайн-сервиса, изменим язык интерфейса, нажав на «Language».

После установки необходимого языка, потребуется перезагрузить страницу для того, чтобы изменения вступили в силу.

Теперь перейдем к созданию нового проекта, для чего нажмем на кнопку «Создать новую диаграмму», после чего осуществиться переход к графической части работы.

Можно открыть пустое поле и создать схему самостоятельно или воспользоваться библиотекой различных графических шаблонов. «Диаграммы Исикавы» (она же «рыбий хвост»), «Схемы для описания бизнес-процессов», «Структурные графики», «Блок-схемы», «Электрические схемы», «Программные блоки» - это лишь малая часть того, что уже присутствует в качестве заготовок.

Большой интерес пользователей вызывает возможность описание бизнес-процессов с помощью сервиса draw.io.

Для начала работы выберем «Пустую диаграмму» среди категории шаблонов «Базовый».

В качестве примера опишем основные бизнес-процессы, связанные с работой современного не крупного интернет-магазина.

Для графической части работы нам потребуются разделы «BPMN Общие» и «BPMN Events».

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

Создадим на схеме событие – поступление заявки менеджеру, который занимается обслуживанием интернет-магазина, для чего перетянем мышкой значок конверта, символизирующий поступление заявки (входящего сообщения) и контейнера «Задачи», описывающий реакцию на обращение.

Установим связь, поставив для этого стрелку между двумя блоками.

Для удобства использования онлайн-инструмента draw.io, имеется верхняя панель управления, содержащая кнопки отмены действий, масштаба, прокрутки и управления слоями, а также наиболее используемые элементы (опорные точки, стрелки установления связей).

Двойным щелчком левой кнопки мышки отредактируем текст на блоке, переименовав «Task» в «Проверка наличия заказанных товаров на складе». Именно с этого шага, менеджер интернет-магазина должен начинать анализ заказа, так как от него зависит дальнейшие шаги по коммуникации с клиентом.

Логично предположить, что следующим блоком должно быть условие, которое определяет последовательность действий при различных результатах проверки складских остатков.

* Важно помнить, что бизнес-процессы пишутся не для бумаги, а для обычных людей, работников компании. Чем детальнее и подробнее будет произведена проработка, тем меньше ошибок, будет происходить в будущем. От постановки задачи зависит 80% успеха её выполнения.

При наличии товара на складе можно перейти к «Проверке корректности заполненных данных пользователем», при отсутствии к «Уточнению точной даты поставки». Для того, чтобы написать комментарий над каким-либо блоком или стрелкой нужно выбрать вкладку «Общие» и элемент «Text». В рассматриваемом случае это указания направлений «Да/нет».

Разберем отрицательную ветку и нанесем на схему все дальнейшие шаги действий.

Добавятся один вспомогательный блок «Связаться с поставщиком, запросить точные сроки отправки», два основных «Подобрать альтернативные варианты товаров, которые есть в наличии и можно предложить, как замену», «Проверка корректности заполненных данных пользователя» и блок связи с клиентом «Связаться по телефону и обсудить детали доставки». Важно быть заранее подготовленным к любому исходу и потому прорабатывать альтернативы. В нашем случае мы создали бизнес-процесс в сервисе draw.io, связанный с подборкой альтернатив, что поможет удержать клиента в случае его несогласия со сроками доставки. Вспомогательные блоки изображаются в виде пунктира, доступны во вкладке «BPMN Общие».

Если магазин работает над лояльностью своих клиентов, то возможно добавить ещё один блок, связанный с предоставлением персональной скидки на альтернативный товар, в случае если сроки затягиваются по вине интернет-магазина (например, некорректно отобразились остатки товара (на сайте «в наличии», а по факту товар закончился)).

Теперь осталось добавить ещё одно условие: «Клиент согласен на заказ». На данном этапе решается исход всей деятельности, либо заказ переходит в оформление и далее поступает в «Службу снабжения», либо менеджер закрывает заказ, предложив получить оставившему заявку посетителю сайта уведомление о поступлении товара в наличии.

Таким образом, потратив всего 5 минут времени, мы проработали бизнес-процессы в сервисе draw.io, относящиеся к менеджеру по продажам. Аналогичным образом можно составить на отдельных листах схемы для остальных подразделениях, участвующих в деятельности интернет-магазина, а также произвести обобщение всех служб компании в целом.

Чтобы открыть документ в будущем, достаточно просто зайти на сайт сервиса, и, выбрав «Открыть существующую диаграмму», найти сохраненный ранее xml-проект.

Кроме конечных результатов в указанном ранее формате, возможно экспортировать диаграммы и схемы как pdf и html документы, а также в виде картинок и векторной графики (SVG).

С недавнего времени появилась возможность скачать draw.io в виде программы на ПК (работает на операционных системах Windows, MacOs, Chrome OS, Linux), а также установить как мобильное приложение, работающее, как на iOS, так и на Android.

Для данных целей необходимо на панели управления нажать кнопку «Дополнительно» и в раскрывшемся меню выбрать «Скачать».

Представленной в обзоре информации вполне достаточно, чтобы начать работу над своим проектом, вне зависимости от того, к какой отрасли, сфере деятельности или производства он относится, будь-то программирование, администрирование, проектирование, управление, распределение или снабжение и т. п.

При возникновении трудностей, всегда можно ознакомиться с инструкциями и официальной документацией, представленной на сайте онлайн-сервиса.

Я наконец то нашел то что искал. Бесплатное средство моделирования, которое поддерживает возможности описания бизнес-процессов — Draw.io

Draw.io это инструмент для создания диаграмм и блок-схем онлайн. При этом огромное число шаблонов, которые позволяют нарисовать все что душе угодно. Инструментарий Draw.io очень напоминает MS Visio и возможно сделан под него, однако приложение от Microsoft программа платная, а онлайн сервис Draw.io — совершенно бесплатный, и главное не требует регистрации.

Подобный функционал уже есть в облачном исполнении — это система , однако данная система платная, хотя подписка и стоит недорого, но против бесплатной тяжело соревноваться.

Мнение о Draw.io

И хотя в данном инструменте не все так хорошо с точки зрения методологии, рисовать можно, особенно предварительно задав соглашение по моделированию для слушателей учебного курса. И хотя инструмент не такой красивый как бесплатный , облачная реализация делает его конкурентным.

Чтобы создать блок модель онлайн, нужно всего-то создать новый документ в инструментарии.

В панели объектов, как и в MS Visio нужно выбрать категорию и перенести объект на поле модели, курсором мыши. Объектов очень много, так что их вполне хватит для создания полноценной модели бизнес-процесса (в отличии от , в котором набор объектов и моделей серьёзно ограничен).

Чтобы соединить объекты модели друг с другом, требуется выделить объект и навести указателем мыши на другой, после чего появиться зеленый флажок, который нужно перетащить на объект.

Самое главное, что после создания модель бизнес-процесса возможно экспортировать на свой компьютер в формате изображение (PNG, GIF, JPG, PDF) через меню: Файл – Экспортировать.

Ну и конечно облачная фишка — сервис Draw.io синхронизируется с Google Диском, что дает возможность сохранять проект прямо на диск Google.

В целом инструмент мне понравился, похоже Draw.io вполне пригоден для отрисовки бизнес-процессов online. И хотя в больших проектах федерального уровня пока конкуренции почти нет, для небольших компаний, которые описывают свои бизнес-процессы — вполне пригодный инструмент.