Loading...
 
Skip to main content
8
Page actions
PDF Print Get a short URL Open in WebDAV

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:

  1. either by referring to the identifier of the xml file saved in the file gallery, or
  2. 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 diagrams
Introduced 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:

Copy to clipboard
{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:
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
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
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.

Copy to clipboard
{diagram fileId=" "}

You can also put the xml code of the diagram directly into the body of the Diagram plugin as shown below:

Copy to clipboard
{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.

Copy to clipboard
{diagram fileId="129"}

This code will produce
Venn Diagram in Wiki Page
Venn Diagram in Wiki Page

Use directly the xml code of the diagram

Copy to clipboard
{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
Venn in Wiki Page

Use directly the xml code example

Copy to clipboard
{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="&lt;font style=&quot;font-size: 30px&quot;&gt;Whales&lt;/font&gt;" 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="&lt;span style=&quot;font-size: 30px&quot;&gt;Fish&lt;/span&gt;" 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="&lt;div style=&quot;text-align: right&quot;&gt;&lt;b style=&quot;font-size: 15px&quot;&gt;give birth to&amp;nbsp;&lt;/b&gt;&lt;/div&gt;&lt;div style=&quot;text-align: right&quot;&gt;&lt;b style=&quot;font-size: 15px&quot;&gt;live young&lt;/b&gt;&lt;/div&gt;" 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="&lt;div style=&quot;text-align: right&quot;&gt;&lt;span style=&quot;font-size: 15px&quot;&gt;&lt;b&gt;breathe&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: right&quot;&gt;&lt;span style=&quot;font-size: 15px&quot;&gt;&lt;b&gt;above water&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;" 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="&lt;div style=&quot;text-align: right&quot;&gt;&lt;span style=&quot;font-size: 15px&quot;&gt;&lt;b&gt;live in&amp;nbsp;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: right&quot;&gt;&lt;span style=&quot;font-size: 15px&quot;&gt;&lt;b&gt;the ocean&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;" 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="&lt;div style=&quot;text-align: right&quot;&gt;&lt;span style=&quot;font-size: 15px&quot;&gt;&lt;b&gt;lay&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: right&quot;&gt;&lt;span style=&quot;font-size: 15px&quot;&gt;&lt;b&gt;eggs&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;" 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="&lt;div style=&quot;text-align: right&quot;&gt;&lt;span style=&quot;font-size: 15px&quot;&gt;&lt;b&gt;breathe&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;text-align: right&quot;&gt;&lt;span style=&quot;font-size: 15px&quot;&gt;&lt;b&gt;underwater&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;" 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
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:

Copy to clipboard
{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:
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:

Copy to clipboard
{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="&lt;font color=&quot;#a59705&quot; style=&quot;font-size: 17px&quot;&gt;&lt;b&gt;Toolbar&lt;/b&gt;&lt;/font&gt;" 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="&lt;font color=&quot;#a59705&quot; style=&quot;font-size: 17px&quot;&gt;Menu&lt;/font&gt;" 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="&lt;font style=&quot;font-size: 17px&quot; color=&quot;#a59705&quot;&gt;&lt;b&gt;Shapes&lt;/b&gt;&lt;/font&gt;" 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.

Aliases

Plugin Diagram

History Source
Slideshow