History: Diagram
Source of version: 44 (current)
Copy to clipboard
^ Discussion [https://tiki.org/forumthread68338-Integrating-Draw-io-in-Tiki-19-0-to-add-Diagrams-Flow-Charts-Mind-Maps-Floor-Plans-Mockups|here]. This was added to ((Tiki19)) as [Diagram#PluginDiagram|PluginDiagram], and much improved in ((Tiki20)).^
!!- Introduction
Draw.io is a full-featured open source (Apache v2) tool from [https://www.jgraph.com/|JGraph Ltd] for creating multiple diagram types:
* ((BPMN)) Diagrams
* UML Diagrams
* Flow Charts
* Tree Diagrams. Ex.: ((OrgChart))
* Mind Maps
* Network Diagrams
* Wireframe Models
* Mock-ups
* Venn Diagrams
* Gantt Charts
* Rack Diagrams
* ((Sequence Diagram|Sequence Diagrams))
* ((tw:SWOT)) Diagrams
* Floor Plans
* Infographics
* Electrical Diagrams
Please see: https://about.draw.io/features/examples/
The project has a long history and became Open Source in 2016.
This project's issue tracker is on JGraph's GitHub project.
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/draw_io/widgets/project_factoids_stats?format=js'></script>{HTML}
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/mxgraph/widgets/project_factoids_stats?format=js'></script>{HTML}
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/drawio-desktop/widgets/project_factoids_stats?format=js'></script>{HTML}
!! Bugs & Wishes
!!! Open or Pending
{LIST()} {filter content="5" field="tracker_id"}
{filter field="tracker_status" content="o OR p"}
{filter categories="351"}
{sort mode="tracker_field_priority_ndesc"}
{OUTPUT(template="table")}
{tableparams allowtableexpansion="y" shownbitems="y"}
{column field="tracker_field_subject" label="Title" mode="raw"}
{column field="mod_date" label="LastModif" mode="raw"}
{column sort="tracker_field_resolution_status" field="tracker_field_resolution_status" label="Resolution Status" mode="raw"}
{column sort="tracker_field_submitted_by" field="tracker_field_submitted_by" label="Submitted By"}
{column field="tracker_field_assigned_to" label="Volunteered" mode="raw"}
{column label="Category" field="category" mode="raw"}
{column sort="tracker_field_version" field="tracker_field_version" label="Version" mode="raw"}
{column field="tracker_field_feature" label="Feature" mode="raw"}
{column sort="tracker_field_priority" field="tracker_field_priority" label="Priority" mode="raw"}
{tablesorter server="n" sortable="y"}
{OUTPUT}
{FORMAT(name="mod_date")}{display name="modification_date" format="date"}{FORMAT}
{FORMAT(name="tracker_field_resolution_status")}{display name="tracker_field_resolution_status" default="" format="trackerrender"}{FORMAT}
{FORMAT(name="tracker_field_submitted_by")}{display name="tracker_field_submitted_by" format="trackerrender"}{FORMAT}
{FORMAT(name="tracker_field_assigned_to")}{display name="tracker_field_assigned_to" format="trackerrender" default=""}{FORMAT}
{FORMAT(name="tracker_field_subject")}{display name="tracker_field_subject" format="objectlink"}{FORMAT}
{FORMAT(name="category")}{display name="tracker_field_category" format="trackerrender"}{FORMAT}
{FORMAT(name="tracker_field_version")}{display name="tracker_field_version" format="trackerrender"}{FORMAT}
{FORMAT(name="tracker_field_feature")}{display name="tracker_field_feature" format="trackerrender"}{FORMAT}
{FORMAT(name="tracker_field_priority")}{display name="tracker_field_priority" format="trackerrender" default="" }{FORMAT}
{LIST}
{button href="Make+a+wish" _text="Create Item" _icon_name="create" _type="link" _class="create_item_button"}
!! Implementation plan
{QUOTE(source_url="https://www.jgraph.com/")}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.{QUOTE}
So we will also build upon mxGraph
!!! Deployment
* Deployed via ((doc:Packages)) because of Apache ((tw:license))
* [https://packagist.org/?query=mxgraph|Needs to be added to Packagist] or we use https://asset-packagist.org/package/npm-asset/mxgraph
!!! PluginDiagram
2 modes for plugin:
{CODE(caption="Option 1: store in file galleries, which can manage version history")}{diagram fileID=622}
{CODE}
{CODE(caption="Option 2: store data in current wiki page")}
{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="<p style="margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;"><strong>Process 1<br /></strong></p><hr /><p style="margin: 0px; margin-left: 8px;">System Study</p><p style="margin: 0px; margin-left: 8px;">Preparation</p>" 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="<p style="margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;"><strong>Process 2<br /></strong></p><hr /><p style="margin: 0px; margin-left: 8px;">System Analysis</p>" 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="<p style="margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;"><strong><strong>Process</strong> 3<br /></strong></p><hr /><p style="margin: 0px; margin-left: 8px;">List Possible</p><p style="margin: 0px; margin-left: 8px;">System Solutions</p>" 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="<p style="margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;"><strong><strong>Process</strong> 4<br /></strong></p><hr /><p style="margin: 0px; margin-left: 8px;">Detail Chosen</p><p style="margin: 0px; margin-left: 8px;">Solution</p>" 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="<p style="margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;"><strong><strong>Process</strong> 5<br /></strong></p><hr /><p style="margin: 0px; margin-left: 8px;">New System</p><p style="margin: 0px; margin-left: 8px;">Design</p>" 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="<p style="margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;"><strong><strong>Process</strong> 6<br /></strong></p><hr /><p style="margin: 0px; margin-left: 8px;">New</p><p style="margin: 0px; margin-left: 8px;">System</p><p style="margin: 0px; margin-left: 8px;">Construction</p>" 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="<p style="margin: 0px; margin-top: 4px; text-align: center; text-decoration: underline;"><strong><strong>Process</strong> 7<br /></strong></p><hr /><p style="margin: 0px; margin-left: 8px;">New System</p><p style="margin: 0px; margin-left: 8px;">Startup and</p><p style="margin: 0px; margin-left: 8px;">Testing</p>" 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 
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 
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
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
cost/benefit
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
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
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
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
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
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
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
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 
Advantages 
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
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
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
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
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
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,
system
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
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
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
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}
{CODE}
!! 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 [https://support.draw.io/display/DOD/Using+draw.io+with+Google+Drive|Google Drive]
** https://github.com/igniterealtime/Pade/issues/73
* Export / Print: ((Converting dynamic JavaScript content into static assets))
!! Related links
* https://about.draw.io/how-to-make-infographics-in-draw-io/
* https://about.draw.io/use-draw-io-on-a-tablet/
* https://about.draw.io/organization-charts-and-mind-maps-in-draw-io/
* https://about.draw.io/what-makes-a-good-collaborative-diagramming-tool/
* https://about.draw.io/tag/bpmn-diagrams/
* https://about.draw.io/improving-business-processes-with-draw-io/
* Ideas for integration: https://about.draw.io/integrations/confluence-integration/
* https://github.com/jgraph
* https://github.com/jgraph/drawio-desktop
Alias names for this page:
(alias(Draw.io)) | (alias(mxGraph)) | (alias(Diagrams)) | (alias(PluginDiagram)) | (alias(Plugin Diagram))