Event Model Diagram for PR #147

example.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1540 700">
  <!-- Arrow marker definition -->
  <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="#333333" />
    </marker>
  </defs>
  
  <!-- Canvas background -->
  <rect x="0" y="0" width="1540" 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="300" y="68" font-family="Arial, sans-serif" font-size="11" fill="#333333" text-anchor="middle">
    Create User Account Credentials
  </text>
  <line x1="520" y1="50" x2="520" y2="680" stroke="#cccccc" stroke-width="1"/>
  <text x="670" y="68" font-family="Arial, sans-serif" font-size="11" fill="#333333" text-anchor="middle">
    Send Email Verification
  </text>
  <line x1="820" y1="50" x2="820" y2="680" stroke="#cccccc" stroke-width="1"/>
  <text x="1180" 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="1540" y2="80" stroke="#cccccc" stroke-width="1"/>
  <!-- Swimlanes -->
  <line x1="0" y1="80" x2="1540" 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="1540" 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="1540" 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="1540" y2="680" stroke="#cccccc" stroke-width="1"/>
  <!-- Entities -->
  <rect x="1120" y="550" width="120" height="60" fill="#9b59b6" stroke="#cccccc" stroke-width="1"/>
  <text x="1180" y="578" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Email Address</text>
  <text x="1180" y="590" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Verified</text>
  <rect x="100" y="350" width="120" height="60" fill="#4a90e2" stroke="#cccccc" stroke-width="1"/>
  <text x="160" y="372" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Create User</text>
  <text x="160" y="384" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Account</text>
  <text x="160" y="396" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Credentials</text>
  <rect x="240" y="350" width="120" height="60" fill="#f1c40f" stroke="#cccccc" stroke-width="1"/>
  <text x="300" y="378" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">User Credentials</text>
  <text x="300" y="390" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Projection</text>
  <text x="670" y="165" font-family="Arial, sans-serif" font-size="30" text-anchor="middle">⚙️</text>
  <text x="670" y="195" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">User Email</text>
  <text x="670" y="207" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Verifier</text>
  <rect x="840" y="150" width="120" height="60" fill="#ffffff" stroke="#cccccc" stroke-width="1"/>
  <text x="900" y="178" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Verify Email</text>
  <text x="900" y="190" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Address Screen</text>
  <rect x="980" y="150" width="120" height="60" fill="#ffffff" stroke="#cccccc" stroke-width="1"/>
  <text x="1040" y="178" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">User Profile</text>
  <text x="1040" y="190" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Screen</text>
  <rect x="540" y="550" width="120" height="60" fill="#9b59b6" stroke="#cccccc" stroke-width="1"/>
  <text x="600" y="572" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">User Account</text>
  <text x="600" y="584" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Credentials</text>
  <text x="600" y="596" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Created</text>
  <rect x="680" y="550" width="120" height="60" fill="#9b59b6" stroke="#cccccc" stroke-width="1"/>
  <text x="740" y="572" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Email</text>
  <text x="740" y="584" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Verification</text>
  <text x="740" y="596" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Message Sent</text>
  <rect x="540" y="350" width="120" height="60" fill="#4a90e2" stroke="#cccccc" stroke-width="1"/>
  <text x="600" y="378" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Send Email</text>
  <text x="600" y="390" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Verification</text>
  <rect x="680" y="350" width="120" height="60" fill="#f1c40f" stroke="#cccccc" stroke-width="1"/>
  <text x="740" y="372" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">User Email</text>
  <text x="740" y="384" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Verification</text>
  <text x="740" y="396" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Token Projection</text>
  <rect x="100" y="150" width="120" height="60" fill="#ffffff" stroke="#cccccc" stroke-width="1"/>
  <text x="160" y="184" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Login Screen</text>
  <rect x="240" y="150" width="120" height="60" fill="#ffffff" stroke="#cccccc" stroke-width="1"/>
  <text x="300" y="178" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">New Account</text>
  <text x="300" y="190" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Screen</text>
  <rect x="380" y="150" width="120" height="60" fill="#ffffff" stroke="#cccccc" stroke-width="1"/>
  <text x="440" y="178" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Verify Email</text>
  <text x="440" y="190" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Address Screen</text>
  <rect x="840" y="346" width="120" height="68" fill="#27ae60" stroke="#cccccc" stroke-width="1"/>
  <text x="900" y="366" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Get Account Id</text>
  <text x="900" y="378" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">For Email</text>
  <text x="900" y="390" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Verification</text>
  <text x="900" y="402" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Token</text>
  <rect x="980" y="350" width="120" height="60" fill="#4a90e2" stroke="#cccccc" stroke-width="1"/>
  <text x="1040" y="378" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Verify User</text>
  <text x="1040" y="390" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Email Address</text>
  <rect x="1120" y="350" width="120" height="60" fill="#f1c40f" stroke="#cccccc" stroke-width="1"/>
  <text x="1180" y="378" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">User Credentials</text>
  <text x="1180" y="390" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Projection</text>
  <rect x="1260" y="350" width="120" height="60" fill="#f1c40f" stroke="#cccccc" stroke-width="1"/>
  <text x="1320" y="372" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">User Email</text>
  <text x="1320" y="384" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Verification</text>
  <text x="1320" y="396" font-family="Arial, sans-serif" font-size="10" fill="#333333" text-anchor="middle">Token Projection</text>
  <rect x="1400" y="350" width="120" height="60" fill="#27ae60" stroke="#cccccc" stroke-width="1"/>
  <text x="1460" y="384" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Get User Profile</text>
  <rect x="240" y="550" width="120" height="60" fill="#9b59b6" stroke="#cccccc" stroke-width="1"/>
  <text x="300" y="572" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">User Account</text>
  <text x="300" y="584" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Credentials</text>
  <text x="300" y="596" font-family="Arial, sans-serif" font-size="10" fill="#ffffff" text-anchor="middle">Created</text>
  <!-- Connections -->
  <path d="M 250 180 L 390 180" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 300 240 L 230 240 L 230 440 L 160 440" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 160 440 L 230 440 L 230 640 L 300 640" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 300 520 L 300 320" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 300 520 L 300 120" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 390 180 L 530 180" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 600 520 L 635 520 L 635 110 L 670 110" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 670 249 L 635 249 L 635 440 L 600 440" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 600 440 L 670 440 L 670 640 L 740 640" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 740 520 L 740 320" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 900 240 L 900 444" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 990 380 L 1130 380" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1040 440 L 1110 440 L 1110 640 L 1180 640" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1180 520 L 1180 320" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1180 520 L 1250 520 L 1250 320 L 1320 320" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1180 520 L 1040 520 L 1040 120 L 900 120" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 990 180 L 1130 180" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1130 180 L 1340 180 L 1340 380 L 1550 380" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1130 180 L 1340 180 L 1340 380 L 1550 380" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
</svg>