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 Daily Build, to get all the latest fixes and enhancements
Parameter
Display diagrams.net/mxGraph/Draw.io diagramsIntroduced in Tiki 19.
Go to the source code
Preferences required: wikiplugin_diagram
| Parameters | Accepted Values | Description | Default | Since |
|---|---|---|---|---|
compressXml |
Parameter that will allow inline diagram data be saved compressed. | 21.0 | ||
wikiparse |
Parameter that will allow to parse wiki markup language inside the diagram if the value is "1" | 21.0 | ||
fileName |
text | The name used for the diagram file. Acceptable replacements are 'No value assigned' and 'No value assigned'. The default pattern is “Diagram No value assigned No value assigned.drawio”. | 23.0 | |
galleryId |
int | File Gallery id where the new diagram file will be stored. If this parameter is not present the content of the file will be placed in the body of the plugin. | 23.0 | |
align |
Alignment of the diagrams during PDF export. Accepted values: "left", "right" and "center" | left | 21.0 | |
annotate |
int | Id of the file in the file gallery. A image file to include in the diagram. | 20.0 | |
fileId |
int | Id of the file in the file gallery. A xml file containing the graph model. Leave empty for more options. | 19.0 | |
page |
text | Page of the diagram that should be displayed. | ||
template |
int | Diagram's file id to use as a template to new the diagram. This parameter will be skipped if the fileId parameter is present. | 23.0 |
Getting started with PluginDiagram
This feature required the installation of the '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:
{diagram}
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:
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
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
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.
{diagram fileId=" "}
You can also put the xml code of the diagram directly into the body of the Diagram plugin as shown below:
{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}
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.
{diagram fileId="129"}
This code will produce
Venn Diagram in Wiki Page
Use directly the xml code of the diagram
{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}
The above code will produce
Venn in Wiki Page
Use directly the xml code example
{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}
The above code will produce
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:
{diagram annotate="1"}
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:
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:
{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}
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 PluginDiagram was using the same version of the open source tool that powers 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