<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="drawio" version="31.7.0">
  <diagram id="drawme-how-it-works" name="User journey • Multi-color">
    <mxGraphModel grid="1" gridSize="10" guides="1" page="1" pageScale="1" pageWidth="1580" pageHeight="1245" background="#FFFFFF" shadow="0">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="eyebrow" value="DRAWME / USER JOURNEY" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#2563EB;fontSize=14;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="45" width="650" height="24" as="geometry"/>
        </mxCell>
        <mxCell id="title" value="One request. An editable result." style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=42;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="85" width="1500" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="subtitle" value="With the CLI available, Pi authors, reviews and exports autonomously — no approval pauses" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#64748B;fontSize=19;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="40" y="158" width="1500" height="32" as="geometry"/>
        </mxCell>
        <mxCell id="prepare" value="AUTHORING" style="rounded=1;absoluteArcSize=1;arcSize=18;container=1;pointerEvents=0;html=1;align=left;verticalAlign=top;spacingLeft=24;spacingTop=18;whiteSpace=wrap;fontFamily=Helvetica;fontSize=14;fontStyle=1;fontColor=#64748B;fillColor=#F8FAFC;strokeColor=#E2E8F0;strokeWidth=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="225" width="1500" height="240" as="geometry"/>
        </mxCell>
        <mxCell id="quality" value="QUALITY LOOP" style="rounded=1;absoluteArcSize=1;arcSize=18;container=1;pointerEvents=0;html=1;align=left;verticalAlign=top;spacingLeft=24;spacingTop=18;whiteSpace=wrap;fontFamily=Helvetica;fontSize=14;fontStyle=1;fontColor=#64748B;fillColor=#FAF8FF;strokeColor=#E2E8F0;strokeWidth=1;" vertex="1" parent="1">
          <mxGeometry x="540" y="545" width="1000" height="420" as="geometry"/>
        </mxCell>
        <mxCell id="legend-prep-swatch" value="" style="ellipse;html=1;fillColor=#3B82F6;strokeColor=none;" vertex="1" parent="1">
          <mxGeometry x="1050" y="48" width="12" height="12" as="geometry"/>
        </mxCell>
        <mxCell id="legend-prep" value="Authoring" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#64748B;fontSize=14;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="1072" y="40" width="130" height="28" as="geometry"/>
        </mxCell>
        <mxCell id="legend-quality-swatch" value="" style="ellipse;html=1;fillColor=#8B5CF6;strokeColor=none;" vertex="1" parent="1">
          <mxGeometry x="1220" y="48" width="12" height="12" as="geometry"/>
        </mxCell>
        <mxCell id="legend-quality" value="Quality" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#64748B;fontSize=14;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="1242" y="40" width="130" height="28" as="geometry"/>
        </mxCell>
        <mxCell id="legend-delivery-swatch" value="" style="ellipse;html=1;fillColor=#10B981;strokeColor=none;" vertex="1" parent="1">
          <mxGeometry x="1380" y="48" width="12" height="12" as="geometry"/>
        </mxCell>
        <mxCell id="legend-delivery" value="Delivery" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#64748B;fontSize=14;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="1402" y="40" width="130" height="28" as="geometry"/>
        </mxCell>
        <mxCell id="step-1" value="1" style="ellipse;aspect=fixed;html=1;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=15;fontStyle=1;fontColor=#FFFFFF;fillColor=#3B82F6;strokeColor=none;" vertex="1" parent="prepare">
          <mxGeometry x="40" y="40" width="34" height="34" as="geometry"/>
        </mxCell>
        <mxCell id="request" value="&lt;b&gt;Describe&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#1E3A8A&quot; style=&quot;font-size:18px&quot;&gt;&lt;font face=&quot;monospace&quot; style=&quot;font-size:18px&quot;&gt;/drawme &amp;lt;description&amp;gt;&lt;/font&gt;&lt;br&gt;Include formats + motion&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=11;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=22;fontColor=#1E3A8A;fillColor=#EFF6FF;strokeColor=#3B82F6;strokeWidth=1.5;shape=manualInput;boundedLbl=1;size=26;" vertex="1" parent="prepare">
          <mxGeometry x="40" y="90" width="340" height="130" as="geometry"/>
        </mxCell>
        <mxCell id="step-2" value="2" style="ellipse;aspect=fixed;html=1;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=15;fontStyle=1;fontColor=#FFFFFF;fillColor=#3B82F6;strokeColor=none;" vertex="1" parent="prepare">
          <mxGeometry x="580" y="40" width="34" height="34" as="geometry"/>
        </mxCell>
        <mxCell id="check" value="&lt;b&gt;Plan&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#1E3A8A&quot; style=&quot;font-size:18px&quot;&gt;CLI + references loaded&lt;br&gt;Type · relationships · layout&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=22;fontColor=#1E3A8A;fillColor=#EFF6FF;strokeColor=#3B82F6;strokeWidth=1.5;" vertex="1" parent="prepare">
          <mxGeometry x="580" y="90" width="340" height="130" as="geometry"/>
        </mxCell>
        <mxCell id="step-3" value="3" style="ellipse;aspect=fixed;html=1;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=15;fontStyle=1;fontColor=#FFFFFF;fillColor=#3B82F6;strokeColor=none;" vertex="1" parent="prepare">
          <mxGeometry x="1120" y="40" width="34" height="34" as="geometry"/>
        </mxCell>
        <mxCell id="author" value="&lt;b&gt;Author&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#1E3A8A&quot; style=&quot;font-size:18px&quot;&gt;.drawio is the source&lt;br&gt;XML · exact shapes · v30+ tools&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=center;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=22;fontColor=#1E3A8A;fillColor=#EFF6FF;strokeColor=#3B82F6;strokeWidth=1.5;shape=mxgraph.flowchart.document2;size=0.16;" vertex="1" parent="prepare">
          <mxGeometry x="1120" y="90" width="340" height="130" as="geometry"/>
        </mxCell>
        <mxCell id="v30" value="Mermaid conversion + ELK layout require draw.io v30+." style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#64748B;fontSize=16;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="80" y="492" width="900" height="30" as="geometry"/>
        </mxCell>
        <mxCell id="step-4" value="4" style="ellipse;aspect=fixed;html=1;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=15;fontStyle=1;fontColor=#FFFFFF;fillColor=#8B5CF6;strokeColor=none;" vertex="1" parent="quality">
          <mxGeometry x="620" y="50" width="34" height="34" as="geometry"/>
        </mxCell>
        <mxCell id="validate" value="&lt;b&gt;Validate&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#4C1D95&quot; style=&quot;font-size:18px&quot;&gt;Every source revision&lt;br&gt;Fix errors · review warnings&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=22;fontColor=#4C1D95;fillColor=#F5F3FF;strokeColor=#8B5CF6;strokeWidth=1.5;" vertex="1" parent="quality">
          <mxGeometry x="620" y="100" width="340" height="130" as="geometry"/>
        </mxCell>
        <mxCell id="step-5" value="5" style="ellipse;aspect=fixed;html=1;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=15;fontStyle=1;fontColor=#FFFFFF;fillColor=#8B5CF6;strokeColor=none;" vertex="1" parent="quality">
          <mxGeometry x="80" y="50" width="34" height="34" as="geometry"/>
        </mxCell>
        <mxCell id="review" value="&lt;b&gt;4-pass gated review&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#4C1D95&quot; style=&quot;font-size:18px&quot;&gt;Fit → placement → connections&lt;br&gt;Holistic typography + semantics&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=22;fontColor=#4C1D95;fillColor=#F5F3FF;strokeColor=#8B5CF6;strokeWidth=1.5;" vertex="1" parent="quality">
          <mxGeometry x="80" y="100" width="340" height="130" as="geometry"/>
        </mxCell>
        <mxCell id="step-6" value="6" style="ellipse;aspect=fixed;html=1;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=15;fontStyle=1;fontColor=#FFFFFF;fillColor=#10B981;strokeColor=none;" vertex="1" parent="1">
          <mxGeometry x="80" y="595" width="34" height="34" as="geometry"/>
        </mxCell>
        <mxCell id="export" value="&lt;b&gt;Deliver&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#064E3B&quot; style=&quot;font-size:18px&quot;&gt;PNG default · SVG / PDF / JPG&lt;br&gt;Retain .drawio · report issues&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=center;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=22;fontColor=#064E3B;fillColor=#ECFDF5;strokeColor=#10B981;strokeWidth=1.5;shape=mxgraph.flowchart.document2;size=0.16;" vertex="1" parent="1">
          <mxGeometry x="80" y="645" width="340" height="130" as="geometry"/>
        </mxCell>
        <mxCell id="correct" value="&lt;b&gt;Correct the current pass&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#4C1D95&quot; style=&quot;font-size:17px&quot;&gt;Edit → validate → new preview&lt;br&gt;fixed / not fixed / regressed&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=22;fontColor=#4C1D95;fillColor=#F5F3FF;strokeColor=#8B5CF6;strokeWidth=1.5;" vertex="1" parent="quality">
          <mxGeometry x="250" y="300" width="400" height="100" as="geometry"/>
        </mxCell>
        <mxCell id="motion" value="&lt;b&gt;Motion on request&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#064E3B&quot; style=&quot;font-size:17px&quot;&gt;Verified standalone animated SVG&lt;br&gt;Storyboard + PNG fallback&lt;/font&gt;" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#064E3B;fontSize=20;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="80" y="825" width="360" height="105" as="geometry"/>
        </mxCell>
        <mxCell id="e-request-check" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#3B82F6;strokeWidth=2;endArrow=blockThin;endFill=1;endSize=8;fontFamily=Helvetica;fontSize=15;fontColor=#64748B;labelBackgroundColor=#FFFFFF;exitX=1;exitY=0.5;entryX=0;entryY=0.5;" edge="1" parent="1" source="request" target="check">
          <mxGeometry x="0" relative="1" as="geometry"><Array as="points"><mxPoint x="520" y="380"/></Array></mxGeometry>
        </mxCell>
        <mxCell id="e-check-author" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#3B82F6;strokeWidth=2;endArrow=blockThin;endFill=1;endSize=8;fontFamily=Helvetica;fontSize=15;fontColor=#64748B;labelBackgroundColor=#FFFFFF;exitX=1;exitY=0.5;entryX=0;entryY=0.5;" edge="1" parent="1" source="check" target="author">
          <mxGeometry x="0" relative="1" as="geometry"><Array as="points"><mxPoint x="1060" y="380"/></Array></mxGeometry>
        </mxCell>
        <mxCell id="e-author-validate" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#8B5CF6;strokeWidth=2;endArrow=blockThin;endFill=1;endSize=8;fontFamily=Helvetica;fontSize=15;fontColor=#64748B;labelBackgroundColor=#FFFFFF;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="author" target="validate">
          <mxGeometry x="0" relative="1" as="geometry"><Array as="points"><mxPoint x="1330" y="515"/></Array></mxGeometry>
        </mxCell>
        <mxCell id="e-validate-review" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#8B5CF6;strokeWidth=2;endArrow=blockThin;endFill=1;endSize=8;fontFamily=Helvetica;fontSize=15;fontColor=#64748B;labelBackgroundColor=#FFFFFF;exitX=0;exitY=0.5;entryX=1;entryY=0.5;" edge="1" parent="1" source="validate" target="review">
          <mxGeometry x="0" relative="1" as="geometry"><Array as="points"><mxPoint x="1060" y="710"/></Array></mxGeometry>
        </mxCell>
        <mxCell id="e-review-export" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#10B981;strokeWidth=2;endArrow=blockThin;endFill=1;endSize=8;fontFamily=Helvetica;fontSize=15;fontColor=#64748B;labelBackgroundColor=#FFFFFF;exitX=0;exitY=0.5;entryX=1;entryY=0.5;" edge="1" parent="1" source="review" target="export">
          <mxGeometry x="0" relative="1" as="geometry"><Array as="points"><mxPoint x="520" y="710"/></Array></mxGeometry>
        </mxCell>
        <mxCell id="e-review-correct" value="finding; retries &lt; 8" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#8B5CF6;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=8;fontFamily=Helvetica;fontSize=15;fontColor=#64748B;labelBackgroundColor=#FFFFFF;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="review" target="correct">
          <mxGeometry x="0.12" relative="1" as="geometry"><mxPoint x="0" y="-19" as="offset"/><Array as="points"><mxPoint x="790" y="825"/><mxPoint x="990" y="825"/></Array></mxGeometry>
        </mxCell>
        <mxCell id="e-correct-validate" value="revalidate" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#8B5CF6;strokeWidth=1.5;endArrow=blockThin;endFill=1;endSize=8;fontFamily=Helvetica;fontSize=15;fontColor=#64748B;labelBackgroundColor=#FFFFFF;exitX=1;exitY=0.5;entryX=0.5;entryY=1;dashed=1;" edge="1" parent="1" source="correct" target="validate">
          <mxGeometry x="-0.45" relative="1" as="geometry"><mxPoint x="0" y="20" as="offset"/><Array as="points"><mxPoint x="1330" y="895"/><mxPoint x="1330" y="810"/></Array></mxGeometry>
        </mxCell>
        <mxCell id="notes-rule" value="" style="fillColor=#E2E8F0;strokeColor=none;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="1005" width="1500" height="1" as="geometry"/>
        </mxCell>
        <mxCell id="missing-cli" value="&lt;b&gt;CLI unavailable&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:16px&quot;&gt;Still author + validate XML.&lt;br&gt;Skip conversion, layout, previews and exports.&lt;/font&gt;" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=19;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="40" y="1035" width="470" height="100" as="geometry"/>
        </mxCell>
        <mxCell id="vision" value="&lt;b&gt;Text-only model&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:16px&quot;&gt;Use validation + explanation.&lt;br&gt;Report rendered review as skipped.&lt;/font&gt;" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=19;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="550" y="1035" width="450" height="100" as="geometry"/>
        </mxCell>
        <mxCell id="limit" value="&lt;b&gt;Bounded corrections&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:16px&quot;&gt;Keep the best validated state.&lt;br&gt;At eight retries, export and report unresolved findings.&lt;/font&gt;" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=19;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="1040" y="1035" width="500" height="100" as="geometry"/>
        </mxCell>
        <mxCell id="cleanup" value="PNG / SVG / PDF embed XML; JPG cannot. Final export removes the latest preview." style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#64748B;fontSize=16;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="40" y="1175" width="1500" height="30" as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
