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

Якщо все працює правильно, ви повинні побачити наступний результат:

Файл 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 для різних платформ розташовані на його веб-сайті. Мова 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. І хоча в великих проектахфедерального рівня поки що конкуренції майже немає, для невеликих компаній, які описують свої бізнес-процеси - цілком придатний інструмент.