docs/cicd-pipeline-detailed-en.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <!-- Background -->
  <rect width="800" height="600" fill="white"/>
  <text x="400" y="40" text-anchor="middle" font-size="24" font-weight="bold">ESP32 CI/CD Pipeline</text>
  
  <!-- Pipeline Stages -->
  <g id="stages">
    <!-- Code Push -->
    <circle cx="100" cy="150" r="40" fill="#EBF8FF" stroke="#3B82F6" stroke-width="2"/>
    <path d="M80,150 L120,150 M100,130 L100,170 M100,130 L90,140 M100,130 L110,140" stroke="#3B82F6" stroke-width="2" fill="none"/>
    <text x="100" y="210" text-anchor="middle">1. Code Push</text>
    <text x="100" y="230" text-anchor="middle" font-size="10">Run deploy.yml</text>
    <text x="100" y="245" text-anchor="middle" font-size="10">Setup ESP-IDF</text>
    <text x="100" y="260" text-anchor="middle" font-size="10">Prepare Docker</text>

    <!-- Docker Build -->
    <circle cx="250" cy="150" r="40" fill="#F3E8FF" stroke="#9333EA" stroke-width="2"/>
    <rect x="230" y="130" width="40" height="40" stroke="#9333EA" stroke-width="2" fill="none"/>
    <text x="250" y="210" text-anchor="middle">2. Docker Build</text>
    <text x="250" y="230" text-anchor="middle" font-size="10">Compile Firmware</text>
    <text x="250" y="245" text-anchor="middle" font-size="10">Install Dependencies</text>
    <text x="250" y="260" text-anchor="middle" font-size="10">Generate Artifacts</text>

    <!-- Run Tests -->
    <circle cx="400" cy="150" r="40" fill="#DCFCE7" stroke="#22C55E" stroke-width="2"/>
    <path d="M380,150 L420,150 M420,150 L410,140 M420,150 L410,160" stroke="#22C55E" stroke-width="2"/>
    <text x="400" y="210" text-anchor="middle">3. Run Tests</text>
    <text x="400" y="230" text-anchor="middle" font-size="10">Execute Unit Tests</text>
    <text x="400" y="245" text-anchor="middle" font-size="10">Run Integration Tests</text>
    <text x="400" y="260" text-anchor="middle" font-size="10">Code Quality Check</text>

    <!-- Prepare Deploy -->
    <circle cx="550" cy="150" r="40" fill="#FEF9C3" stroke="#EAB308" stroke-width="2"/>
    <path d="M530,150 L570,150 M550,130 L550,170" stroke="#EAB308" stroke-width="2"/>
    <text x="550" y="210" text-anchor="middle">4. Prepare Deploy</text>
    <text x="550" y="230" text-anchor="middle" font-size="10">IoT Core Certificates</text>
    <text x="550" y="245" text-anchor="middle" font-size="10">OTA Package Setup</text>
    <text x="550" y="260" text-anchor="middle" font-size="10">Deploy Scripts Config</text>

    <!-- Deploy Complete -->
    <circle cx="700" cy="150" r="40" fill="#CCFBF1" stroke="#14B8A6" stroke-width="2"/>
    <path d="M680,150 L720,150 M700,130 L685,150 L700,170" stroke="#14B8A6" stroke-width="2" fill="none"/>
    <text x="700" y="210" text-anchor="middle">5. Deploy Complete</text>
    <text x="700" y="230" text-anchor="middle" font-size="10">Verify Firmware</text>
    <text x="700" y="245" text-anchor="middle" font-size="10">Execute OTA Update</text>
    <text x="700" y="260" text-anchor="middle" font-size="10">Monitor Deployment</text>

    <!-- Connecting Arrows -->
    <defs>
      <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
        <polygon points="0 0, 10 3.5, 0 7" fill="#4B5563"/>
      </marker>
    </defs>
    <path d="M140,150 L210,150" stroke="#4B5563" stroke-width="2" marker-end="url(#arrowhead)"/>
    <path d="M290,150 L360,150" stroke="#4B5563" stroke-width="2" marker-end="url(#arrowhead)"/>
    <path d="M440,150 L510,150" stroke="#4B5563" stroke-width="2" marker-end="url(#arrowhead)"/>
    <path d="M590,150 L660,150" stroke="#4B5563" stroke-width="2" marker-end="url(#arrowhead)"/>
  </g>

  <!-- Roles -->
  <g id="roles" transform="translate(0,320)">
    <text x="400" y="0" text-anchor="middle" font-size="18" font-weight="bold">Roles</text>
    <text x="400" y="30" text-anchor="middle" font-size="14">Developer → GitHub Actions → Test Runner → Deployment Service → ESP32 Device</text>
  </g>

  <!-- Note -->
  <g id="note" transform="translate(0,380)">
    <text x="400" y="0" text-anchor="middle" font-size="14">Each stage supports automatic rollback on failure. All processes can be tracked in GitHub Actions logs.</text>
  </g>
</svg>