LoopDraw Help
Content
Important notes
- When you drop properties to the Model sometimes does not put it inside the model, to walk arround from this drop the property any where and then drag and drop it inside the the model and it should work now
- When you link a relation make sure that the propertie/relation highlight to make a proper connection if the conection is made to the entire model the json generated wont work
<mxGraphModel dx="976" dy="862" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" background="#ffffff"> <root> <mxCell id="0"/> <mxCell id="-1" parent="0"/> <mxCell id="1" value="<div><b>ModelName</b></div><div><i>&lt;PersistedModel&gt;</i></div>" style="swimlane;fontStyle=0;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=36;horizontalStack=0;collapsible=1;marginBottom=16;swimlaneFillColor=#ffffff;html=1;rounded=1;shadow=1;marginTop=6;strokeColor=#000000;" parent="-1" vertex="1"> <mxGeometry x="30" y="26" width="210" height="148" as="geometry"/> </mxCell> <mxCell id="0.0.3" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;" parent="1" vertex="1"> <mxGeometry y="42" width="210" height="1" as="geometry"/> </mxCell> <mxCell id="0.0.0" value="* field:<b>type</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="1" vertex="1"> <mxGeometry y="50" width="210" height="30" as="geometry"/> </mxCell> <mxCell id="0.0.1" value="fk_name(FK)@<b>relation_name</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="1" vertex="1"> <mxGeometry y="80" width="210" height="26" as="geometry"/> </mxCell> <mxCell id="0.0.2" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;" parent="1" vertex="1"> <mxGeometry y="106" width="210" height="1" as="geometry"/> </mxCell> <mxCell id="973.6587552356846" value="<p>relation_name@<b>model_name</b></p>" style="strokeColor=none;portConstraint=eastwest;rounded=1;html=1;" parent="1" vertex="1"> <mxGeometry y="114" width="210" height="34" as="geometry"/> </mxCell> </root> </mxGraphModel>
Notes of format
Model
- Model Name and extended model should be separated by enter
- Extended model should be between "<...>"
- If required field should have an *
- Field and type should be separated by :
- Foreng key should have (FK) after the name
- Relations should be separated by @
- For visual help is advice to separate relations and properties
- There is no need of styling bold or itallics for the model definition
<mxGraphModel dx="1426" dy="862" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" background="#ffffff"> <root> <mxCell id="0"/> <mxCell id="-1" parent="0"/> <mxCell id="1" value="<div><b>ModelName</b></div><div><i>&lt;PersistedModel&gt;</i></div>" style="swimlane;fontStyle=0;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=36;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;swimlaneFillColor=#ffffff;html=1;rounded=1;shadow=1;marginTop=6;" parent="-1" vertex="1"> <mxGeometry x="30" y="41" width="240" height="130" as="geometry"/> </mxCell> <mxCell id="0.0.0" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;" parent="1" vertex="1"> <mxGeometry y="42" width="240" height="8" as="geometry"/> </mxCell> <mxCell id="0.0.1" value="modelnamechilds@<b>modelnamechilds</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="1" vertex="1"> <mxGeometry y="50" width="240" height="20" as="geometry"/> </mxCell> <mxCell id="1.0" value="fk_name1(FK)@<b>modelnamechild2</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="1" vertex="1"> <mxGeometry y="70" width="240" height="20" as="geometry"/> </mxCell> <mxCell id="21" value="rel_hbtm_c@<b>modelnamechild3</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="1" vertex="1"> <mxGeometry y="90" width="240" height="20" as="geometry"/> </mxCell> <mxCell id="3" value="rel_htm_2@<b>modelnamechild4</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="1" vertex="1"> <mxGeometry y="110" width="240" height="20" as="geometry"/> </mxCell> <mxCell id="2" value="<div><b>ModelNameChild</b></div><div><i>&lt;PersistedModel&gt;</i></div>" style="swimlane;fontStyle=0;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=38;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;swimlaneFillColor=#ffffff;html=1;rounded=1;shadow=1;marginTop=6;" parent="-1" vertex="1"> <mxGeometry x="440" y="45" width="210" height="126" as="geometry"/> </mxCell> <mxCell id="0.1.2" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;" parent="2" vertex="1"> <mxGeometry y="44" width="210" height="1" as="geometry"/> </mxCell> <mxCell id="0.1.0" value="modelnameId@<b>modelname</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="2" vertex="1"> <mxGeometry y="45" width="210" height="20" as="geometry"/> </mxCell> <mxCell id="4" value="modelnameId@<b>modelname2</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="2" vertex="1"> <mxGeometry y="65" width="210" height="20" as="geometry"/> </mxCell> <mxCell id="0.1.1" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;" parent="2" vertex="1"> <mxGeometry y="85" width="210" height="1" as="geometry"/> </mxCell> <mxCell id="5" value="rel_hbtm_name@<b>modelname3</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="2" vertex="1"> <mxGeometry y="86" width="210" height="20" as="geometry"/> </mxCell> <mxCell id="6" value="rel_hmt_1@<b>modelname4</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="2" vertex="1"> <mxGeometry y="106" width="210" height="20" as="geometry"/> </mxCell> <mxCell id="32" value="hasOne" style="endArrow=open;html=1;endSize=12;startArrow=diamondThin;startSize=14;startFill=0;edgeStyle=orthogonalEdgeStyle;" parent="-1" edge="1" target="0.0.1" source="0.1.0"> <mxGeometry relative="1" as="geometry"> <mxPoint x="300" y="250" as="sourcePoint"/> <mxPoint x="295.28571428571433" y="218" as="targetPoint"/> <Array as="points"/> </mxGeometry> </mxCell> <mxCell id="7" value="<div><b>ModelNameThrough</b></div><div><i>&lt;PersistedModel&gt;</i></div>" style="swimlane;fontStyle=0;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=38;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;swimlaneFillColor=#ffffff;html=1;rounded=1;shadow=1;marginTop=6;" parent="-1" vertex="1"> <mxGeometry x="200" y="276" width="230" height="114" as="geometry"/> </mxCell> <mxCell id="0.3.0" value="modelnamechildId@<b>modelnamechild</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="7" vertex="1"> <mxGeometry y="44" width="230" height="32" as="geometry"/> </mxCell> <mxCell id="8" value="modelnameId@<b>modelname</b>" style="text;strokeColor=none;fillColor=none;align=center;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;html=1;" parent="7" vertex="1"> <mxGeometry y="76" width="230" height="30" as="geometry"/> </mxCell> <mxCell id="0.3.2" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;" parent="7" vertex="1"> <mxGeometry y="106" width="230" height="8" as="geometry"/> </mxCell> <mxCell id="9" value="hasMany" style="endArrow=open;html=1;endSize=12;startArrow=diamondThin;startSize=14;startFill=1;edgeStyle=orthogonalEdgeStyle;" parent="-1" edge="1" target="1.0" source="4"> <mxGeometry relative="1" as="geometry"> <mxPoint x="330" y="260" as="sourcePoint"/> <mxPoint x="381" y="120" as="targetPoint"/> <Array as="points"> <mxPoint x="260" y="120"/> <mxPoint x="260" y="120"/> </Array> </mxGeometry> </mxCell> <mxCell id="10" value="hasAndBelongsToMany" style="endArrow=diamondThin;html=1;endSize=12;startArrow=diamondThin;startSize=14;startFill=1;edgeStyle=orthogonalEdgeStyle;" parent="-1" source="21" target="5" edge="1"> <mxGeometry relative="1" as="geometry"> <mxPoint x="265" y="200" as="sourcePoint"/> <mxPoint x="330" y="153" as="targetPoint"/> <Array as="points"> <mxPoint x="330" y="146"/> <mxPoint x="330" y="149"/> </Array> </mxGeometry> </mxCell> <mxCell id="11" value="hasMany" style="endArrow=open;html=1;endSize=12;startArrow=diamondThin;startSize=14;startFill=1;edgeStyle=orthogonalEdgeStyle;exitX=0.605;exitY=1.038;exitPerimeter=0;" parent="-1" source="3" target="8" edge="1"> <mxGeometry relative="1" as="geometry"> <mxPoint x="140" y="180" as="sourcePoint"/> <mxPoint x="310" y="360" as="targetPoint"/> <Array as="points"> <mxPoint x="175" y="369"/> </Array> </mxGeometry> </mxCell> <mxCell id="12" value="hasMany" style="endArrow=open;html=1;endSize=12;startArrow=diamondThin;startSize=14;startFill=1;edgeStyle=orthogonalEdgeStyle;" parent="-1" source="6" target="0.3.0" edge="1"> <mxGeometry relative="1" as="geometry"> <mxPoint x="410" y="510" as="sourcePoint"/> <mxPoint x="570" y="510" as="targetPoint"/> <Array as="points"> <mxPoint x="470" y="332"/> </Array> </mxGeometry> </mxCell> <mxCell id="1.0.1" value="hasManyThrough" style="endArrow=diamondThin;dashed=1;html=1;endSize=12;startArrow=diamondThin;startSize=14;startFill=1;edgeStyle=orthogonalEdgeStyle;" parent="-1" source="3" target="6" edge="1"> <mxGeometry relative="1" as="geometry"> <mxPoint x="230" y="220" as="sourcePoint"/> <mxPoint x="390" y="220" as="targetPoint"/> <Array as="points"/> </mxGeometry> </mxCell> </root> </mxGraphModel>
Relation
General
- Make sure the link goes from the component relation to the component propertie
- The Diamond end goes on the relation and the arrow end goes on the propertie
- Both properties and relation should have @ symbol
- Relation should have "(FK)" after the relation name
Has One / Has Many
- Use the arrow pointing to the relation field and the diamond pointing to the propertie
Has and Belongs to Many
- Does not import the direction
Has Many Through
- Need to create 3 relation
- One between the to Relation Field both end diamonds line dashed
- One between the to Relation Field both end diamonds line dashed
- One from each ModelThrough properties/relation make sure the arrow points to the propertie, also this are regular "has Many" relation links
Output JSON
Functions
Save to XML
This will save in the server folders ( /diagram/ER_Model.xml) the XML of the current State of the Diagram
Update Form JSON
This will update from any change on the JSON files without changing the styling
Update JSON
This will update your JSON files according to the current diagram configuration
Reload JSON
Delete current diagram and reload form the JSON, and applying default layout, Styling will be lost