<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="drawio" version="31.7.0">
  <diagram id="drawme-installation-guide" name="Quick start • Light">
    <mxGraphModel grid="1" gridSize="10" guides="1" page="1" pageScale="1" pageWidth="1635" pageHeight="1215" background="#FFFFFF" shadow="0">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="eyebrow" value="DRAWME / QUICK START" 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="40" width="650" height="24" as="geometry"/>
        </mxCell>
        <mxCell id="title" value="From install to your first diagram." 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="80" width="1540" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="subtitle" value="Terminal commands and Pi commands are separated. Choose one installation scope." 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="153" width="1540" height="32" as="geometry"/>
        </mxCell>
        <mxCell id="prepare-badge" value="01" style="ellipse;aspect=fixed;html=1;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=15;fontStyle=1;fontColor=#FFFFFF;fillColor=#2563EB;strokeColor=none;" vertex="1" parent="1">
          <mxGeometry x="40" y="225" width="38" height="38" as="geometry"/>
        </mxCell>
        <mxCell id="prepare-heading" value="Prepare" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=26;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="95" y="225" width="420" height="40" as="geometry"/>
        </mxCell>
        <mxCell id="prepare" value="" 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="285" width="460" height="760" as="geometry"/>
        </mxCell>
        <mxCell id="scope-badge" value="02" style="ellipse;aspect=fixed;html=1;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=15;fontStyle=1;fontColor=#FFFFFF;fillColor=#2563EB;strokeColor=none;" vertex="1" parent="1">
          <mxGeometry x="580" y="225" width="38" height="38" as="geometry"/>
        </mxCell>
        <mxCell id="scope-heading" value="Choose a scope" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=26;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="635" y="225" width="420" height="40" as="geometry"/>
        </mxCell>
        <mxCell id="scope" value="" 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="580" y="285" width="460" height="760" as="geometry"/>
        </mxCell>
        <mxCell id="use-badge" value="03" style="ellipse;aspect=fixed;html=1;align=center;verticalAlign=middle;fontFamily=Helvetica;fontSize=15;fontStyle=1;fontColor=#FFFFFF;fillColor=#2563EB;strokeColor=none;" vertex="1" parent="1">
          <mxGeometry x="1120" y="225" width="38" height="38" as="geometry"/>
        </mxCell>
        <mxCell id="use-heading" value="Make a diagram" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=26;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="1175" y="225" width="420" height="40" as="geometry"/>
        </mxCell>
        <mxCell id="use" value="" 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="1120" y="285" width="460" height="760" as="geometry"/>
        </mxCell>
        <mxCell id="runtime" value="&lt;b&gt;Node.js + Pi&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:17px&quot;&gt;Node.js ≥ 22.19 · node --version&lt;br&gt;Install Pi via pi.dev · pi --version&lt;br&gt;In Pi: /login, then /model&lt;/font&gt;" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=21;fontStyle=0;" vertex="1" parent="prepare">
          <mxGeometry x="25" y="35" width="410" height="130" as="geometry"/>
        </mxCell>
        <mxCell id="prepare-rule-1" value="" style="fillColor=#E2E8F0;strokeColor=none;html=1;" vertex="1" parent="prepare">
          <mxGeometry x="25" y="195" width="410" height="1" as="geometry"/>
        </mxCell>
        <mxCell id="desktop" value="&lt;b&gt;draw.io Desktop&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:17px&quot;&gt;&lt;font face=&quot;monospace&quot; style=&quot;font-size:17px&quot;&gt;brew install --cask drawio&lt;/font&gt;&lt;br&gt;macOS command above&lt;br&gt;Linux: .deb / .rpm · Windows: installer&lt;/font&gt;" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=21;fontStyle=0;" vertex="1" parent="prepare">
          <mxGeometry x="25" y="220" width="410" height="150" as="geometry"/>
        </mxCell>
        <mxCell id="prepare-rule-2" value="" style="fillColor=#E2E8F0;strokeColor=none;html=1;" vertex="1" parent="prepare">
          <mxGeometry x="25" y="400" width="410" height="1" as="geometry"/>
        </mxCell>
        <mxCell id="trust" value="&lt;b&gt;Trust before execution&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:17px&quot;&gt;Pi packages have full system access.&lt;br&gt;Review SECURITY.md and the source.&lt;br&gt;Use a vision model for rendered review.&lt;/font&gt;" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=21;fontStyle=0;" vertex="1" parent="prepare">
          <mxGeometry x="25" y="425" width="410" height="145" as="geometry"/>
        </mxCell>
        <mxCell id="downloads" value="Desktop releases&lt;br&gt;github.com/jgraph/drawio-desktop/releases" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#64748B;fontSize=15;fontStyle=0;" vertex="1" parent="prepare">
          <mxGeometry x="25" y="645" width="410" height="70" as="geometry"/>
        </mxCell>
        <mxCell id="personal" value="&lt;b&gt;Personal · persistent&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:16px&quot;&gt;&lt;font face=&quot;monospace&quot; style=&quot;font-size:17px&quot;&gt;pi install npm:@senad-d/drawme&lt;/font&gt;&lt;br&gt;Default: ~/.pi/agent/settings.json&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=21;fontColor=#0F172A;fillColor=#EFF6FF;strokeColor=#2563EB;strokeWidth=1.5;" vertex="1" parent="scope">
          <mxGeometry x="20" y="35" width="420" height="140" as="geometry"/>
        </mxCell>
        <mxCell id="project" value="&lt;b&gt;Project · persistent&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:16px&quot;&gt;&lt;font face=&quot;monospace&quot; style=&quot;font-size:17px&quot;&gt;pi install npm:@senad-d/drawme -l&lt;/font&gt;&lt;br&gt; .pi/settings.json; loads after trust&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=21;fontColor=#0F172A;fillColor=#FFFFFF;strokeColor=#E2E8F0;strokeWidth=1.5;" vertex="1" parent="scope">
          <mxGeometry x="20" y="220" width="420" height="140" as="geometry"/>
        </mxCell>
        <mxCell id="trial" value="&lt;b&gt;One invocation · try it&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:16px&quot;&gt;&lt;font face=&quot;monospace&quot; style=&quot;font-size:17px&quot;&gt;pi -e npm:@senad-d/drawme&lt;/font&gt;&lt;br&gt;Starts Pi; does not change settings&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=21;fontColor=#0F172A;fillColor=#FFFFFF;strokeColor=#E2E8F0;strokeWidth=1.5;" vertex="1" parent="scope">
          <mxGeometry x="20" y="405" width="420" height="140" as="geometry"/>
        </mxCell>
        <mxCell id="load-note" value="Persistent install: start pi, or /reload.&lt;br&gt;The one-invocation command already starts Pi." style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#64748B;fontSize=17;fontStyle=0;" vertex="1" parent="scope">
          <mxGeometry x="25" y="605" width="410" height="80" as="geometry"/>
        </mxCell>
        <mxCell id="start" value="&lt;b&gt;In your terminal&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:17px&quot;&gt;&lt;font face=&quot;monospace&quot; style=&quot;font-size:18px&quot;&gt;cd /path/to/project&lt;br&gt;pi&lt;/font&gt;&lt;br&gt;Grant project trust after review&lt;/font&gt;" style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#0F172A;fontSize=21;fontStyle=0;" vertex="1" parent="use">
          <mxGeometry x="25" y="35" width="410" height="125" as="geometry"/>
        </mxCell>
        <mxCell id="verify" value="&lt;b&gt;Inside Pi · verify&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:16px&quot;&gt;&lt;font face=&quot;monospace&quot; style=&quot;font-size:19px&quot;&gt;/drawme-check&lt;/font&gt;&lt;br&gt;Reports the detected path + version&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=21;fontColor=#0F172A;fillColor=#FFFFFF;strokeColor=#E2E8F0;strokeWidth=1.5;" vertex="1" parent="use">
          <mxGeometry x="25" y="245" width="410" height="115" as="geometry"/>
        </mxCell>
        <mxCell id="describe" value="&lt;b&gt;Inside Pi · describe&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#64748B&quot; style=&quot;font-size:17px&quot;&gt;&lt;font face=&quot;monospace&quot; style=&quot;font-size:17px&quot;&gt;/drawme a login flow with retry&lt;/font&gt;&lt;br&gt;Add “animated SVG” for motion&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=12;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;fontFamily=Helvetica;fontSize=21;fontColor=#0F172A;fillColor=#EFF6FF;strokeColor=#2563EB;strokeWidth=1.5;" vertex="1" parent="use">
          <mxGeometry x="25" y="460" width="410" height="145" as="geometry"/>
        </mxCell>
        <mxCell id="delivered" value="Delivered: editable .drawio + PNG by default.&lt;br&gt;Motion requests: verified SVG + PNG fallback." style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#64748B;fontSize=17;fontStyle=0;" vertex="1" parent="use">
          <mxGeometry x="25" y="650" width="410" height="70" as="geometry"/>
        </mxCell>
        <mxCell id="e-start-verify" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2563EB;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="start" target="verify">
          <mxGeometry x="0" relative="1" as="geometry"><Array as="points"><mxPoint x="1350" y="485"/></Array></mxGeometry>
        </mxCell>
        <mxCell id="e-verify-describe" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#2563EB;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="verify" target="describe">
          <mxGeometry x="0" relative="1" as="geometry"><Array as="points"><mxPoint x="1350" y="690"/></Array></mxGeometry>
        </mxCell>
        <mxCell id="footer-rule" value="" style="fillColor=#E2E8F0;strokeColor=none;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="1090" width="1540" height="1" as="geometry"/>
        </mxCell>
        <mxCell id="compatibility" value="v30+ adds Mermaid conversion + ELK layout; older versions still render and export.&lt;br&gt;No CLI? Author + validate XML only — no preview or export." style="text;html=1;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=0;strokeColor=none;fillColor=none;fontFamily=Helvetica;fontColor=#64748B;fontSize=17;fontStyle=0;" vertex="1" parent="1">
          <mxGeometry x="40" y="1120" width="1540" height="55" as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
