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.

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

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()}

  
    
    
  

{DIAGRAM}

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()}

  
    
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
  

{DIAGRAM}

The above code will produce
Venn in Wiki Page

Use directly the xml code example

{DIAGRAM()}

  
    
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
  

{DIAGRAM}

The above code will produce
Venn example in Wiki Page

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)}

  
    
    
    
      
    
    
      
        
        
      
    
    
      
        
        
      
    
    
      
    
    
      
    
    
      
    
    
      
        
        
      
    
    
      
    
  

{DIAGRAM}

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.

• Diagram
• PluginDraw - former tool to draw or import svg files in wiki pages.
• Packages
• Using Wiki Pages
• Wiki

Plugin Diagram