Diagram | Tiki Wiki CMS Groupware :: Development

Discussion here. This was added to Tiki19 as PluginDiagram, and much improved in Tiki20.

Introduction

Bugs & Wishes

Open or Pending

No results for query.

Implementation plan

mxGraph - An open source JavaScript diagramming component, started in 2005, that works on all major browsers, including touch devices.
draw.io - A web based diagramming application built on mxGraph, that integrates with Google Drive , OneDrive and Dropbox. draw.io is also a plugin for Atlassian's Confluence and JIRA.

Source: https://www.jgraph.com/

So we will also build upon mxGraph

Deployment

Deployed via Packages because of Apache license
Needs to be added to Packagist or we use https://asset-packagist.org/package/npm-asset/mxgraph

PluginDiagram

2 modes for plugin:

Option 1: store in file galleries, which can manage version history

Copy to clipboard

{diagram fileID=622}

Option 2: store data in current wiki page

Copy to clipboard

{DIAGRAM()}
<mxGraphModel dx="1042" dy="554" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="826" pageHeight="1169" background="#ffffff" math="0" shadow="0">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="&lt;p style=&quot;margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;&quot;&gt;&lt;strong&gt;Process 1&lt;br /&gt;&lt;/strong&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;System Study&lt;/p&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;Preparation&lt;/p&gt;" style="verticalAlign=middle;align=center;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;rounded=1;fontStyle=1;strokeWidth=3;fillColor=#E6FFCC" parent="1" vertex="1">
      <mxGeometry x="236" y="236" width="110" height="90" as="geometry"/>
    </mxCell>
    <mxCell id="3" value="Engineering" style="whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=1;strokeWidth=3;fillColor=#FFFFCC" parent="1" vertex="1">
      <mxGeometry x="246" y="126" width="90" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="4" value="Investors" style="whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=1;strokeWidth=3;fillColor=#FFFFCC" parent="1" vertex="1">
      <mxGeometry x="40" y="251" width="90" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="5" value="ON-DEMAND SYSTEM DEVELOPMENT" style="shape=process;whiteSpace=wrap;align=center;verticalAlign=middle;size=0.0475;fontStyle=1;strokeWidth=3;fillColor=#FFCCCC" parent="1" vertex="1">
      <mxGeometry x="200.99999999999991" y="391" width="400" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="6" value="&lt;p style=&quot;margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;&quot;&gt;&lt;strong&gt;Process 2&lt;br /&gt;&lt;/strong&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;System Analysis&lt;/p&gt;" style="verticalAlign=middle;align=center;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;rounded=1;fontStyle=1;strokeWidth=3;fillColor=#E6FFCC" parent="1" vertex="1">
      <mxGeometry x="390" y="146" width="110" height="90" as="geometry"/>
    </mxCell>
    <mxCell id="7" value="&lt;p style=&quot;margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;&quot;&gt;&lt;strong&gt;&lt;strong&gt;Process&lt;/strong&gt; 3&lt;br /&gt;&lt;/strong&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;List Possible&lt;/p&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;System Solutions&lt;/p&gt;" style="verticalAlign=middle;align=center;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;rounded=1;fontStyle=1;strokeWidth=3;fillColor=#E6FFCC" parent="1" vertex="1">
      <mxGeometry x="681" y="371" width="110" height="90" as="geometry"/>
    </mxCell>
    <mxCell id="8" value="&lt;p style=&quot;margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;&quot;&gt;&lt;strong&gt;&lt;strong&gt;Process&lt;/strong&gt; 4&lt;br /&gt;&lt;/strong&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;Detail Chosen&lt;/p&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;Solution&lt;/p&gt;" style="verticalAlign=middle;align=center;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;rounded=1;fontStyle=1;strokeWidth=3;fillColor=#E6FFCC" parent="1" vertex="1">
      <mxGeometry x="560" y="241" width="110" height="90" as="geometry"/>
    </mxCell>
    <mxCell id="9" value="&lt;p style=&quot;margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;&quot;&gt;&lt;strong&gt;&lt;strong&gt;Process&lt;/strong&gt; 5&lt;br /&gt;&lt;/strong&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;New System&lt;/p&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;Design&lt;/p&gt;" style="verticalAlign=middle;align=center;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;rounded=1;fontStyle=1;strokeWidth=3;fillColor=#E6FFCC" parent="1" vertex="1">
      <mxGeometry x="540" y="510" width="110" height="90" as="geometry"/>
    </mxCell>
    <mxCell id="10" value="&lt;p style=&quot;margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;&quot;&gt;&lt;strong&gt;&lt;strong&gt;Process&lt;/strong&gt; 6&lt;br /&gt;&lt;/strong&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;New&lt;/p&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;System&lt;/p&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;Construction&lt;/p&gt;" style="verticalAlign=middle;align=center;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;rounded=1;fontStyle=1;strokeWidth=3;fillColor=#E6FFCC" parent="1" vertex="1">
      <mxGeometry x="188.49999999999991" y="510" width="110" height="90" as="geometry"/>
    </mxCell>
    <mxCell id="12" value="Management" style="whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=1;strokeWidth=3;fillColor=#FFFFCC" parent="1" vertex="1">
      <mxGeometry x="691" y="60.00000000000002" width="90" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="13" value="Management" style="whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=1;strokeWidth=3;fillColor=#FFFFCC" parent="1" vertex="1">
      <mxGeometry x="353.50000000000006" y="650" width="90" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="14" value="Engineering" style="whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=1;strokeWidth=3;fillColor=#FFFFCC" parent="1" vertex="1">
      <mxGeometry x="34.99999999999997" y="524.9999999999999" width="90" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="15" value="Vendors" style="whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=1;strokeWidth=3;fillColor=#FFFFCC" parent="1" vertex="1">
      <mxGeometry x="549.9999999999999" y="650" width="90" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="36" value="" style="edgeStyle=none;noEdgeStyle=1;strokeColor=#990000;strokeWidth=2" parent="1" source="3" target="2" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="20" y="250" as="sourcePoint"/>
        <mxPoint x="120" y="150" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="37" value="" style="edgeStyle=none;noEdgeStyle=1;strokeColor=#990000;strokeWidth=2" parent="1" source="4" target="2" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="280" y="190" as="sourcePoint"/>
        <mxPoint x="380" y="90" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="11" value="&lt;p style=&quot;margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;&quot;&gt;&lt;strong&gt;&lt;strong&gt;Process&lt;/strong&gt; 7&lt;br /&gt;&lt;/strong&gt;&lt;/p&gt;&lt;hr /&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;New System&lt;/p&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;Startup and&lt;/p&gt;&lt;p style=&quot;margin: 0px; margin-left: 8px;&quot;&gt;Testing&lt;/p&gt;" style="verticalAlign=middle;align=center;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;rounded=1;fontStyle=1;strokeWidth=3;fillColor=#E6FFCC" parent="1" vertex="1">
      <mxGeometry x="343.49999999999994" y="510" width="110" height="90" as="geometry"/>
    </mxCell>
    <mxCell id="51" value="" style="endArrow=none;noEdgeStyle=1;strokeColor=#990000;strokeWidth=2" parent="1" source="9" target="11" edge="1">
      <mxGeometry relative="1" as="geometry">
        <mxPoint x="205.00819672131135" y="481" as="sourcePoint"/>
        <mxPoint x="400.32786885245895" y="650" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="52" value="Desired &#xa;functionality" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="165" y="251" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="53" value="Desired &#xa;functionality" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="241" y="196" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="54" value="Documentation&#xa;from similar projects" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="186" y="341" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="55" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="5" target="2" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="50" y="530" as="sourcePoint"/>
        <mxPoint x="150" y="430" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="260" y="370"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="56" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="2" target="5" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="50" y="500" as="sourcePoint"/>
        <mxPoint x="150" y="400" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="280" y="360"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="57" value="Elaborate&#xa;cost/benefit&#xa;ratio" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="306" y="341" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="58" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="5" target="6" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="380" y="370" as="sourcePoint"/>
        <mxPoint x="480" y="270" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="440" y="310"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="59" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="6" target="5" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="350" y="370" as="sourcePoint"/>
        <mxPoint x="450" y="270" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="460" y="320"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="60" value="Existing&#xa;documentation" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="380.0000000000001" y="280.99999999999983" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="61" value="Necessary&#xa;resources" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="481.0000000000002" y="251.00000000000006" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="62" value="Progress&#xa;reports" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="545.0000000000001" y="100.00000000000003" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="63" value="Progress&#xa;reports" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="640" y="146.0000000000001" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="64" value="Progress&#xa;reports" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="751.0000000000001" y="261.0000000000001" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="65" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="6" target="12" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="260" y="180.0000000000001" as="sourcePoint"/>
        <mxPoint x="360" y="80.00000000000011" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="445" y="140"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="66" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;entryX=0.25;entryY=1;strokeColor=#990000;strokeWidth=2" parent="1" source="8" target="12" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="530" y="250" as="sourcePoint"/>
        <mxPoint x="630" y="150" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="67" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="7" target="12" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="660.0000000000002" y="360" as="sourcePoint"/>
        <mxPoint x="760.0000000000002" y="260" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="68" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="8" target="5" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="570" y="380" as="sourcePoint"/>
        <mxPoint x="510" y="250" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="570" y="360"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="69" value="" style="edgeStyle=segmentEdgeStyle;strokeColor=#990000;strokeWidth=2" parent="1" source="5" target="8" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="340" y="360" as="sourcePoint"/>
        <mxPoint x="440" y="260" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="520" y="286"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="70" value="Existing&#xa;Models" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="530.0000000000002" y="340.9999999999999" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="71" value="Equipment&#xa;specification" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="615" y="341" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="72" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;strokeColor=#990000;strokeWidth=2" parent="1" source="5" target="7" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="500" y="500" as="sourcePoint"/>
        <mxPoint x="600" y="400" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="650" y="410"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="73" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;strokeColor=#990000;strokeWidth=2" parent="1" source="7" target="5" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="460" y="500" as="sourcePoint"/>
        <mxPoint x="560" y="400" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="650" y="430"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="74" value="Resources" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="621" y="390.99999999999994" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="75" value="System &#xa;Advantages &#xa;and Limitations" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="630" y="431.0000000000001" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="76" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="9" target="5" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="420" y="580" as="sourcePoint"/>
        <mxPoint x="520" y="480" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="570" y="470"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="77" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="5" target="9" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="400" y="590" as="sourcePoint"/>
        <mxPoint x="500" y="490" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="560" y="480"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="78" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="15" target="9" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="430" y="700" as="sourcePoint"/>
        <mxPoint x="530" y="600" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="79" value="Hardware and&#xa;Software specs" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="625" y="610" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="81" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;exitX=0;exitY=0.75;strokeColor=#990000;strokeWidth=2" parent="1" source="9" target="13" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="420" y="730" as="sourcePoint"/>
        <mxPoint x="520" y="630" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="470" y="630"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="82" value="Progress&#xa;Reports" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="481.0000000000004" y="610.0000000000001" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="83" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="11" target="13" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="200" y="660.0000000000002" as="sourcePoint"/>
        <mxPoint x="230.0000000000001" y="650" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="84" value="Progress&#xa;Reports" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="410.00000000000017" y="610.0000000000002" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="85" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="10" target="13" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="130.0000000000001" y="740" as="sourcePoint"/>
        <mxPoint x="230.0000000000001" y="640" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="244" y="630"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="86" value="Progress&#xa;Reports" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="255.99999999999994" y="650.0000000000001" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="87" value="" style="edgeStyle=elbowEdgeStyle;elbow=vertical;strokeColor=#990000;strokeWidth=2" parent="1" source="10" target="14" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="70" y="740" as="sourcePoint"/>
        <mxPoint x="170" y="640" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="88" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="5" target="11" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="50" y="500" as="sourcePoint"/>
        <mxPoint x="150" y="400" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="390" y="470"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="89" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="11" target="5" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="59.999999999999886" y="510" as="sourcePoint"/>
        <mxPoint x="159.9999999999999" y="410" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="410" y="470"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="90" value="Version&#xa;specs" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="261" y="461" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="91" value="Certificates,&#xa;system&#xa;libraries" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="180" y="461.0000000000002" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="92" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="5" target="10" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="30.000000000000114" y="500" as="sourcePoint"/>
        <mxPoint x="130.0000000000001" y="400" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="250" y="470"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="93" value="" style="edgeStyle=elbowEdgeStyle;elbow=horizontal;strokeColor=#990000;strokeWidth=2" parent="1" source="10" target="5" edge="1">
      <mxGeometry width="100" height="100" relative="1" as="geometry">
        <mxPoint x="40" y="510" as="sourcePoint"/>
        <mxPoint x="140" y="410" as="targetPoint"/>
        <Array as="points">
          <mxPoint x="230" y="470"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="94" value="System&#xa;specs" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="139.99999999999994" y="565.0000000000001" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="95" value="Design&#xa;specs" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="423.49999999999994" y="461.0000000000002" width="30" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="96" value="System&#xa;version" style="text;spacingTop=-5;align=center" parent="1" vertex="1">
      <mxGeometry x="350.9999999999998" y="461" width="30" height="20" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>
{DIAGRAM}

To do soon

Diagrams on existing images. Text and arrows mostly

Keep in mind for the future

Adding hyperlinks to Tiki objects (wiki pages, trackers items, etc.) or external URL
- Add a visual indication of a hyperlink
- Backlinks: so the hyperlinked object can indicate it is part of a drawing
Realtime collaboration like with Google Drive
- https://github.com/igniterealtime/Pade/issues/73
Export / Print: Converting dynamic JavaScript content into static assets

Related links

Alias names for this page:
Draw.io | mxGraph | Diagrams | PluginDiagram | Plugin Diagram