September 12, 2018

Making HTML5 SVG animation of a diagram created in Grapholite

In our previous post about Aphalina Animation Maker — a new visual tool for creating fast interactive SVG animations for HTML5, we've noted, that it is compatible with Grapholite. And now we are going to demonstrate you an example of the transformation applied to a diagram originally created in Grapholite.

A process is quite ordinary: we just import a diagram into Aphalina Animation Maker and edit it, turning into animation, or even interactive animation. And then we save the result.

In few minutes we could get the following:



More examples of animations created in Aphalina HTML5 Animation Maker you can find in our Gallery.

August 24, 2018

A visual tool for creating fast interactive SVG animations for HTML5

It has been a long time since we have posted in our blog — and for good reason. We were focused entirely on working on a revolutionary new software product. And now we have something to surprise you!

We have developed a visual tool for creating SVG animations. No matter how loud it sounds, it really is a kind of Flash alternative, for HTML5.

We are sure you haven't heard of anything like that. Keep reading and you will be even more surprised how cool it is, how it works and how easy it is to use.

So... meet Aphalina HTML5 Animation Maker



This banner, of course, was created in our Animation Maker. Using Animation Maker you can draw:
  • HTML5 SVG animations
  • Animated banners
  • Icons
  • Sliders
  • Interactive web pages
  • Infographics
Animation Maker is compatible with Grapholite, that means you can import your images created in Grapholite and make them dynamic, interactive and embed in any web page.

Drawing is more efficient and easier than coding


Even though it seems reasonable to draw animations, not to code, a common practice now is to write HTML, SVG and JavaScript code manually using high-performance animation library such as GSAP. This is due to lack of convenient tools that can produce clean code and really fast animations working across all devices and browsers. And that is exactly what's under the hood of our new product.

The motto of Aphalina Animation Maker is "Animation should be drawn, not coded!". It is no exaggeration to say, that you can save thousands of developer hours using this approach.

You can click on image to enlarge


Some of Aphalina Animation Maker's technical details


To understand the revolutionary nature of our product, you need to know the following three things:
  1. It creates true resolution independent SVG-based animations that look crisp on all types of displays including ultra high DPI/Retina, no matter what zoom factor is used in browser.
  2. As far as we know Aphalina Animation Maker is the first general purpose animation tool that generates GSAP (GreenSock animation Platform) code for animated SVG drawings.
  3. As a result of the program you get a clean, compact, and human-readable JS/SVG/HTML output. It is easy to read, understand, debug and modify as if it was written by a human. It is embedded in single HTML file. The only external dependency is GSAP library from official CDN. The result can be used as a standalone html page or included in a web page using iframe. Additionally you can save the result as animated GIF or a video file.

Some features and highlights:

  • Scenes: a project organized as a series of scenes
  • Timelines: unlimited number of timelines per scene, full control of timelines playback from element events (click, mouseover, etc)
  • Keyframes: sophisticated timeline editor with control key frames for every property
  • Transforms: independent transform and opacity animations for a group and its elements: unlimited nested elements — unlimited possibilities!
  • Actions: triggered on shape events
  • Clip: any geometric shape can be used as a clip. Both clip shape and clipped content can be animated in any way.
  • Motion path, Sequences, Hand-drawing effect, Sprites and much more! Look at the following examples.




More examples you can find in our gallery.


Download Animation Maker


Aphalina Animation Maker is available in 2 editions:


1. Aphalina Animator PRO: classic desktop program for PC (Windows 7, 8, 10)

Click on image to download desktop version

2. Aphalina Animator TOUCH: a special Windows Store edition based on native UWP libraries, latest Win2D technology and fully optimized for pen and touch

Click on image to download application from Windows Store

Write us a feedback!

Since it’s the initial release, we have implemented only a small fraction of the planned features. Please let us know what missed features are most critical for your work and we will try to implement them first. Please, send us e-mail to support@aphalina.com.

More on Aphalina Animation Maker: https://aphalina.com/

August 7, 2017

A tool to create visual aids and presentations

Visual aids are powerful tool for conveying information in a simple yet efficient manner. They are a great way to enhance a presentation and illustrate specific points, to make a presentation more interesting and entertaining.

IT related concepts commonly involve the use of flowcharts, UML, entity-relationship model or other "standard" diagrams — all of them are built-in Grapholite, and they can be naturally used to create presentations and visual aids. The same goes for designing business processes, management schemes and visualization of multiple aspects of enterprise architecture. It is worth mentioning separately the capability to draw electrical circuits, local area networks and floor plans. However, the creation of visual aids in Grapholite application is not limited to those listed.

Grapholite was designed as the flowchart editor from the beginning, and it is natural to create by using it various types of classifications or to show relationship between items, concepts, etc. So, it's quite easy to create diagrams like this:


The next picture demonstrates a very different approach to classification (from the perspective of visual representation). It uses Venn diagrams, that are also easy to draw by using Grapholite:


Training presentations often contain circulating flows (information, financial, substance). It is generally accepted to use various kinds of arrows to display them. Rectangles, ovals or other shapes are traditionally used to show process agents/participants. Adding labels and additional design elements we get a picture like the following. Grapholite is a right tool to create this kind of diagrams too:


It is actually a cycle diagram, which, as the name implies is used to display closed cycles. In order to create them in Grapholite you can use a number of tunable stencils. But don't limit yourself to these templates... Add color and imagination to get a meaningful illusration, like the one in our article about creating vector graphics. The set of arrows provided by Grapholite covers a wide range of needs, but it is not infinite. It doesn't contain highly specialized ones, like those which are used to indicate the cavalry on the battle plans in history lessons — they have only one half of the "tip". However, it is not a big problem: you can hide unnecessary parts of available arrows under any suitable shape filled with background color. For greater aesthetics, you can do other tricks, like making a copy of an arrow and shifting it slightly to get a variable width "tail". Thinking this way would help you to make advanced non-standard effects for your presentations. So, to draw plans of historical battles, as well as a lot of other stuff, one need not even resort to custom vector graphics. And you can get something like the following:


So, as you can see, Grapholite is a useful tool to create visual aids and presentations in various areas. But only you can find out how this software product is suitable to your needs. Download the application and try it yourself for free!

July 29, 2017

An infographic about Grapholite (created using Grapholite)

Creation of advanced inforgraphics is not the main use case Grapholite has been designed for, but still it's possible to create some sorts of infographics by using the application. This is facilitated by the presence of various shapes and arrows that can be used to show relationships and dependencies between information units. You can organize data in different ways, build hierarchies, use cycle diagrams and chevron arrows in your presentation. To complement the design, you can use Grapholite as a vector graphics editor.

It should be noted that the infographics created by using Grapholite is scalable to any size without loss of quality due to the fact that it's originally the vector graphics.

An example infographic created using Grapholite


Here is an example infographic that was created using Grapholite. The infographic describes Grapholite application opportunities: what operating systems does it run on, what diagram types does it support out of the box. There are also some features highlighted that distinguish the program from others. For greater clarity there were some diagrams from Grapholite's library "embedded" into the presentation, namely: sample flowchart, swimlanes, home and office floor plans.

You can click on image to enlarge

July 1, 2017

Architecture and business processes description with diagrams

The current state of engineering science allows us to say, that any enterprise (organization, team, etc) is a system in one form or another. Such system may include staff and equipment, and it is a physical, personnel, organizational, managerial, logistical (etc) system at the same time. And all those things we need some way to describe.

On the one hand such systems contain technical stuff, which we know how to describe perfectly graphically (using UML, for instance), on the other — it is desirable to describe an enterprise entirely in a similar manner. And this is the subject of the article. And of course we will show you that Grapholite is Hercules in the word of graphical representation due to the variety of opportunities, and anyone can easily use this power, since the price is affordable.

What should be described?


When you are going to make a multidimensional description of enterprise (organisation, team), you should describe its structure. And the structure of enterprise can be considered as a kind of architecture.
Following ISO/IEC/IEEE 42010:2011: Architecture is fundamental concepts or properties of a system in its environment embodied in its elements, relationships, and in the principles of its design and evolution.

How to describe the architecture?


There are various ways to make the arcitecture description: starting by using a plain text and ending with graphical representations (diagrams). The choice is limited to wishes and capabilities of the customer as a reader of these architecture representations. In the end, it should be clear to him and his staff.

The description may be multifaceted, any system can be represented from different points of view: interactional, financial, material flows, etc. According to the practice of systems analysis, we may describe it in one or multiple paradigms:
  • Enterprise as a database. It's the basis to build any corporate information system (ERP, CRM, warehouse system, etc).
  • Enterprise as relationships and relative ranks of its parts and positions (jobs).
  • Enterprise as business processes, transforming raw materials/resources/information into a final product. 

Grapholite takes in account all these paradigms and provides specific shape sets to draw:
  • abstract data model: using ER model (entity-relationship) that defines a data or information structure that can be implemented in a database;
  • database schema: using UML class diagram to show the structure and relationships between tables, views and other database entities;
  • organization structure: using organizational chart to show hierarchical structure of enterprise and its parts: departments, job positions, etc;
  • business processes: they are the most important part in the architecture description. There are several ways to represent business processes in Grapholite — by using basic flow charts, cross-functional flowcharts, event-driven process diagrams (EPC), UML or BPMN.
Let's focus in more detail on business processes mapping as the most important item.

Diagrams and notations to describe business processes


Flow charts came to the world of business from computer science. This kind of charts is well known and intuitively obvious. However, it is quite primitive and not adapted to business processes mapping. For example, the division by functional roles does not fit into the basic flowcharts. And we resort to cross-functional flowcharts.

Cross-functional flowcharts (also known as swimlanes) take into account participants responsibilities for a certain part of the process. It's very convinient! Grapholite copes with this task perfectly by drawing beautiful swimlanes as easily as basic flow charts.

IDEF0 and IDEF3 are fairly well-known methodologies. In addition to diagramming technique it contains rules how to ask questions, how to implement modeling context and so on. One of the major cons is inability to elegantly simulate the situation of timeout, when the process is either waiting for the actions of one of the participants, or continues after a regulated delay. So, the methodology is considered a bit outdated and Grapholite does'n support it as a separate set of items and frames to design standardized sheets. But it's still possible to compose IDEF diagrams using basic blocks and arrows.

ARIS eEPC (extended event driven process chain) is a powerful methodology. It is well equipped and technologically advanced and despite the fact that it is already old, the application of this technology is still sometimes found. Grapholite supports EPC diagrams out of the box.

UML was used before and is used now to describe business processes, especially since UML 2.0 came. But even now it's the choice of connoisseurs. It's mainly an IT's thing that is not easy to apply to desribe the execution and management of activities, a role model and facts that really happen in the enterprise. In any case, Grapholite supports UML diagrams the best way.

BPMN is now the most appropriate solution to describe business processes. It's a methodology and a notation entended to model buisness processes and a good alternative to competing private decisions. It's an open, public standard. It is aimed at business partners, process engineers and application developers. Grapholite supports both BPMN 1.2 and 2.0.

It should be noted that Grapholite is not a modeling tool: it neither simulates processes, nor validates diagrams. But it allows you to describe graphically every aspect of business architecture using standard and well known charts from many metodologies, expanding it with other useful built-in features. And, at the same time, it keeps simplicity. You can try it yourself to make sure!

April 4, 2017

Grapholite 3.0.0 is out

We are very pleased to announce the third major release of Grapholite software product!

A number of important features were added to make Grapholite more powerful diagram editor, a lot of improvements done to make it more convenient, faster and useful.

Grapholite is available in four editions, as before:
  • Windows 10 Desktop edition: traditional desktop application for PC
  • Windows 10 Store Application: user interface is touch- & pen- friendly and suitable for both — Tablet and Desktop PC
  • iOS Application
  • Android Application
A lists of new features and improvements is grouped by product edition in the following table:

Grapholite Edition→
New Feature↓
Windows Desktop Windows Store App
(Desktop & Tablet)
iOS (iPad) Android
Formatted text in any diagram element - + - -
Vector-based PDF export + + +
High resolution jpeg and png export (up to 30000x30000 pixels) + + +
Interactive page resizing + + + +
Convert to editable splines command. Users are now able to convert almost any built-in diagram element to editable splines. Splines can be edited using spline Boolean Operations and Shape Editor tool to create custom user-defined diagram elements. + + + +
Splines can be edited using Shape Editor Tool + + + +
Splines can be edited using Spline Boolean Operations - + - -
Updated Print Dialog now allows to select page range instead of printing the whole document + + - -
SVG import improvements + + + +
Drag & drop in the layers panel - + - -
Page margins displaying - + + +
Bug fixes and performance improvements + + + +

Download Grapholite and try new features for free!

Enjoy it and leave your comments, questions or suggesions. Your feedback is welcome!

March 23, 2017

Flowchart creation — Demo video

As we noted previously, one of the most practical ways to illustrate some cyclic process is to create a flowchart. Also, usually it's the quickest way. We have tested the speed of making a simple flowchart in Grapholite by untrained user. The entire process of diagram creation was recorded as a screencast and it took less than 9 minutes. It's a good result for the user without experience. Moreover, he spend a bit of time looking at the original chart from time to time and attempting to make the diagram nice by changing default colors and positions of elements on the canvas. Also, a lot of performed operations (as seen in the video below) were non-optimal and even redundant  it's possible to do the same stuff more efficiently, e.g. using bulk selection, etc.

So, we speeded up a procedure of entering text captions and reduced some pauses. It resulted as a 4 minutes video, which is yet so slow that you can carefully trace each singe step. Even after we added a sound track into this video, it is still boring long. That means: being more experienced in using the application you could be more productive! But four minutes is already excellent.

We have gone further in speeding up the video and got the final result  1.5 minutes long. It's too fast to achieve in real life, but it's good enough to make the following fun demo!

Note: This video it is best viewed in full screen mode.


This version is a bit fast to catch all the nuances. In oder to get detailed "true" demonstration of Grapholite on the example of this diagram, you can watch the 4-minutes version.

And don't limit yourself to just watching the demo, download Grapholite and try it for free!