much better architecture diagram

thanks @S-poony !!!
This commit is contained in:
lovasoa
2024-05-01 01:05:16 +02:00
parent b9bd212258
commit d888c8d0d7
5 changed files with 112 additions and 26 deletions
@@ -0,0 +1,47 @@
digraph {
rankdir=LR;
node [shape=rectangle, style=rounded, fontname=helvetica];
edge [arrowhead=normal, arrowtail=crow, dir=both];
subgraph cluster_browser {
label = "Web Browser";
style = filled;
color = lightgrey;
node [style=filled, color=white];
browser [label = "<f0>Web Browser|<f1>"];
}
subgraph cluster_sqlpage {
label = "SQLPage";
style = filled;
color = lightblue;
node [style=filled, color=white];
read_file [label = "<f0>Read File|<f1>todos.sql"];
replace_param [label = "<f0>Replace Parameter|<f1>$todo_id with 1"];
format_results [label = "<f0>Format Results|<f1>as HTML"];
}
subgraph cluster_database {
label = "Database";
style = filled;
color = palegreen;
node [style=filled, color=white];
execute_query [label = "<f0>Execute|<f1>Query"];
return_results [label = "<f0>Return|<f1>Results"];
}
browser:f1 -> http_request [label = " HTTP GET Request\n/todos.sql?todo_id=1", lhead=cluster_browser];
http_request -> read_file:f0 [lhead=cluster_sqlpage];
read_file:f1 -> replace_param:f0;
replace_param:f1 -> sql_query [label = " SQL Query\nSELECT * FROM todos\nWHERE id = 1", lhead=cluster_sqlpage];
sql_query -> execute_query:f0 [lhead=cluster_database];
execute_query:f1 -> return_results:f0;
return_results:f1 -> result_stream [label = " Result Stream", lhead=cluster_database];
result_stream -> format_results:f0 [lhead=cluster_sqlpage];
format_results:f1 -> html_response [label = " HTML Response\nwith Formatted Results", ltail=cluster_sqlpage];
html_response -> browser:f0 [label = " Display Results", lhead=cluster_browser];
// Additional Styles
edge [arrowhead=normal, arrowtail=none, dir=both, fontname=helvetica, fontsize=10];
node [fontsize=12];
}
+60 -21
View File
@@ -1,16 +1,16 @@
<mxfile host="app.diagrams.net" modified="2024-04-28T20:57:38.467Z" agent="Mozilla/5.0 (X11; Linux x86_64; rv:125.0) Gecko/20100101 Firefox/125.0" etag="IT9UHuSMXK38mUZmlf-4" version="24.3.0" type="device">
<mxfile host="app.diagrams.net" modified="2024-04-30T20:35:55.594Z" agent="Mozilla/5.0 (X11; Linux x86_64; rv:125.0) Gecko/20100101 Firefox/125.0" etag="fCNrnm6Ivitl6KE4-js5" version="24.3.1" type="device">
<diagram name="Page-1" id="qWvz8Z0mP-6tBl2-Tc15">
<mxGraphModel dx="2195" dy="910" 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">
<mxGraphModel dx="2267" dy="907" 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="-Mu83Rb6pQ0imwjiuAuA-2" value="" style="rounded=1;whiteSpace=wrap;html=1;arcSize=6;" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-2" value="" style="rounded=1;whiteSpace=wrap;html=1;arcSize=6;" parent="1" vertex="1">
<mxGeometry x="20" y="230" width="320" height="150" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-1" value="&lt;h1 style=&quot;margin-top: 0px;&quot;&gt;GET /todo.sql?&lt;font color=&quot;#003300&quot;&gt;id=1&lt;/font&gt;&lt;br&gt;&lt;/h1&gt;&lt;pre style=&quot;font-size: 13px;&quot;&gt;&lt;font style=&quot;font-size: 13px;&quot;&gt;Host: example.com&lt;/font&gt;&lt;/pre&gt;&lt;pre style=&quot;font-size: 13px;&quot; data-signature=&quot;FRjGbP3zQQCt51JFaD0Ll1xKb2HQKZ0zWZPelzg69HE=&quot; class=&quot;brush: http notranslate&quot;&gt;&lt;font style=&quot;font-size: 13px;&quot;&gt;&lt;code&gt;&lt;span class=&quot;token header&quot;&gt;&lt;span class=&quot;token header-name keyword&quot;&gt;Cookie&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token header-value&quot;&gt;name=value&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/font&gt;&lt;/pre&gt;&lt;p&gt;&lt;/p&gt;" style="text;html=1;whiteSpace=wrap;overflow=hidden;rounded=0;" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-1" value="&lt;h1 style=&quot;margin-top: 0px;&quot;&gt;GET /todo.sql?&lt;font color=&quot;#003300&quot;&gt;id=1&lt;/font&gt;&lt;br&gt;&lt;/h1&gt;&lt;pre style=&quot;font-size: 13px;&quot;&gt;&lt;font style=&quot;font-size: 13px;&quot;&gt;Host: example.com&lt;/font&gt;&lt;/pre&gt;&lt;pre style=&quot;font-size: 13px;&quot; data-signature=&quot;FRjGbP3zQQCt51JFaD0Ll1xKb2HQKZ0zWZPelzg69HE=&quot; class=&quot;brush: http notranslate&quot;&gt;&lt;font style=&quot;font-size: 13px;&quot;&gt;&lt;code&gt;&lt;span class=&quot;token header&quot;&gt;&lt;span class=&quot;token header-name keyword&quot;&gt;Cookie&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token header-value&quot;&gt;name=value&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/font&gt;&lt;/pre&gt;&lt;p&gt;&lt;/p&gt;" style="text;html=1;whiteSpace=wrap;overflow=hidden;rounded=0;" parent="1" vertex="1">
<mxGeometry x="40" y="245" width="290" height="120" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-3" value="" style="curved=1;endArrow=classic;html=1;rounded=0;strokeWidth=5;dashed=1;" edge="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-3" value="" style="curved=1;endArrow=classic;html=1;rounded=0;strokeWidth=5;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="370" y="320" as="sourcePoint" />
<mxPoint x="390" y="700" as="targetPoint" />
@@ -23,66 +23,105 @@
</Array>
</mxGeometry>
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-4" value="" style="whiteSpace=wrap;html=1;shape=mxgraph.basic.document;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-4" value="" style="whiteSpace=wrap;html=1;shape=mxgraph.basic.document;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" parent="1" vertex="1">
<mxGeometry x="480" y="230" width="140" height="170" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-5" value="" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-5" value="" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;" parent="1" vertex="1">
<mxGeometry x="677" y="420" width="150" height="195" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-6" value="" style="rounded=1;whiteSpace=wrap;html=1;arcSize=6;" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-6" value="" style="rounded=1;whiteSpace=wrap;html=1;arcSize=6;" parent="1" vertex="1">
<mxGeometry x="25" y="600" width="320" height="150" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-7" value="&lt;h1 style=&quot;margin-top: 0px;&quot;&gt;HTTP/1.1 200 OK&lt;br&gt;&lt;/h1&gt;&lt;pre style=&quot;font-size: 13px;&quot;&gt;&lt;font style=&quot;font-size: 13px;&quot;&gt;Server: SQLPage&lt;/font&gt;&lt;/pre&gt;&lt;pre style=&quot;font-size: 13px;&quot; data-signature=&quot;FRjGbP3zQQCt51JFaD0Ll1xKb2HQKZ0zWZPelzg69HE=&quot; class=&quot;brush: http notranslate&quot;&gt;&lt;font style=&quot;font-size: 13px;&quot;&gt;&lt;code&gt;&lt;span class=&quot;token header&quot;&gt;&lt;span class=&quot;token header-name keyword&quot;&gt;&lt;br&gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;title&amp;gt;My SQLPage...&lt;br&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/font&gt;&lt;/pre&gt;&lt;p&gt;&lt;/p&gt;" style="text;html=1;whiteSpace=wrap;overflow=hidden;rounded=0;" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-7" value="&lt;h1 style=&quot;margin-top: 0px;&quot;&gt;HTTP/1.1 200 OK&lt;br&gt;&lt;/h1&gt;&lt;pre style=&quot;font-size: 13px;&quot;&gt;&lt;font style=&quot;font-size: 13px;&quot;&gt;Server: SQLPage&lt;/font&gt;&lt;/pre&gt;&lt;pre style=&quot;font-size: 13px;&quot; data-signature=&quot;FRjGbP3zQQCt51JFaD0Ll1xKb2HQKZ0zWZPelzg69HE=&quot; class=&quot;brush: http notranslate&quot;&gt;&lt;font style=&quot;font-size: 13px;&quot;&gt;&lt;code&gt;&lt;span class=&quot;token header&quot;&gt;&lt;span class=&quot;token header-name keyword&quot;&gt;&lt;br&gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;title&amp;gt;My SQLPage...&lt;br&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/font&gt;&lt;/pre&gt;&lt;p&gt;&lt;/p&gt;" style="text;html=1;whiteSpace=wrap;overflow=hidden;rounded=0;" parent="1" vertex="1">
<mxGeometry x="45" y="615" width="290" height="120" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-8" value="&lt;div&gt;SELECT&lt;/div&gt;&lt;div&gt;&amp;nbsp; &#39;list&#39; AS component;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;SELECT *&lt;/div&gt;&lt;div&gt;FROM todos&lt;/div&gt;&lt;div&gt;WHERE id =&lt;font color=&quot;#003300&quot;&gt; $id&lt;br&gt;&lt;/font&gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-8" value="&lt;div&gt;SELECT&lt;/div&gt;&lt;div&gt;&amp;nbsp; &#39;list&#39; AS component;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;SELECT *&lt;/div&gt;&lt;div&gt;FROM todos&lt;/div&gt;&lt;div&gt;WHERE id =&lt;font color=&quot;#003300&quot;&gt; $todo_id&lt;br&gt;&lt;/font&gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
<mxGeometry x="486" y="250" width="140" height="140" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-9" value="&lt;div&gt;list.handlebars&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;(pre-built component)&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;shape=mxgraph.basic.document" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-9" value="&lt;div&gt;list.handlebars&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;(pre-built component)&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;shape=mxgraph.basic.document" parent="1" vertex="1">
<mxGeometry x="490" y="610" width="140" height="170" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-10" value="" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://upload.wikimedia.org/wikipedia/commons/2/29/Postgresql_elephant.svg;" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-10" value="" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://upload.wikimedia.org/wikipedia/commons/2/29/Postgresql_elephant.svg;" parent="1" vertex="1">
<mxGeometry x="713.5" y="490" width="77" height="79.41" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-11" value="Website User" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;outlineConnect=0;" vertex="1" parent="1">
<mxGeometry x="-80" y="400" width="80" height="140" as="geometry" />
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-11" value="Website User" style="shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;html=1;outlineConnect=0;" parent="1" vertex="1">
<mxGeometry x="-440" y="410" width="80" height="140" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-15" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=10;fillColor=#f8cecc;strokeColor=#b85450;exitX=-0.061;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1" source="-Mu83Rb6pQ0imwjiuAuA-16" target="-Mu83Rb6pQ0imwjiuAuA-8">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-15" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=10;fillColor=#f8cecc;strokeColor=#b85450;exitX=-0.061;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="-Mu83Rb6pQ0imwjiuAuA-16" target="-Mu83Rb6pQ0imwjiuAuA-8" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="677" y="220" as="sourcePoint" />
<mxPoint x="637" y="270" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-16" value="You write this" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily= Just Another Hand ;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3D%2BJust%2BAnother%2BHand%2B;fontSize=24;fontColor=#FF3333;" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-16" value="You write this" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily= Just Another Hand ;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3D%2BJust%2BAnother%2BHand%2B;fontSize=24;fontColor=#FF3333;" parent="1" vertex="1">
<mxGeometry x="700.5" y="170" width="90" height="110" as="geometry" />
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-17" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=10;fillColor=#e1d5e7;strokeColor=#9673a6;exitX=-0.061;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-17" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=10;fillColor=#e1d5e7;strokeColor=#9673a6;exitX=-0.061;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="224.5" y="538" as="sourcePoint" />
<mxPoint x="155.5" y="585" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-18" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=10;fillColor=#e1d5e7;strokeColor=#9673a6;" edge="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-18" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=10;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="217.25" y="433" as="sourcePoint" />
<mxPoint x="152.75" y="390" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-19" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=10;fillColor=#e1d5e7;strokeColor=#9673a6;" edge="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-19" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=10;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="450" y="550" as="sourcePoint" />
<mxPoint x="525.5" y="600" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-20" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=10;fillColor=#e1d5e7;strokeColor=#9673a6;" edge="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-20" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=10;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="520" y="490" as="sourcePoint" />
<mxPoint x="675.5" y="485" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-21" value="All of this is handled for you automatically" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily= Just Another Hand ;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3D%2BJust%2BAnother%2BHand%2B;fontSize=24;fillColor=#f5f5f5;fontColor=#9577a3;strokeColor=#666666;" vertex="1" parent="1">
<mxCell id="-Mu83Rb6pQ0imwjiuAuA-21" value="All of this is handled for you automatically" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily= Just Another Hand ;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3D%2BJust%2BAnother%2BHand%2B;fontSize=24;fillColor=#f5f5f5;fontColor=#9577a3;strokeColor=#666666;" parent="1" vertex="1">
<mxGeometry x="240" y="430" width="230" height="110" as="geometry" />
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-1" value="Request" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
<mxGeometry x="20" y="200" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-2" value="&lt;div style=&quot;font-size: 13px;&quot; align=&quot;left&quot;&gt;/todos.sql?todo_id=1&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;align=left;fontSize=13;fontFamily=Courier New;" vertex="1" parent="1">
<mxGeometry x="97.5" y="250" width="185" height="30" as="geometry" />
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-3" value="URL" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#1f2f1e;" vertex="1" parent="1">
<mxGeometry x="97.5" y="230" width="52.5" height="20" as="geometry" />
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-4" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;" vertex="1" parent="1">
<mxGeometry x="185" y="255" width="85" height="20" as="geometry" />
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-5" value="URL Parameters" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=7;" vertex="1" parent="1">
<mxGeometry x="185" y="242" width="75" height="15" as="geometry" />
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-6" value="" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.browserWindow;rSize=0;strokeColor=#666666;strokeColor2=#008cff;strokeColor3=#c4c4c4;mainText=,;recursiveResize=0;" vertex="1" parent="1">
<mxGeometry x="-330" y="380" width="330" height="240" as="geometry" />
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-7" value="Page 1" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.anchor;fontSize=17;fontColor=#666666;align=left;whiteSpace=wrap;" vertex="1" parent="67phEDKegGIg4GmPQhPB-6">
<mxGeometry x="60" y="12" width="110" height="26" as="geometry" />
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-8" value="y.fr/todos.sql?todo_id=1" style="strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.anchor;rSize=0;fontSize=17;fontColor=#666666;align=left;" vertex="1" parent="67phEDKegGIg4GmPQhPB-6">
<mxGeometry x="130" y="60" width="250" height="26" as="geometry" />
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-10" value="&lt;h1 style=&quot;margin-top: 0px;&quot;&gt;My SQLPage Website&lt;br&gt;&lt;/h1&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;" style="text;html=1;whiteSpace=wrap;overflow=hidden;rounded=0;" vertex="1" parent="67phEDKegGIg4GmPQhPB-6">
<mxGeometry x="20" y="120" width="290" height="110" as="geometry" />
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-9" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.332;exitY=0.078;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.001;entryY=0.476;entryDx=0;entryDy=0;entryPerimeter=0;fontColor=#789170;fillColor=#d5e8d4;strokeColor=#82b366;" edge="1" parent="1" source="67phEDKegGIg4GmPQhPB-8" target="-Mu83Rb6pQ0imwjiuAuA-2">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-260" y="340" as="sourcePoint" />
<mxPoint x="-210" y="290" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="67phEDKegGIg4GmPQhPB-11" value="" style="endArrow=classic;html=1;rounded=0;exitX=0.008;exitY=0.444;exitDx=0;exitDy=0;exitPerimeter=0;fillColor=#d5e8d4;strokeColor=#82b366;" edge="1" parent="1" source="-Mu83Rb6pQ0imwjiuAuA-6" target="67phEDKegGIg4GmPQhPB-10">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="-230" y="730" as="sourcePoint" />
<mxPoint x="-180" y="680" as="targetPoint" />
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
</diagram>
File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 296 KiB

After

Width:  |  Height:  |  Size: 457 KiB