Loading...
 
(Cached)

Plugin Diagram

This feature introduced in Tiki19 allows you to embed diagrams on Wiki pages. Because when you create a diagram, you will need to include it in a Wiki page.
You can embed a diagram on a wiki page in 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.
Here you will see the different ways to embed a diagram on a Wiki page.
See Diagram for more information on creating and manipulating a diagram.

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 Daily Build to get the latest fixes. For example:


Parameter

Introduced in Tiki 19.
Preferences required: wikiplugin_diagram
Parameters Accepted Values Description Default Since
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.


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:
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.

{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 Id 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
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
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="&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:

{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:

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


Aliases

Plugin Diagram

doc.tiki.org

Bootstrap AdminGuide UserGuide

Keywords

Keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting
Articles and Submissions
Backlinks
Banners
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution
Cookie
Copyright
Credit
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
Draw
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Mail-in
Map with Mapserver
Menu
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags
Task
Tell a Friend, alert + Social Bookmarking
TikiTests
Theme CSS & Smarty
Trackers
Transitions
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebDAV
Webmail
Web Services
Wiki History, page rename, etc
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG
XMLRPC

Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki
Show PHP error messages