Loading...
 
Skip to main content

History: Diagram

View published page

Source of version: 29 (current)

Copy to clipboard
            ! 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 [https://packagist.org/packages/tikiwiki/diagram|integrates] [https://diagrams.net|diagrams.net] (formerly known as draw.io) into Tiki. It is an [https://github.com/jgraph/drawio|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" ''
{img src="display1530" class="img-responsive" alt="Tiki Diagram"}

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

{DIV(class="row")}
{DIV(class="col-md-4")}
__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.
{DIV}
{DIV(class="col-md-4")}
__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.
{DIV}
{DIV(class="col-md-4")}
__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.
{DIV}
{DIV}

''Tiki Diagram "Advantages" ''
{img src="display1531" class="img-responsive" alt="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 ((Packages|#Install_Other_Packages|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 ''
{img src="display1532" class="img-responsive" alt="Create Diagram"}

!!! 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 ''
{img src="display1554" class="img-responsive" alt="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''
{img src="display1553" class="img-responsive" alt="Connect shapes"}

!!! Scaling and rotating
{DIV(class="row")}
{DIV(class="col-md-6")}
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.
{DIV}
{DIV(class="col-md-6")}
{img src="display1535" class="img-responsive" alt="Scaling and rotating shapes"}
''Scaling and rotating shapes''
{DIV}
{DIV}

!!! Adding text, image, link

{DIV(class="row")}
{DIV(class="col-md-6")}
{img src="display1536" class="img-responsive" alt="Adding text, image, link"}
''Adding text, image, link''

{DIV}
{DIV(class="col-md-6")}
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__.
{DIV}
{DIV}


!!! Formating a shape, a text, a connector

{DIV(class="row")}
{DIV(class="col-md-6")}
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.
{DIV}
{DIV(class="col-md-6")}

''Toolbar''
{img src="display1537" class="img-responsive" alt="Toolbar"}
{DIV}
{DIV}
{img src="display1538" class="img-responsive" alt="Tool panel"}
''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''
{img src="display1539" class="img-responsive" alt="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''
{img src="display1540" class="img-responsive" alt="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.

{DIV(class="row")}
{DIV(class="col-md-6")}
{img src="display1541" class="img-responsive" alt="Uml Process diagram"}
''Uml Process diagram''
{DIV}
{DIV(class="col-md-6")}
{img src="display1542" class="img-responsive" alt="Uml Activity diagram"}



''Uml Activity diagram''
{DIV}
{DIV}

!!!Instructions

{DIV(class="row")}
{DIV(class="col-md-6")}
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.


{img src="display1543" class="img-responsive" alt="Adding text and changing the filling color"}
''Adding text and changing the filling color''
{DIV}
{DIV(class="col-md-6")}
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.

{img src="display1544" class="img-responsive" alt="Creating connector and cloning shape"}
''Creating connector and cloning shape''
{DIV}
{DIV}

!! Related pages
* ((PluginDiagram))
* ((Draw))
* ((Packages))

!! Related links
* https://groups.google.com/forum/#!forum/drawio
* https://gitlab.com/tikiwiki/tikiwiki-diagram-builder
* https://gitlab.com/tikiwiki/diagram
* https://packagist.org/packages/tikiwiki/diagram

-=aliases=-
* (alias(Diagrams)) | (alias(Tiki Diagrams)) | (alias(Tiki Diagram))