For me the command would be:

If everything is working correctly, you should see the following result:

File app.vue will be updated as it was already there, adding the correct import for Home. A new component will also be created Home. If we open app.vue, we should see:

The component is imported correctly and the folder Home with file home.vue was created correctly!

graph2app

Package drawio2vuejs developed using another package I developed: graph2app.

Soon I'm going to make an article about it, how to apply a module using three parts:

• GraphBuilder

App, where the main logic is, creates a directory and files from the graph. Graph made using instance GraphBuilder. In our case, I created DrawIoGraphBuilder, which extends it to parse the XML file from draw.io.
graph2app-drawio-graph-builder

Developers will be able to extend the base instance for graph analysis with other types of interfaces.

file is an abstraction of nodes on a graph. He has sample The from which the component is generated. Thus, when graph2app gets the graph, it also needs an instance file to call the render method on it and save the file properly.

As you can see, the package has modular structure. We could use the same DrawIoGraphBuilder with another instance file to create, for example, React applications from the same draw.io graph.

Conclusion

I hope you enjoy this article. I strongly believe that visualizing an application can improve performance. The library is still in beta and needs some improvement. I think that people will like this idea and they will contribute to development.

Please let me know your opinion. Thank you for your interest.

Francesco Saverio

Tags: Add tags

Draw.io- free app, designed for modeling diagrams and flowcharts of business processes. There is the possibility of integration with Google Docs, Dropbox, OneDrive, JIRA, Confluence, Chrome and GitHub. The Confluence Server and JIRA Cloud add-on are paid add-ons. The online version for synchronization with Google Drive is offered in 2 versions - with and without Google Apps support. In addition to the web version, there is a PC installer that supports Windows, MacOS, and Linux.

The application will be useful for managers and executives of companies who need a tool for building business process diagrams. The service is suitable for professionals whose activities are related to the creation of presentations and databases, the construction of engineering and network diagrams, software design.

Using the editor, you can create any schematic images - from diagrams electrical circuits to business model structures. Among the possibilities - the construction of diagrams, graphs and UML-models. There are dozens of shapes grouped into categories in the shape library. Objects can be formatted by changing fonts, color, gradient, line thickness, transparency level. Thanks to the ability to synchronize with Google Drive, several users can work on documents at the same time. Ready-made images can be saved on a PC hard drive or inserted into wikis and blogs. Available export formats are PDF, GPG, SVG, XML and JPG.

Key Features

• Free integration with Google services
• Paid integration with Confluence and JIRA Cloud
• HTML client with IE 6-8 support
• Support for smartphones and tablets
• Export documents to PDF formats, GPG, SVG, XML and JPG
• Offline application for Windows, MacOS and Linux
• Support 27 languages

Io - compact object-oriented programming language

Part 1. Overview of the features and syntax of the Io language

Content series:

In the group of languages ​​based on the object-oriented programming paradigm, Io stands out for its simplicity and conciseness. There are no ideal programs that are completely free from any flaws, especially when it comes to the implementation of a programming language. That is why it is necessary to study in sufficient detail the capabilities and features of any programming language (in this case, Io), as well as the areas of its application, before making a final judgment about its necessity, efficiency, convenience for the developer, etc.

The history of the appearance of the Io language

The Io language appeared in 2002, when its author Steve Dekorte, trying to better understand the principles of functioning and implementation of programming languages, decided to combine theory with practice and write his own simple and concise language. Decort designed Io to be a pure, prototype-based, dynamically typed object-oriented language that eliminates the distinction between "class" and "instance". Wikipedia notes the influence on Io of languages ​​​​such as Smalltalk (the principle of "everything is an object" and dynamic typing), Self and NewtonScript ( object model, based on prototypes), Lisp (equivalence of instructions and data in program code), as well as Lua and Act1.

General information

Io program code is translated and executed using a compact, highly portable virtual machine. Io packages for various platforms are located on his Web site. The Io language is distributed under the terms of the BSD/MIT license.

Main properties given language that the author himself emphasizes are conceptual simplicity and conciseness, embeddability (the ability to combine with code written in other languages) and extensibility, the ability to dynamically change internal objects at runtime, introspection, and the implementation of the concept of parallelism.

In Io, all entities are objects that have the ability to change during program execution. The code of any program is composed of expressions, which can also be modified during the execution of the program. Expressions, in turn, are actually message passing instructions. Implemented the mechanism of context scopes of objects at the level of functions and code blocks. Actors are used to manage parallel computing.

Program execution

In Io programs, the presence of the function is not required. main() or some special object from which execution should begin. Thus, Io-programs can be considered scripts to a certain extent.

Starting the program from command line is done as follows:

You can also work in the interactive mode of the Io interpreter, as shown in Listing 1.

Listing 1. Using the Io interpreter interactively

In interactive mode, not only the result of executing the entered expression is displayed, but also the value returned by this expression, denoted by the prefix " ==> ". In this case, the result of executing the expression is the same as the return value.

It should be noted that in interactive mode, the expressions entered are executed in the general top-level context corresponding to the object named Lobby.

Listing 2. Contents of the Io program's top-level context

In interactive mode, you can also execute programs that are stored in separate files as below:

The specified program will be executed by default in the context of the same object lobby. If it is necessary to execute the loaded program in the context of some other object, then the name of this object is specified before calling the method doFile(), and in terms of the Io language, a message is transmitted to the object:

Io language syntax

The first thing that catches your attention when you get acquainted with the syntax of the Io language is the absence of reserved keywords and operators familiar from other languages. Source of any program is written solely with the help of expressions made up of messages, each of which is an object that is available (and mutable) at any time the program is executing.

For greater clarity, you can use the non-strict Backus-Naur form notation (literals are written in quotes), shown in Listing 3.

Listing 3. Io language notation

Io supports the three most widely used comment formats: //, /* */ and # . The ways of their practical application are obvious.

The message may include a list of arguments, which are passed as ordinary expressions and are evaluated by the object receiving the message.

Listing 4. Using a message to loop

Conditional expressions can also be included in the argument list, as shown in Listing 5.

Listing 5. Using conditionals in a message

It should be noted once again that in the first case the literal for and in the second case the literal if are not special forms or reserved keywords, but are simply messages.

Operators available in the Io language

An operator is a message whose name does not contain alphanumeric characters (with the exception of punctuation marks and the underscore). Operators also include literals: and, or, return. Operator usage example:

According to the concept of the Io language, this expression compiles to a message:

That is, the numerical value 1 the message is sent " + " with argument 2 .

In complex expressions, the precedence of standard arithmetic operators corresponds to the precedence of analogous C arithmetic operators.

User-defined statements are executed from left to right.

There are three assignment operators in Io:

• ::= creates a slot, creates a setter for that slot, and assigns a value to the slot;
• := creates a slot and assigns a value to it;
• = if the slot exists, then it is assigned a value, in otherwise an exception is thrown.

Assignment operators are converted to appropriate messages when compiled, as shown below:

The methods of the messages listed above can be overridden (that is, replaced with your own methods). In particular, for local objects, the methods updateSlot() are rewritten in such a way that no exceptions are thrown when values ​​are assigned to the slots of these local objects that are explicitly specified.

Working with strings

Strings in Io are represented as sequences of characters enclosed in double quotes. If the double quote character itself is contained in a string, then it must be escaped with a backslash, for example:

The line can contain standard Esc characters (\n, \t, \a, etc.):

To avoid escaping characters, and to write multiline blocks of text in their natural form, you need to start and end such a block with three double quotes, as shown below:

Numeric values

When writing numbers, almost all standard formats are allowed, and Io also supports writing numeric values ​​in hexadecimal notation.

Listing 6. Number formats supported in Io

Arithmetic expressions are evaluated according to the traditional method, despite the fact that the operators denoting arithmetic operations are converted inside the interpreter into calls to the corresponding methods (this mechanism is hidden from the user):

To transfer the result of calculations to some object, the method is used doString(), as shown in Listing 7.

Listing 7. Using the doString() method

If before calling the method doString() the name of the object is not specified, then the calculation and output of the result is performed in the current context.

Io program example

In most cases, the source code of the program, which is not very large in size and without unnecessary complexities in logic, helps to better understand the syntax of a programming language. A simplified simulation of transactions with a personal bank account is quite suitable for the first experience. The source code is shown in Listing 8.

Listing 8. Personal account transactions

This program uses almost all the syntax elements described in the previous sections - messages, assignment and arithmetic operators, numeric values. The creation and use of objects, slots and methods will be discussed in the second article of the cycle, and in this moment it is enough to understand them on an intuitive level.

Control Structures

To ensure the operation of logical control structures in the Io language, special singletons are defined (singleton) true(true) and false(false) as well as a special singleton nil, denoting an undefined value ("no value").
Logical comparison operations are performed using methods: ==!=><>=<= , which return true or false. In addition, there is a method compare(), which returns values -1 (less), 0 (equal) or 1 (greater than) and used to implement specialized value comparison methods.

Method if() is used in the following form:

Here is the optional part else omitted. A conditional expression is considered true if its result is true, and if the conditional expression gives the result false or nil, then it is false.

Method if() returns as value the message calculated from the result of the check, so the expressions below are equivalent:

Conditional expressions can also be written in a more expanded form:

In addition, a method is supported for nesting conditional expressions elseif():

Smalltalk-style methods are also supported: ifTrue(), ifFalse(), ifNil() and ifNonNil(), allowing you to write expressions in the form:

Here you should pay special attention to the fact that the initial conditional expression must be written in parentheses.

Cycles

The simplest type of loop is an unconditional infinite loop, implemented using the method loop():

If the loop must be repeated a strictly defined number of times without checking any conditions, then the method is applied repeat(), as shown in Listing 9.

Listing 9. Using the repeat() method

Cycle, exact amount repetitions of which is not known in advance, but a certain condition is specified under which the iterations must be performed, is written using the method while():

A feature of this cycle is that if it is necessary to record more than one message in the body of the cycle, these messages should be separated from each other by the transition symbol to new line, not a comma, otherwise the loop will not run correctly. In addition, it is advisable to leave the conditional expression on the first line, and write each message in the loop body on a separate line. This form, shown in Listing 10, will look more familiar.

Listing 10. Example of a while loop

Method for() allows you to organize a cycle with certain boundary values ​​and with a given counter step. The general form of this loop looks like this:

If the counter change step is not specified, then the step value equal to 1 is assumed by default.

Listing 11. Organization example for loop

In the body of any of the above loops, you can use methods to change the order of execution: continue allows you to ignore the rest of the loop body and start a new iteration, and break terminates the entire loop immediately.

Listing 12. Controlling the order in which the loop executes

It should be noted that in case of non-standard termination of the loop (using the break) the return value is considered undefined (denoted as nil).

Method return allows you to exit from any part of a code block or method body with the required return value, for example:

Listing 13. Using the return method to return a value from a method

The Io language also implements a loop foreach, but its practical application is somewhat different from the use of traditional cycles, so this cycle will be considered in future articles.

Conclusion

The Io language is a pure object language, that is, an implementation of the concept "everything is an object". Its syntax is simple and clear, although at first glance it may seem unusual. Io implements all of the de facto standard constructs and operators.

The first article in the series described General characteristics and the syntax of the Io programming language. The second article will look at the language's object system, and the third article will look at additional features and capabilities of Io.

The work of any engineer, IT specialist, marketer, business analyst, manager is associated with the need to create various diagrams, flowcharts and graphs. For these purposes, the “draw” service, available at the link, is great.

Its main advantage is that it is free. There is no charge for using the resource, which makes it even more enjoyable. In addition, for full-fledged work, you do not need to register and go through the tedious authorization process on the site.

Upon entering home page choose a path to save the project. The final results can be stored on remote storage - “clouds” (“Google Drive”, “Dropbox”, “OneDrive”), on the “GitHub” resource, on the hard disk of the “Device” or directly in the environment for managing web application development and Trello programs.

By default, the checkbox is checked to save the selected settings in the future.

To simplify the task of getting acquainted with the capabilities of the online service, let's change the interface language by clicking on "Language".

After setting the required language, you will need to reload the page for the changes to take effect.

Now let's move on to creating a new project, for which we click on the "Create a new diagram" button, after which the transition to the graphical part of the work will take place.

You can open an empty field and create a diagram yourself, or use a library of various graphic templates. "Diagrams of Ishikawa" (aka "fishtail"), "Schemes for describing business processes", "Structure charts", "Flowcharts", " Electrical circuits”, “Program blocks” - this is only a small part of what is already present as blanks.

Of great interest to users is the possibility of describing business processes using the draw.io service.

To get started, select "Blank Chart" from the "Basic" template category.

As an example, we will describe the main business processes associated with the work of a modern, small online store.

For the graphical part of the work, we need the sections "BPMN General" and "BPMN Events".

When considering an example, we will not delve into the narrow specifics of store promotion, the work of a directologist, search engine optimizer, content manager, system administrator, which are also directly involved in the life of the enterprise, and as the starting point we will consider the receipt of an order from the client and the steps that need to be taken on the processing side.

Let's create an event on the diagram - the receipt of an application to the manager who maintains the online store, for which we will drag the envelope icon symbolizing the receipt of the application with the mouse ( incoming message) and the "Tasks" container, which describes the response to the request.

Let's establish a connection by placing an arrow between the two blocks.

For the convenience of using the draw.io online tool, there is top panel control, containing buttons for canceling actions, scale, scrolling and managing layers, as well as the most used elements (control points, linking arrows).

By double-clicking the left mouse button, we will edit the text on the block, renaming “Task” to “Checking the availability of ordered goods in stock”. It is from this step that the manager of the online store should begin the analysis of the order, since further steps in communication with the client depend on it.

It is logical to assume that the next block should be a condition that determines the sequence of actions for different results of checking inventory balances.

* It is important to remember that business processes are written not for paper, but for ordinary people, company employees. The more detailed and detailed the study is, the fewer errors will occur in the future. 80% of the success of its implementation depends on the setting of the task.

If the goods are in stock, you can go to “Checking the correctness of the data filled in by the user”, if not, to “Specifying the exact delivery date”. In order to write a comment above any block or arrow, you need to select the "General" tab and the "Text" element. In this case, these are indications of directions "Yes / no".

Let's analyze the negative branch and put on the diagram all further steps of action.

One auxiliary block "Contact the supplier, request the exact delivery time", two main ones "Select alternative options for goods that are available and can be offered as a replacement", "Checking the correctness of the filled user data" and a communication block with the client "Contact by phone and discuss delivery details. It is important to be prepared in advance for any outcome and therefore work out alternatives. In our case, we created a business process in the draw.io service associated with a selection of alternatives, which will help to retain the client in case of disagreement with the delivery time. Auxiliary blocks are displayed as a dotted line, available in the "BPMN General" tab.

If the store is working on the loyalty of its customers, then it is possible to add one more block related to the provision of a personal discount on an alternative product, if the deadlines are delayed due to the fault of the online store (for example, the remaining goods were displayed incorrectly (on the "in stock" site, and In fact, the goods have ended)).

Now it remains to add one more condition: "The client agrees to the order." At this stage, the outcome of all activities is decided, or the order goes into processing and then goes to the "Supply Service", or the manager closes the order, offering to receive a notification about the receipt of the goods in stock, who left the application.

Thus, having spent only 5 minutes of time, we have worked out business processes in the draw.io service related to the sales manager. Similarly, it is possible to draw up diagrams on separate sheets for the rest of the departments involved in the activities of the online store, as well as to summarize all the services of the company as a whole.

To open a document in the future, you just need to go to the service website, and by selecting "Open an existing diagram", find the previously saved xml project.

In addition to the final results in the previously specified format, it is possible to export diagrams and diagrams as pdf and html documents, as well as in the form of pictures and vector graphics(SVG).

Recently, it has become possible to download draw.io as a program on a PC (runs on operating systems Windows, MacOs, Chrome OS, Linux), as well as install as a mobile application that works on both iOS and Android.

For these purposes, you need to click the "Advanced" button on the control panel and select "Download" in the menu that opens.

The information presented in the review is quite enough to start working on your project, regardless of which industry, field of activity or production it belongs to, whether it is programming, administration, design, management, distribution or supply, etc.

If you encounter difficulties, you can always read the instructions and official documentation provided on the website of the online service.

I finally found what I was looking for. A free modeling tool that supports business process description capabilities - Draw.io

Draw.io is a tool for creating diagrams and flowcharts online. At the same time, a huge number of templates that allow you to draw whatever your heart desires. Tools Draw.io very reminiscent of MS Visio and possibly made for it, however, the application from Microsoft program paid, and online service Draw.io- completely free, and most importantly does not require registration.

Similar functionality is already in the cloud version - this is a system, however this system paid, although the subscription is inexpensive, but it's hard to compete against free.

Opinion about Draw.io

And although in this tool not everything is so good in terms of methodology, it is possible to draw, especially by pre-setting a modeling convention for listeners training course. And although the tool is not as beautiful as the free one, the cloud implementation makes it competitive.

To create a block model online, you just need to create new document in the toolkit.

In the object panel, as in MS Visio, you need to select a category and move the object to the model field with the mouse cursor. There are a lot of objects, so they are quite enough to create a full-fledged business process model (unlike , in which the set of objects and models is seriously limited).

To connect model objects to each other, you need to select an object and move the mouse pointer over another, after which a green flag will appear that you need to drag onto the object.

Most importantly, after creating a business process model, it is possible to export to your computer in image format (PNG, GIF, JPG, PDF) through the menu: File - Export.

And of course, the cloud feature - the Draw.io service is synchronized with Google Drive, which makes it possible to save the project directly to Google Drive.

In general, I liked the tool, it seems Draw.io quite suitable for rendering business processes online. And although in big projects there is almost no competition at the federal level yet, for small companies that describe their business processes it is quite a suitable tool.