Event Model Diagram for PR #58

example.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 980 700">
  <!-- Canvas background -->
  <rect x="0" y="0" width="980" height="700" fill="#f8f8f8" stroke="none"/>
  
  <!-- Workflow title -->
  <text x="20" y="35" font-family="Arial, sans-serif" font-size="12" font-weight="normal" fill="#333333">
    User Account Signup
  </text>
  <!-- Slice headers -->
  <text x="230" y="68" font-family="Arial, sans-serif" font-size="11" fill="#333333" text-anchor="middle">
    Create User Account Credentials
  </text>
  <line x1="380" y1="50" x2="380" y2="680" stroke="#cccccc" stroke-width="1"/>
  <text x="530" y="68" font-family="Arial, sans-serif" font-size="11" fill="#333333" text-anchor="middle">
    Send Email Verification
  </text>
  <line x1="680" y1="50" x2="680" y2="680" stroke="#cccccc" stroke-width="1"/>
  <text x="830" y="68" font-family="Arial, sans-serif" font-size="11" fill="#333333" text-anchor="middle">
    Verify Email Address
  </text>
  <line x1="80" y1="80" x2="980" y2="80" stroke="#cccccc" stroke-width="1"/>
  <!-- Swimlanes -->
  <line x1="0" y1="80" x2="980" y2="80" stroke="#cccccc" stroke-width="1"/>
  <text x="40" y="180" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle" transform="rotate(-90 40 180)">
    UX, Automations
  </text>
  <line x1="80" y1="80" x2="80" y2="280" stroke="#cccccc" stroke-width="1"/>
  <line x1="0" y1="280" x2="980" y2="280" stroke="#cccccc" stroke-width="1"/>
  <text x="40" y="380" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle" transform="rotate(-90 40 380)">
    Commands, Projections, Queries
  </text>
  <line x1="80" y1="280" x2="80" y2="480" stroke="#cccccc" stroke-width="1"/>
  <line x1="0" y1="480" x2="980" y2="480" stroke="#cccccc" stroke-width="1"/>
  <text x="40" y="580" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle" transform="rotate(-90 40 580)">
    User Account Event Stream
  </text>
  <line x1="80" y1="480" x2="80" y2="680" stroke="#cccccc" stroke-width="1"/>
  <line x1="0" y1="680" x2="980" y2="680" stroke="#cccccc" stroke-width="1"/>
</svg>