History: PluginDiagram

• «
• »

            ! What is PluginDiagram ?

__PluginDiagram__ is a new feature of ((Tiki19)).

This feature allows you to create and manipulate different types of diagrams such as UML, BPMN General, Flowcharts, draw network architectures or make diagrams to represent statistical or marketing data.

The PluginDiagram is based on mxGraph ([https://github.com/jgraph/mxgraph|MXGraph]), an open source diagram library developed in JavaScript, launched in 2005, which works on most browsers and touch devices.

The power of this tool is such that it is very suitable for small projects as well as complex and large-scale projects.

!! Notice
!!! ''Until 19.2 or 19.3 is released''
Please note that the feature is still being refined in 19.x so you perhaps should run Tiki from SVN or the ((dev:Daily Build)) to get the latest fixes. For example:
* [https://sourceforge.net/p/tikiwiki/code/HEAD/log/?path=/branches/19.x/lib/jquery_tiki/tiki-mxgraph.js|Tiki MXGraph]
* [https://sourceforge.net/p/tikiwiki/code/HEAD/log/?path=/branches/19.x/tiki-editdiagram.php|Tiki Edit Diagram]
* [https://sourceforge.net/p/tikiwiki/code/HEAD/log/?path=/branches/19.x/lib/wiki-plugins/wikiplugin_diagram.php|Wiki Plugin Diagram]
* [https://sourceforge.net/p/tikiwiki/code/HEAD/log/?path=/branches/19.x/templates/wiki-plugins/wikiplugin_diagram.tpl|Wiki Plugin Diagram in TPL]


!! ''Parameter''
{pluginmanager plugin="diagram"}

!! Getting started with __PluginDiagram__

!!! ''Installation of mxGraph''

As a first step before starting the installation and use of PluginDiagram, make sure to install __mxGraph__ (''if this has not already been done''), navigate to the __Admin control__ panel in the __Packages__ menu as shown in the capture below.

''Screenshot 1: Showing the tiki menu''
{img type="fileId" fileId="1508" class=img-responsive}

''Screenshot 2: Select the "control panel" option''
{img type="fileId" fileId="1509" class=img-responsive}

''Screenshot 3: Selecting the "Package" option''
{img type="fileId" fileId="1510" class=img-responsive}

By default tiki does not install mxgraph so it is normal not to find it in the list of packages that will be displayed. So follow the arrow on the image below and go to the "Install Other Packages" tab

''Screenshot 4: Selection of the "Install a package" tab''
{img type="fileId" fileId="1511" class=img-responsive}

You will have a list of packages ready to be installed, you will also find mxGraph... Click on''' Install''''. 

''Screenshot 5: Click on install button''
{img type="fileId" fileId="1512" class=img-responsive}

__''For more information on how to install a package in tiki, please consult this ((Packages|#Install_Other_Packages|documentation))''__

Once the installation of the Package is complete, you will get a message that looks like the following capture.

''Screenshot 6: Message after installation of mxGraph''
{img type="fileId" fileId="1513" class=img-responsive}

If you return to the first tab of the Packages menu, you will notice that mxGraph has been successfully installed as shown in capture below

''Screenshot 7: Notice that mxGraph is installed''
{img type="fileId" fileId="1514" class=img-responsive}

!!! ''Enable PluginDIagram''

As mxGraph is installed, the second step is to activate the PluginDiagram to be able to use it.
Navigate to the Edit menu and Plugin, then to the second tab (Plugins) as indicated in the next two captures.

''Screenshot 8: Showing "Edit and Plugin" menu''
{img type="fileId" fileId="1515" class=img-responsive} 

''Screenshot 9: Select "Plugins" tab''
{img type="fileId" fileId="1516" class=img-responsive}

Or you can simply attach this link fragment ''' /tiki-admin.php?page=textarea&cookietab=2 ''' after the name of your installation folder or your domain name.

Once in the right place, look for the Diagrams plugin and activate it. You can use your browser's search tool to find it faster. The following capture illustrates the action to be performed. 

''Screenshot 10: Activate "Diagrams" plugin''
{img type="fileId" fileId="1517" class=img-responsive}

__''For more information on how to enable a plugin in tiki, please consult this ((Packages|#Install_Other_Packages|documentation))''__

!!! ''How to use tiki __PluginDiagram__''

In your file gallery upload your xml file containing the graph model.
You can test using this file : https://doc.tiki.org/dl1452
Or files from : https://github.com/jgraph/mxgraph/tree/master/javascript/examples/editors/diagrams

Go to the Admin Control Panel, Editing and Plugins (tiki-admin.php?page=textarea&cookietab=2).
Enable the Diagram plugin and set it on a Wiki page.

''If the file Id of the model you've just uploaded is 43 this is how it should look''

{CODE()}{diagram fileId="43"}{CODE}

This is how the page should look:
{img type="fileId" fileId="1519"}

You can edit the model using the GraphEditor integrated into Tiki by clicking on the "Edit diagram" link that you will find below the wiki page where this diagram is located as shown on this capture below : 
{img type="fileId" fileId="1520" class=img-responsive}

And you will be redirected to the diagram editing page as shown on the capture below 

{img type="fileId" fileId="1521" class=img-responsive}

!!! ''Some examples''

In this example, you are shown two ways to proceed to create a diagram.
The first way is to start from scratch, i.e. design your diagram on the basis of no model.

!!!! Let's create a diagram in tiki from scratch
First, go to the tiki menu and create a wiki page, give it a name and then validate the creation.
The second thing, in the editing space of the wiki page, write this code: 
{CODE()}{diagram}{CODE}
Then save the changes, and to continue you will see the "Create a new diagram" button as shown in the image below:
{img type="fileId" fileId="1526" class=img-responsive}
Press this button and you will be redirected to the PluginDiagram which is in tiki and which will allow you to draw your diagram from scratch
{img type="fileId" fileId="1527" class="img-responsive"}

Draw your diagram, in the screenshot below we make a test drawing 
{img type="fileId" fileId="1528" class="img-responsive"}

After your changes, go to the "File" menu and click on the "Save" option and a small window will appear to indicate that your window will close automatically to return to your wiki page as shown in the image below
{img type="fileId" fileId="1529" class="img-responsive"}

There you go, you've just created your diagram from scratch.

Let's now move on to the creation of a diagram based on a pre-existing model:

!!!! Let create a "Mind Map" diagram in tiki with PluginDiagram
As a first example, we will create a mind map using the example at https://about.draw.io/features/examples/
# We will go to https://about.draw.io/features/examples/ then scroll down the page and position yourself   at the level of the Mind Map example, then press the "Live Example" button as shown in the screenshot below.
{img type="fileId" fileId="1522" class=img-responsive}

then, make your changes as you wish and save your changes in xml format as shown in the two screenshots below :
{img type="fileId" fileId="1523" class="img-responsive"}

Once the xml file is exported, go to your tiki instance, in the "File Galleries" menu then to "Upload file" and upload the xml file you just exported to draw.io
Once the upload is finished, retrieve the id of the file you just uploaded and note it somewhere as shown in the image below :
{img type="fileId" fileId="1524" class="img-responsive"}

Go to the tiki menu, create a wiki page and put the code : 
{CODE()}{diagram fileId=" "}{CODE} and at the fileId level put the ID you have previously copied.

{img type="fileId" fileId="1525" class="img-responsive"}

Then press save and you will have the diagram on your wiki page and at the bottom of this page you will have the option "Modify diagram" which will redirect you to draw.io to be able to make your changes.

!! Related links
* https://sourceforge.net/p/tikiwiki/code/67310
* https://tiki.org/forumthread68338-Integrating-Draw-io-in-Tiki-19-0-to-add-Diagrams-Flow-Charts-Mind-Maps-Floor-Plans-Mockups-etc