History: PluginDiagram
Source of version: 85 (current)
Copy to clipboard
! ''__Plugin Diagram__''
This feature was introduced in ((Tiki19)) and allows you to draw, import or embed diagrams on Wiki pages. When you create a diagram, you will need to include it in a Wiki page if you want to display it within Tiki.
You can embed a diagram on a wiki page in two different ways:
# either by referring to the identifier of the xml file saved in the file gallery, or
# by directly using the xml code of your diagram in the body of the Plugin Diagram.
See below the different ways to embed a diagram on a Wiki page.
See ((Diagram)) for more information on creating and manipulating a diagram. Keep in mind that PluginDiagram has many more options that the former ((PluginDraw)) implemented in Tiki, which supersedes.
!! Notice
You should use at least latest 20.x or 21.x from Git/SVN or the ((dev:Daily Build)), to get all the latest fixes and enhancements
!! ''Parameter''
{pluginmanager plugin="diagram"}
!! Getting started with __PluginDiagram__
This feature required the installation of the [https://packagist.org/packages/tikiwiki/diagram|'tikiwiki/diagram'] package ('xorti/mxgraph-editor' in older versions) and the activation of the PluginDiagram. Please see ((Packages)) for more information if you don't know how to activate the Plugin.
First, go to the tiki menu and create a wiki page, give it a name and then validate the creation. See ((Using Wiki Pages)) and here ((Wiki)) for more information on wiki pages .
The second thing, in the editing space of the wiki page, write this code:
{CODE()}{diagram}{CODE}
When you add a PluginDiagram to a page without specifying its settings and save the changes, to continue after saving the page, you will see the "Create a new diagram" button as shown in the image below:
{img src="display1545" class="img-responsive" alt="Create a new diagram"}
''Creating the Venn Diagram page''
Press this button and you will be redirected to Tiki Diagram which is in which you can draw your diagram from scratch. See ((Diagram)) for more information on creating and manipulating diagrams.
After this step, add a diagram as in the image below where we show a Venn diagram.
''Venn Diagram ''
{img src="display1546" class="img-responsive" alt="Venn Diagram "}
Once the diagram has been saved, you will be redirected to the page you created previously on which you will see the diagram. You can still modify it by clicking on __Edit diagram__. In this case, the diagram is directly integrated into the Wiki page.
By proceeding in this way, this means that it will be directly integrated into the Wiki page. If you want to edit the page, you will see the diagram's xml code.
''Venn Diagram in Wiki Page ''
{img src="display1547" class="img-responsive" alt="Venn Diagram in Wiki Page"}
For a diagram saved in the file gallery as an xml file and identified by its __ID__, use this ID as the value of the __fileId__ parameter of the Diagram plugin.
In this case, you will see the diagram displayed on the Wiki page.
{CODE()}{diagram fileId=" "}{CODE}
You can also put the xml code of the diagram directly into the body of the Diagram plugin as shown below:
{CODE()}
{DIAGRAM()}
<mxGraphModel dx="832" dy="529" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
</root>
</mxGraphModel>
{DIAGRAM}
{CODE}
!!! Examples
!!!! Use the FileId of the diagram
When you finish creating a diagram, go to the file gallery, and take the __Id__ of the new created file.
Then create a Wiki page and add the Diagram plugin with the __Id__ in parameters.
The code above is the one of the Venn diagram, registered in the gallery with Id 129.
{CODE()}{diagram fileId="129"}{CODE}
This code will produce
''Venn Diagram in Wiki Page ''
{img src="display1548" class="img-responsive" alt="Venn Diagram in Wiki Page"}
!!!! Use directly the xml code of the diagram
{CODE()}
{DIAGRAM()}
<mxGraphModel dx="832" dy="-271" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="150" pageHeight="100" background="#ffffff" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="63e8fc19adbfdeb-4" value="" style="ellipse;whiteSpace=wrap;rotation=-20;fillColor=#1ba1e2;opacity=50;strokeColor=#006EAF;html=1;fontColor=#ffffff;" parent="1" vertex="1">
<mxGeometry x="116" y="914.5" width="388" height="157" as="geometry"/>
</mxCell>
<mxCell id="63e8fc19adbfdeb-5" value="A" style="text;spacingTop=-5;fontStyle=1;fontSize=14;html=1;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="295" y="987.4077060838736" width="30" height="20" as="geometry"/>
</mxCell>
<mxCell id="63e8fc19adbfdeb-6" value="B" style="text;spacingTop=-5;fontStyle=1;fontSize=14;html=1;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="620" y="993.060347970285" width="30" height="20" as="geometry"/>
</mxCell>
<mxCell id="63e8fc19adbfdeb-8" value="D" style="text;spacingTop=-5;fontStyle=1;fontSize=14;html=1;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="343.8799163537604" y="1135.1665799393195" width="30" height="20" as="geometry"/>
</mxCell>
<mxCell id="63e8fc19adbfdeb-10" value="B" style="text;spacingTop=-5;fontStyle=1;fontSize=14;html=1;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="512" y="1025.4077060838736" width="30" height="20" as="geometry"/>
</mxCell>
<mxCell id="63e8fc19adbfdeb-14" value="A" style="ellipse;whiteSpace=wrap;rotation=0;fillColor=#1ba1e2;opacity=50;strokeColor=#006EAF;html=1;fontSize=15;fontColor=#ffffff;fontStyle=1" parent="1" vertex="1">
<mxGeometry x="34.999999999999986" y="987.484724710808" width="38" height="38" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
{DIAGRAM}
{CODE}
The above code will produce
''Venn in Wiki Page ''
{img src="display1549" class="img-responsive" alt="Venn in Wiki Page"}
!!!! Use directly the xml code example
{CODE()}
{DIAGRAM()}
<mxGraphModel dx="979" dy="603" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="tC0NDuqFyo3yD21NZPqa-22" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=#000000;fillColor=#88D4DA;opacity=60;" parent="1" vertex="1">
<mxGeometry x="210" y="275" width="280" height="280" as="geometry"/>
</mxCell>
<mxCell id="tC0NDuqFyo3yD21NZPqa-23" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;strokeColor=#000000;fillColor=#7FC47F;opacity=60;" parent="1" vertex="1">
<mxGeometry x="400" y="280" width="280" height="280" as="geometry"/>
</mxCell>
<mxCell id="tC0NDuqFyo3yD21NZPqa-24" value="<font style="font-size: 30px">Whales</font>" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
<mxGeometry x="290" y="310" width="120" height="20" as="geometry"/>
</mxCell>
<mxCell id="tC0NDuqFyo3yD21NZPqa-27" value="<span style="font-size: 30px">Fish</span>" style="text;html=1;resizable=0;points=[];autosize=1;align=center;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
<mxGeometry x="505" y="310" width="70" height="20" as="geometry"/>
</mxCell>
<mxCell id="tC0NDuqFyo3yD21NZPqa-28" value="<div style="text-align: right"><b style="font-size: 15px">give birth to&nbsp;</b></div><div style="text-align: right"><b style="font-size: 15px">live young</b></div>" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
<mxGeometry x="260" y="400" width="110" height="30" as="geometry"/>
</mxCell>
<mxCell id="tC0NDuqFyo3yD21NZPqa-29" value="<div style="text-align: right"><span style="font-size: 15px"><b>breathe</b></span></div><div style="text-align: right"><span style="font-size: 15px"><b>above water</b></span></div>" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
<mxGeometry x="265" y="470" width="100" height="30" as="geometry"/>
</mxCell>
<mxCell id="tC0NDuqFyo3yD21NZPqa-30" value="<div style="text-align: right"><span style="font-size: 15px"><b>live in&nbsp;</b></span></div><div style="text-align: right"><span style="font-size: 15px"><b>the ocean</b></span></div>" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
<mxGeometry x="410" y="400" width="90" height="30" as="geometry"/>
</mxCell>
<mxCell id="tC0NDuqFyo3yD21NZPqa-31" value="<div style="text-align: right"><span style="font-size: 15px"><b>lay</b></span></div><div style="text-align: right"><span style="font-size: 15px"><b>eggs</b></span></div>" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
<mxGeometry x="560" y="400" width="50" height="30" as="geometry"/>
</mxCell>
<mxCell id="tC0NDuqFyo3yD21NZPqa-32" value="<div style="text-align: right"><span style="font-size: 15px"><b>breathe</b></span></div><div style="text-align: right"><span style="font-size: 15px"><b>underwater</b></span></div>" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
<mxGeometry x="535" y="470" width="100" height="30" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
{DIAGRAM}
{CODE}
The above code will produce
''Venn example in Wiki Page ''
{img src="display1550" class="img-responsive" alt="Venn example in Wiki Page"}
!! Draw on Screenshot
With PluginDiagram, you can very easily highlight the most important parts of your screenshots such as adding arrows, circles, highlighted areas, etc.
So, after downloading your Screenshot which will eventually be in the ((File Gallery)), take its __Id__ and use it as a value of the parameter -+annotate+- of the Plugin Diagram in a Wiki page. Here is the usage:
{CODE()}
{diagram annotate="1"}
{CODE}
Once the code has been added and the Wiki page saved, click on the __Create New Diagram__ button that will appear there, after being redirected to the Tiki Diagram interface, add the annotations (circles, texts, curves, etc.) on the screenshot and save your diagram.
For the screenshot used in our current example, we obtained this as a final result:
{img src="display1597" class="img-responsive" alt="Tiki Diagram Draw On Screenshot"}
At the end, we will be redirected to to the page where we started and a code will be automatically added to the PluginDiagram located there:
{CODE()}
{DIAGRAM(annotate=1)}
<mxGraphModel dx="1791" dy="606" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" background="#ffffff" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" value="" style="shape=image;imageAspect=0;aspect=fixed;verticalLabelPosition=bottom;verticalAlign=top;image=display175;imageBackground=none;movable=0;resizable=0;rotatable=0;deletable=0;editable=0;connectable=0;" parent="1" vertex="1">
<mxGeometry width="720" height="547" as="geometry"/>
</mxCell>
<mxCell id="QcbP1NpieLpURSSM9S9p-2" value="" style="endArrow=classic;html=1;strokeColor=#A59705;strokeWidth=3;endSize=5;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="457" y="17" as="sourcePoint"/>
<mxPoint x="302" y="17" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="QcbP1NpieLpURSSM9S9p-3" value="" style="endArrow=classic;html=1;strokeColor=#A59705;strokeWidth=3;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="630" y="110" as="sourcePoint"/>
<mxPoint x="690" y="50" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="QcbP1NpieLpURSSM9S9p-4" value="<font color="#a59705" style="font-size: 17px"><b>Toolbar</b></font>" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#A59705;strokeWidth=3;" vertex="1" parent="1">
<mxGeometry x="550" y="110" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="QcbP1NpieLpURSSM9S9p-5" value="<font color="#a59705" style="font-size: 17px">Menu</font>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontStyle=1" vertex="1" parent="1">
<mxGeometry x="472" y="7" width="40" height="20" as="geometry"/>
</mxCell>
<mxCell id="QcbP1NpieLpURSSM9S9p-6" value="" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=#A59705;strokeWidth=3;fillColor=none;" vertex="1" parent="1">
<mxGeometry x="-1" y="130" width="231" height="310" as="geometry"/>
</mxCell>
<mxCell id="QcbP1NpieLpURSSM9S9p-7" value="" style="endArrow=classic;html=1;strokeColor=#A59705;strokeWidth=3;" edge="1" parent="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="320" y="410" as="sourcePoint"/>
<mxPoint x="230" y="370" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="QcbP1NpieLpURSSM9S9p-8" value="<font style="font-size: 17px" color="#a59705"><b>Shapes</b></font>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="330" y="400" width="40" height="20" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
{DIAGRAM}
{CODE}
!! Import from Visio files (.vsd)
A common proprietary tool to draw diagrams is ''MS Visio''. The drawing tool (draw.io) which powers PluginDiagram is capable of importing __.vsd__ files, including those which handle several pages of diagrams inside. At the time of this writing{sign user="xavi" datetime="2020-03-05T10:51:28+00:00"} PluginDiagram was using the same version of the open source tool that powers [https://draw.io|draw.io] (v12.7.9).
However, PluginDiagram is unable yet to import .vsd files directly in Tiki for some reason. Therefore, in the meantime, if you need to reuse work done with ''MS Visio'' stored in .vsd files, you can import them in https://draw.io, and export as __.svg__, which will export all pages from that vsd file. And you can normally import that svg file within ((Tiki 21)). Keep in mind that you can display in a wiki page the diagram from a single sheet/page from that imported svg file.
!! Related pages
* ((Diagram))
* ((PluginDraw)) - former tool to draw or import svg files in wiki pages.
* ((Packages))
* ((Using Wiki Pages))
* ((Wiki))
!! Aliases
(alias(Plugin Diagram))