Introduction to Tiki Diagram

It is with great pleasure that we present Tiki Diagram, a feature that allows you to manipulate diagrams directly in Tiki. It is structured in such a way that it is easier and simpler for you to create and manipulate different types of diagrams.

What is Tiki Diagram ?

Tiki Diagram is a new feature of Tiki19 and much improved in Tiki20 that supersedes Draw. This feature integrates diagrams.net (formerly known as draw.io) into Tiki. It is an Open Source library developed in JavaScript that works on most browsers and touch devices. It does not depend on any third-party software and requires no plugins.

This feature give you a wide range of options to create and manipulate your own objects, from simple shapes to complex diagrams. Use the Diagram feature to create UML, Flowchart, BPMN General, Entity Relationship, Electricity, Graphical Mock-ups, Network architectures or others diagrams to represent statistical or marketing data.

Tiki Diagram Interface

Tiki Diagram has a large collection of editing tools: navigation bar, toolbar, shape search area, drawing area, possibility to add several editing pages during the session, etc.
With a simple mouse drag, add a new shape to the drawing area, customize your diagrams, export them or import new diagrams, apply the style you want to diagrams.

Tiki Diagram "Interface"

The diagram interface will adjust its options according to the elements you drop on the drawing area or add to it.
The interface is designed to allow you to reach your goal faster and without much effort, whether you are a beginner or an expert.

For example, you can decide to edit the XML code of an object added to the editing area to change it.
Whenever you wish, decide for yourself that the proportion of your diagrams, their height and width.

Advantages

Simple and user-friendly
Creating diagrams has never been easier! Discover for yourself how easy and simple it is to create diagrams from the simplest to the most complex. The tool responds and is adaptable to your needs.

There are many shapes
The tool includes many shapes to allow you to create diagrams according to your needs. Customize them by changing their size, shapes, colours and adding text, etc.

Multiple options available
There are many options when you have a diagram: save it, export it in different formats, embed it in an image, HTML or SVG, you can choose at the end of the creation process to print it.

Tiki Diagram "Advantages"
Tiki Diagram Advantages

Getting started

How to install mxGraph and enable PluginDiagram

As you have seen above, the PluginDiagram is based on mxGraph, it is very important to make sure that the package is actually installed before you start. First, make sure that the mxGraph package is properly installed, second, that the PluginDiagram is enabled. You can go to the packages Packages page if you don't have how to install a package or enable a plugin.
For more information on how to enable a plugin in tiki, please consult this documentation

How to use Tiki Diagram

Once the mxGraph package is installed and the PluginDiagram activated, you can create a diagram in different ways.
In your file gallery, upload your XML file containing the graphic template.
You can test using this file: dl1452
Or take an example of the files here: https://github.com/jgraph/mxgraph/tree/master/javascript/examples/editors/diagrams.

You can use the downloaded file directly in a Tiki page on which the graphical model (diagram) will appear and modify it later, which we will see later, or create your own diagram using Tiki Diagram or by clicking on the "Create diagram" button as shown in the image below.

Create diagram by clicking on "Create Diagram" button

Adding new Shape

It is an easy way to add a new shape to the editing area. Go into a shape group, hold the mouse over the shape of your choice and drag it to the desired position in the editing area. You can also simply click on the shape to add it to the drawing area.

You can also add a shape by directly importing a file containing the model (diagram) of your choice by going to the menu File > Import from > Device....

Add new shape

Selecting, Moving, cloning, connecting, deleting shapes

You can select a shape by clicking on it. If you want to select a group of shapes in the drawing area: press and hold the Shift key and click on each of the shapes to be selected. Ctrl+A allows you to select all diagrams or shapes at the same time.

Hold the mouse over a shape and move it to the requested position.
Ctrl+Click allows you to clone a shape, and Shift+Click allows you to create a relationship between two shapes.

Two or more shapes are connected by connectors, which can be directional or bidirectional. We will see later on how to change the format of a connector.
Select one or more shapes and hold down Ctrl, then drag the mouse to clone them all at the same as you click on them.
You can also delete a shape by selecting it and clicking on delete.
If by mistake you remove a shape from the drawing area, use Ctrl+Z to retrieve it.
When you right-click, you will be shown a list of shortcuts.

Connect shapes

Scaling and rotating

Very simply, click on the text or shape to be resized and by positioning the mouse over it, refer to the 8 blue points that appear, then drag one of these points to decrease or increase the size of the shape.
For rotation, once the text or shape has been selected, a black symbol appears at the top, position the cursor over the symbol and then drag the mouse cursor in the requested rotating sense.

Scaling and rotating shapes

Adding text, image, link

Adding text, image, link

Adding text inside the shapes or in the dession area is easy. Double-click on a shape, then type the text. You can then format the text by changing its font, for example.
To add the text in the dession area, double-click at the position where you want, the default text will appear, change it as you wish.
You can also easily add an image or a link to a shape or drawing area. To add a link to a shape, select it and type Alt+Shift+L.

Formating a shape, a text, a connector

Select the item for which you want to change the format, which can be a shape or text, on the right is a tool panel with three tabs.
The style tab allows you to change, for a shape, its filling color, the size of its edges, its opacity; to copy its style and to paste it to another element.
The text tab concerns texts, links inside or outside a shape and connectors: to change its font, size, choose a color and modify the positioning parameters.
The Arrange tab of the tool panel, allows you to change the size of a shape, its positioning, its rotation angle and copy its style to paste it to another shape.
You can also use the toolbar directly to format shapes.

Toolbar
Toolbar

Tool panel

Saving, exporting, importing, printing, embedding a diagram

After creating a diagram, several options are available to you, you can decide how to use it afterwards.
Here, we have created a simple UML diagram of a bank client use case.
This diagram is composed of an actor (bank client) and the different actions in relation to the bank (deposit funds, withdraw funds, etc.).
Among the numerous options available in the diagrams, you can import and export files in different formats.

You can import files such as SVG formats or PNG images, diagrams are imported in XML format.
Go to the menu File then to the option Import from... > Device....

The diagrams you choose to export can be saved in different formats: PNG, JPEG, SVG, XML, PDF, HTML. You can choose to convert them to URLs. Go to the File menu and click on Export as..., you will see the options for the different file formats.

Print a diagram with Ctrl+P or by easily going to the menu File > Print...

You can also embed it under an image, SVG or HTML by going to the menu File then to the option Embed to use it on a wiki page with the PluginDiagram.

Uml Use case

The shortcut Ctrl+S allows you to save a diagram, also go to the menu File to the option Save to save it.
When you choose to save a diagram by using the Ctrl+S, a small window will appear to indicate that your window will automatically close to return to the file gallery where a file in your diagram will be created.

This file will have a ID, this is the ID you will need using the PluginDiagram.
You can use the PluginDiagram to display your diagrams in the Wiki pages.

Redirect Windows

Examples

You can model any type of diagram using Tiki Diagram. Sometimes you need to represent the software architecture of your system. In these cases, you will need UML diagrams, for example, to specify, visualize the components of your system.
Below you have two UML diagrams, one process diagram and the other activity diagram.

Uml Process diagram

Uml Activity diagram

Uml Activity diagram

Instructions

If you want to add text in a shape, just click on it and add your text. Then to change the shape filling color, you can use the tool panel in the Style tab. You can then customize the text added to the shapes by changing its size and color.

Adding text and changing the filling color

If you want to add a connector between two shapes, place the cursor on the first one, then point one of the blue arrows to the second shape to create a connection between them.
To clone a shape, place the mouse on it, then click on one of the blue arrows.

Creating connector and cloning shape