Event Model Diagram for PR #148

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="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>
  <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>
  <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="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="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="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="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="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>
  <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>
  <!-- Connections -->
  <path d="M 220 180 L 220 180 L 240 180" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 300 210 L 300 350 L 160 350" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 160 410 L 160 550 L 300 550" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 300 550 L 300 410 L 300 410" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 300 550 L 300 210 L 300 210" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 360 180 L 360 180 L 380 180" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 600 550 L 600 219 L 670 219" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 670 219 L 670 350 L 600 350" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 600 410 L 600 550 L 740 550" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 740 550 L 740 410 L 740 410" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 900 210 L 900 346 L 900 346" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 960 380 L 960 380 L 980 380" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1040 410 L 1040 550 L 1180 550" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1180 550 L 1180 410 L 1180 410" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1180 550 L 1180 410 L 1320 410" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1180 550 L 1180 210 L 900 210" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 960 180 L 960 180 L 980 180" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1100 180 L 1100 380 L 1400 380" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
  <path d="M 1100 180 L 1100 380 L 1400 380" fill="none" stroke="#333333" stroke-width="2" marker-end="url(#arrowhead)" />
</svg>