Здравствуйте, позвольте рассказать вам про сервис falang.io - редактор блок схем.
Он основан на теоретической основе, заложенной при разработке визуального языка Дракон, но расширяет и дополняет его.
В первую очередь это не рисовалка с блоками и стрелками, а редактор алгоритмов. Пользователь никак не влияет на расположение блоков на холсте, но он может повлиять на расположение блоков в самом алгоритме.
Для вставки новых икон используются так называемые "валентные точки". При нажатии правой кнопкой на валентную точку можно выбрать блок, который хотите вставить. При нажатии левой кнопкой будет вставлен последний выбранный блок.
Для перемещения икон нужно зажать курсор левой кнопки над иконой, и перенести ее в нужное место. При переносе будут подсвечены только те валентные точки, куда возможно перемещение в данный момент. Для перемещения группы блоков, надо сначала выделить один блок, а потом с помощью шифта другой блок на том же шампуре.
Реализованы базовые алгоритмические иконы: условия, циклы и т.п. Из каждого цикла можно сделать выход как вверх (continue) так и вниз (break). Для добавления выхода из цикла нужно нажать правой кнопкой на последнюю валентную точку в "шампуре", и выбрать соответственно "continue", "break".
Система позволяет сделать выход из любой части алгоритма, и автоматически рисует линии таким образом, чтобы не было разночтений при просмотре алгоритма. Там, где линии вынужденно пересекаются, рисуется соответствующий полукруг для визуального обхода одной линии над другой. В результате можно визуализировать даже достаточно сложные алгоритмы.
Чтобы поиграться можно выбрать любой алгоритм из галлереи и нажать на кнопку "редактировать". Это можно сделать без регистрации на сайте.
Есть также короткое видео, в котором описываются базовые принципы редактирования схем:
Для чего всё это
Началось с того, что автор однажды наткнулся на книгу Владимира Паронджанова "Алгоритмы и жизнеритмы на языке ДРАКОН. Разработка алгоритмов. Безошибочные алгоритмы.". Сама идея показалась очень интересной, но не понравилась ни одна программа, реализующая данную теорию. Пришлось попробовать написать самому.
Далее в планах продолжить развивать в сторону визуального программирования. Тут можно найти миллион различных применений, но скорее всего первой целью будет аналог сервиса Scratch. Представление алгоритмов, которое предлагает falang, выглядит гораздо нагляднее, и, как кажется, поможет быстрее изучить основы программирования детям.
Комментарии (37)
twid
05.01.2023 19:49+1"В первую очередь это не рисовалка, а редактор алгоритмов."
Рисовалка, очень симпатичная. Если учить детей алгоритмам...как должен выглядеть метод Монте Карло в данном редакторе?
serginho Автор
05.01.2023 20:14+1Будет выглядеть вот так :)
Тут конечно не ставится задача переплюнуть текстовое программирование.
saltpepper
06.01.2023 16:35Осталось только убрать обводки-прямоугольники-соединители вокруг текста, сжать по вертикали до нормального межстрочного расстояния, подсветить синтаксис - и получится красивый, легко читаемый и понятный блок кода.
pharo
06.01.2023 16:44Не думали ли о возможности «сворачивать пути схемы» для более лёгкой навигации и обзора схемы по возможности в более компактном её представлении при этом?
JQuery567
05.01.2023 20:33Здравствуйте! Спасибо Вам.
1) Очень хорошо, что после нескольких десятилетий вялотекущей болтовни про язык Дракон наконец-то появилась какая-то нормальная реализация редактора блог-схем :-)
2) У Вас там в картинке (и на сайте) опечатка:
слово Дейтвие, возможно в честь Дейтелов :-)
3) кодогенерация из схемы в python/go/си/ uml-диаграмму активности будет?
4) масштабирование/ деление на части крупной схемы будет?
5) раз Вы замахнулись на алгоритмы, то, вероятно надо будет сделать сборник готовых известных алгоритмов типа "полет на Марс методом сортировки пузырьков в сферическом вакууме" :-)
serginho Автор
05.01.2023 20:41Здравствуйте! Спасибо за оценку!
Всё будет. И кодогенерация в различные языки, и система контроля версий, и ветки. И шаблоны для различных действий, где можно выбрать например один параметр, а далее вставляется код по шаблону с этим параметром. Мысли как это реализовать есть.
Одна из целей данной статьи как раз собрать побольше фидбека от людей, которые в перспективе могут использовать такую систему в своей работе.
pharo
06.01.2023 00:18Всё будет. И кодогенерация в различные языки,
Как планируете решать вопрос с кодогенерацией из Дракон представления всё возможное синтаксически/семантическое представление целевого языка и оперирование этими понятиями разработчиком алгоритма в Дракон представлении?
Есть же, к примеру, и такие языки программирования как Лисп, Форт, Пролог…
P.S. Планируется ли и сделать возможность на базе сервиса редактирование и электрических/электронных схем по примеру оригинальной программы XCircuit
Кто то для программирования Ардуино использует FlProg, HiAsm, Algorithm Builder fo AVR.
Будет ли автономная версия редактора для Linux, Windows?
Может в Вашем ПО будет и в чём то полезно приближение к возможностям Yed Editorserginho Автор
06.01.2023 00:28Как планируете решать вопрос с кодогенерацией из Дракон представления
всё возможное синтаксически/семантическое представление целевого языка и
оперирование этими понятиями разработчиком алгоритма в Дракон
представлении?В том то и дело, я немного ломаю игру. Корни идеи лежат в Драконе, но тем не менее то, что вы видете это отход от некоторых догм, сложившихся в Дракон сообществе.
всё возможное синтаксически/семантическое представление целевого языка
Цель falang быть как раз надмножеством любого языка. как например Typescript является надмножеством JavaScript. Довольно просто вместо блок схемы подставить соответствующие конструкции языка (if, switch, ...) и перевести это в код.
В идеале хотел бы добиться взаимной конвертации "код" <-> "схема", но посмотрим как будет.
Пока я немного если честно припух рисовать авто-стрелки, поэтому вылил это сейчас в сообщество послушать что люди скажут. Надо было высказаться.
Будет ли автономная версия редактора для Linux, Windows?
Я знаю как это перевести в автономную версию. Опять же если будет в этом потребность.
pharo
06.01.2023 00:36Пока я немного если честно припух рисовать авто-стрелки, поэтому вылил это сейчас в сообщество послушать что люди скажут. Надо было высказаться.
Когда некоторое время назад посетил форум Дракон и там увидел тему про «кастомизацию» своего графического редактора на основе ядра разработки от Митькина, но не видно какое то развитие этого предложенного направления в обсуждении.
DrakonWidget — сделай сам свой Дракон-редакторserginho Автор
06.01.2023 00:48Я не долго в том форуме. Там у коллег проблема в том что пишут на старом инструментарии. У меня React, TypeScript, Mobx, Nest. Ну и опыт уже есть. Мой инструментарий при правильном применении дает буст в разработке очень серьезный.
DvoiNic
06.01.2023 11:06Дело не в инструментарии.
Просто на моей памяти уже пяток человек бралось сделать то, что хотите вы, и забивало через некоторое время. с двумя я даже списывался, спрашивал о причинах — и получал совершенно предсказуемый ответ.serginho Автор
06.01.2023 16:38Ну тут же как в любом добром деле. Если нет отклика от общества то люди и забрасывают свою работу. Если бы нужно было, их бы нашли и попросили сделать то, что нужно.
DvoiNic
06.01.2023 17:32Ну да, примерно так. Люди заинтересовывались дураконом, когда не было опыта. В процессе (и основной работы/учебы, и разработки инструментария для дураконства) набирались опыта, и начинали понимать: Нормальному человеку это не нужно.
Тупым не поможет в принципе, начинающим только усложняет, научившимся уже не нужно. Но теоретически звучит заманчиво -«программирование без знаний программирования», а на практике получается что-то типа «бега с обязательными костылями».
На мой взгляд, единственное доброе дело в отношении «дураконства» — это душить в зародыше. Ибо для ленивых тупых идиотов это создает иллюзию. Ну и в конце концов, «программирование» (тем более, в очень ограниченных дураконом рамках) — вполне себе обычный навык, ничего сверхъестественного. Начиналось-то, понятно, от безысходности и советской системы (и программистов мало, и штатным расписанием не предусмотрены, и отношение к программистам как к отдельной профессии мутное — «нет продукта», и учить их непонятно как, и «носители знаний»- схемотехники и системщики — не горят желанием уменьшать свою незаменимость, и аппаратное обеспечение, хм, «так себе», да и программное, несмотря на книгу «как улучшить работу ума», так за 40 лет и не шмогли (дуракон был изобретен для облегчения использования ПРОЛ-2, что было понятно и обоснованно) ). Впрочем, за 40 лет оно себя показало полностью импотентным, что вполне закономерно.pharo
06.01.2023 18:35несмотря на книгу «как улучшить работу ума», так за 40 лет и не шмогли
Навеяло Программирование без программистов — это медицина без врачей :)
А, вообще то, каждому инструменту своя ниша примененения.
Дракон схемы — как инструмент дополнительного документирования программного кода как и в каких то аспектах общего понимания структуры и функционала ПО. (достаточно посмотреть кто ратует за Дракон инструментарий и внедряeт в свой производственный цикл)
P.S. Тот же HiAsm более практичен в понимании возможностей визуального программирования.
Может ещё Smalltalk близок к интеграции в «Визуальное программирование». Не зря же FlProg автор сделал на нём.
pharo
06.01.2023 01:18В идеале хотел бы добиться взаимной конвертации «код» <-> «схема», но посмотрим как будет
т.е. и представить и Falang на таком уровне? :)
P.S. А, помогает ли текущий разрабатываемый инструмент в создании редактора и в чём, если это так?
pharo
06.01.2023 04:13+1«код» <-> «схема»
Для Python на Хабр была такая серия статей от SergeySatskiy
Автоматическая визуализация python-кода.
itGuevara
05.01.2023 23:31Редакторы блок-схем и ARIS Smart Designer (на примере EPC)
Есть ARIS Smart Designer (EPC). Хотелось бы его повторить на чем-то еще кроме ARIS Express, например, Drawio, Falang.io, DgrmJS и т.п.
Подготовил макет (прилагаю) Excel 2016 + Drawio в части Event + Function (только два объекта из EPC, чтобы идея была проще видна). Такое повторить бы в реальном времени, как в ARIS Smart Designer: автоматическое обновление, таблицу размещать непосредственно рядом со схемой процесса. Была бы интересна интеграция "встроенной" таблицы с Excel и Google Sheets.
К макету: нужно указать пути (Drawio + Temp) на листе «Set» (нужно локально поставить Drawio, можно portable). Далее на листе List1 нажимать «в паре» кнопки: «Выгрузка в файл» и «Запуск файла». Также можно нажимать и другие кнопки, которые создают новые или удаляют Event + Function. Это функции: добавить объект (Event or Function) вниз (Добавление), вставить объект в указанное место (выбранную строку, Вставка), удалить конкретный объект (выбранную строку), очистить (удалить все). В ARIS Express добавляется объект только в конец, а потом перемещается вручную кнопками "вверх" \ "вниз". В макете показан более удобный вариант.
Пользователю будут отображаться только столбцы с названиями Event & Function (остальные строки в Excel можно скрыть).
Простой (только WorkFlow) Макет на Excel 2016. Половина кода - файловые преобразования: чтобы русские буквы были в Drawio, пришлось из стандартного Excel ASCII делать Unicode noBOM.
Макет посложнее EPC: WorkFlow + DocFlow тут
serginho Автор
05.01.2023 23:37Реализовать последовательность бизнес-процессов, да конечно безусловно тоже надо. И можно сделать очень круто. Будем делать.
itGuevara
06.01.2023 21:37последовательность бизнес-процессов
ARIS Smart Designer (EPC) - это не совсем "последовательность бизнес-процессов". Это скорее "Связанные данные", которые умеют в ["картинка" -> "таблица"] и обратно. Это позволяет заполнять таблички и получать схемы, т.е. можно нотацию вообще не знать.
Второй плюс: т.к. у нас есть таблица со ВСЕМИ данными о процессе, то это уже BPM - хранилище. Так и до "большого АРИСа" недалеко.
Полагаю, что у Дракона так и не появилась ветка "бизнес-процессы" (подобие EPC).
Fragster
06.01.2023 00:20Всё-таки нужно что-то гит ориентированное, в основе чего текст. Что-то типа визуального https://plantuml.com/ (ну и с гитом можно чуть более дружелюбным быть, но и так неплохо.
serginho Автор
06.01.2023 00:37Дружище, все будет, и просмотр изменений, где удаленные блоки будут красными, новые зелеными. Гит будет, но под капотом.
acyp
06.01.2023 08:24На сколько я понимаю парадигму DRAKON`а, которая, собственно и отличает оригинал от остальных алгоритмических зыков - это отсутствие пересечений путей ("королевская дорога"). Т.е. Ваше утверждение
Он основан на теоретической основе, заложенной при разработке визуального языка Дракон, но расширяет и дополняет его.
не верно из-за наличия в схемах "мостиков". Просто очередной визуализатор блок-схем. Это не плохо создавать очередной редкатор. Не сильно правильно сравнивать его с DRAKONом. Тем более что уже есть редактор, честно реализующий парадигму оригинала, drakonhub.com называется.
VCheese
06.01.2023 09:10Рад, что на Хабре снова вспомнили про ДРАКОН. Моё мнение: перед существующими ДРАКОН-редакторами у вашего сервиса есть фатальный недостаток -- это браузер. Даже простая схема заметно притормаживает, а что будет дальше?
slavius
06.01.2023 14:10Только после комментариев автора типа "всё будет" понял что это представление авторского проекта, а не обзор стороннего сервиса. Даже не помогли планы в статье о развитии:)
Круто! Успехов!
serginho Автор
06.01.2023 15:56Ну так если я изначально скажу что это авторский проект то надо писать в "я пиарюсь". Я понимаю данный пост может выглядеть как реклама. Ну я вот пишу свой проект и надеюсь что он будет полезен. Я вообще изначально думал что в минусы уйду. Но вроде людям зашло, даже плюсуют. Спасибо Хабру.
pharo
06.01.2023 16:29Но вроде людям зашло, даже плюсуют. Спасибо Хабру.
Да, уж, если посмотреть какую то информацию в разрезе Предтавительствa статей главного Дракониста по рейтингу и обсуждениям, где даже сам их автор не определился к каким Хабр тегам их отнести.
P.S. Предыдущая недавняя статья по Дракон языку (20 декабря 2022)
Лабиринты из линий: превращаем сложный сценарий в понятную схему на языке ДРАКОН
DvoiNic
06.01.2023 17:39как пет-проект — «более чем». Сделано красиво — у меня по сравнению было полное дерьмо. правда, вся команда воспитанников книг "улучшателя работы ума™" на три порядка дерьмовее, они за 40 лет не сподобились ни на что.
как что-то практическое… ну, бессмыслица как минимум. Собственно, все следует из истории этой разработки.
Sazonov
Описано только "в первую очередь". Дальше наверное забыли?
Не написано главного - какая область применения или решаемые задачи? Ничего нет про наличие аналогов и сравнения с ними.
serginho Автор
Спасибо, добавил в конце описание мотивации и задач.