<svg viewBox="96 0 504 496" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
  <title id="title">Session Replay SDK lifecycle</title>
  <desc id="desc">State diagram of the Flutter Session Replay standalone SDK: init(config) creates the Initialized state, start() moves to Started, stop() moves to Stopped, start() returns Stopped to Initialized, dispose() from any state reaches Disposed, and init(config) revives a disposed instance back to Initialized.</desc>

  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5"
            markerWidth="8" markerHeight="8" orient="auto">
      <path d="M0,0 L10,5 L0,10 Z" fill="#13294b" />
    </marker>
  </defs>

  <!-- ===== States (vertical spine) ===== -->
  <g transform="translate(220, 40)">
    <rect width="160" height="56" rx="8" ry="8" fill="#ffffff" stroke="#dedfe2" stroke-width="1" />
    <text x="80" y="34" text-anchor="middle"
          font-family="Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
          font-size="15" font-weight="600" fill="#13294b">Initialized</text>
  </g>

  <g transform="translate(220, 160)">
    <rect width="160" height="56" rx="8" ry="8" fill="#ffffff" stroke="#dedfe2" stroke-width="1" />
    <text x="80" y="34" text-anchor="middle"
          font-family="Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
          font-size="15" font-weight="600" fill="#13294b">Started</text>
  </g>

  <g transform="translate(220, 280)">
    <rect width="160" height="56" rx="8" ry="8" fill="#ffffff" stroke="#dedfe2" stroke-width="1" />
    <text x="80" y="34" text-anchor="middle"
          font-family="Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
          font-size="15" font-weight="600" fill="#13294b">Stopped</text>
  </g>

  <g transform="translate(220, 400)">
    <rect width="160" height="56" rx="8" ry="8" fill="#ffffff" stroke="#dedfe2" stroke-width="1" />
    <text x="80" y="34" text-anchor="middle"
          font-family="Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
          font-size="15" font-weight="600" fill="#13294b">Disposed</text>
  </g>

  <!-- ===== Spine transitions (top to bottom) ===== -->
  <!-- Initialized -> Started : start() -->
  <line x1="300" y1="104" x2="300" y2="152" stroke="#13294b" stroke-width="1.5" marker-end="url(#arrow)" />
  <text x="308" y="132"
        font-family="'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace"
        font-size="11" fill="#6f7480">start()</text>

  <!-- Started -> Stopped : stop() -->
  <line x1="300" y1="224" x2="300" y2="272" stroke="#13294b" stroke-width="1.5" marker-end="url(#arrow)" />
  <text x="308" y="252"
        font-family="'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace"
        font-size="11" fill="#6f7480">stop()</text>

  <!-- Stopped -> Disposed : dispose() (any state) -->
  <line x1="300" y1="344" x2="300" y2="392" stroke="#13294b" stroke-width="1.5" marker-end="url(#arrow)" />
  <text x="308" y="364"
        font-family="'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace"
        font-size="11" fill="#6f7480">dispose()</text>
  <text x="308" y="379"
        font-family="Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
        font-size="11" font-weight="400" fill="#6f7480">from any state</text>

  <!-- ===== Left return loop: Stopped -> Initialized : start() ===== -->
  <path d="M212,308 H140 V68 H212" fill="none" stroke="#13294b" stroke-width="1.5" marker-end="url(#arrow)" />
  <text x="148" y="192"
        font-family="'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace"
        font-size="11" fill="#6f7480">start()</text>

  <!-- ===== Right revive loop: Disposed -> Initialized : init(config) ===== -->
  <path d="M388,428 H470 V68 H388" fill="none" stroke="#13294b" stroke-width="1.5" marker-end="url(#arrow)" />
  <text x="478" y="244"
        font-family="'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace"
        font-size="11" fill="#6f7480">init(config)</text>
  <text x="478" y="259"
        font-family="Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
        font-size="11" font-weight="400" fill="#6f7480">revives</text>
</svg>
