149 lines
15 KiB
XML
149 lines
15 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
|
<!--
|
|
Numbered Steps Flow Template
|
|
Usage: Ordered processes, staged workflows, methodology implementation
|
|
Scenarios: Implementation paths, user journeys, operational guidelines
|
|
Supports: 5 horizontal steps
|
|
-->
|
|
<defs>
|
|
<!-- Standard Card Shadow -->
|
|
<filter id="cardShadow" x="-15%" y="-15%" width="130%" height="130%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
|
|
<feOffset dx="0" dy="2" result="offsetblur"/>
|
|
<feFlood flood-color="#0F172A" flood-opacity="0.06" result="shadowColor"/>
|
|
<feComposite in="shadowColor" in2="offsetblur" operator="in" result="shadow"/>
|
|
<feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<!-- Background Gradient -->
|
|
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#F8FAFC"/>
|
|
<stop offset="100%" stop-color="#F1F5F9"/>
|
|
</linearGradient>
|
|
<!-- Arrow Marker for Connectors -->
|
|
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto">
|
|
<path d="M 0 1 L 8 5 L 0 9 Z" fill="#94A3B8"/>
|
|
</marker>
|
|
</defs>
|
|
<!-- Background -->
|
|
<rect width="1280" height="720" fill="url(#bgGrad)"/>
|
|
<!-- Title Area -->
|
|
<text x="640" y="65" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
|
font-size="36" font-weight="800" fill="#0F172A" letter-spacing="-0.5">Five-Step Implementation Plan</text>
|
|
<text x="640" y="100" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
|
font-size="14" font-weight="700" fill="#64748B" letter-spacing="1.5">END-TO-END EXECUTION STRATEGY · FROM PLANNING TO LAUNCH</text>
|
|
<!-- Step Connecting Arrows -->
|
|
<line x1="205" y1="265" x2="355" y2="265" stroke="#CBD5E1" stroke-width="2.5" marker-end="url(#arrow)"/>
|
|
<line x1="435" y1="265" x2="585" y2="265" stroke="#CBD5E1" stroke-width="2.5" marker-end="url(#arrow)"/>
|
|
<line x1="665" y1="265" x2="815" y2="265" stroke="#CBD5E1" stroke-width="2.5" marker-end="url(#arrow)"/>
|
|
<line x1="895" y1="265" x2="1045" y2="265" stroke="#CBD5E1" stroke-width="2.5" marker-end="url(#arrow)"/>
|
|
<!-- ==================== Step 1: Discovery ==================== -->
|
|
<g filter="url(#cardShadow)">
|
|
<circle cx="165" cy="265" r="38" fill="#8B5CF6"/>
|
|
<circle cx="165" cy="265" r="32" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-opacity="0.4"/>
|
|
<text x="165" y="261" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="24" font-weight="800" fill="#FFFFFF">01</text>
|
|
<text x="165" y="279" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="9" font-weight="700" fill="#FFFFFF" fill-opacity="0.8" letter-spacing="1">STEP</text>
|
|
</g>
|
|
<line x1="165" y1="303" x2="165" y2="355" stroke="#8B5CF6" stroke-width="2" stroke-dasharray="4 4" stroke-opacity="0.5"/>
|
|
<g filter="url(#cardShadow)">
|
|
<rect x="60" y="355" width="210" height="280" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
|
|
<rect x="60" y="380" width="4" height="36" fill="#8B5CF6"/>
|
|
<text x="80" y="396" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#0F172A">Discovery</text>
|
|
<text x="80" y="414" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#8B5CF6">Requirements</text>
|
|
<line x1="80" y1="435" x2="250" y2="435" stroke="#F1F5F9" stroke-width="2"/>
|
|
<text x="80" y="465" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Define business goals</text>
|
|
<text x="80" y="490" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Conduct user research</text>
|
|
<text x="80" y="515" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Analyze competitors</text>
|
|
<text x="80" y="540" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Establish core metrics</text>
|
|
<rect x="80" y="575" width="70" height="24" rx="4" fill="#F5F3FF"/>
|
|
<text x="115" y="591" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#8B5CF6">2 Weeks</text>
|
|
</g>
|
|
<!-- ==================== Step 2: Design ==================== -->
|
|
<g filter="url(#cardShadow)">
|
|
<circle cx="395" cy="265" r="38" fill="#3B82F6"/>
|
|
<circle cx="395" cy="265" r="32" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-opacity="0.4"/>
|
|
<text x="395" y="261" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="24" font-weight="800" fill="#FFFFFF">02</text>
|
|
<text x="395" y="279" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="9" font-weight="700" fill="#FFFFFF" fill-opacity="0.8" letter-spacing="1">STEP</text>
|
|
</g>
|
|
<line x1="395" y1="303" x2="395" y2="355" stroke="#3B82F6" stroke-width="2" stroke-dasharray="4 4" stroke-opacity="0.5"/>
|
|
<g filter="url(#cardShadow)">
|
|
<rect x="290" y="355" width="210" height="280" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
|
|
<rect x="290" y="380" width="4" height="36" fill="#3B82F6"/>
|
|
<text x="310" y="396" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#0F172A">Design</text>
|
|
<text x="310" y="414" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#3B82F6">Architecture</text>
|
|
<line x1="310" y1="435" x2="480" y2="435" stroke="#F1F5F9" stroke-width="2"/>
|
|
<text x="310" y="465" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Architecture review</text>
|
|
<text x="310" y="490" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Tech stack selection</text>
|
|
<text x="310" y="515" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Milestone planning</text>
|
|
<text x="310" y="540" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Resource allocation</text>
|
|
<rect x="310" y="575" width="70" height="24" rx="4" fill="#EFF6FF"/>
|
|
<text x="345" y="591" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#3B82F6">3 Weeks</text>
|
|
</g>
|
|
<!-- ==================== Step 3: Development ==================== -->
|
|
<g filter="url(#cardShadow)">
|
|
<circle cx="625" cy="265" r="38" fill="#10B981"/>
|
|
<circle cx="625" cy="265" r="32" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-opacity="0.4"/>
|
|
<text x="625" y="261" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="24" font-weight="800" fill="#FFFFFF">03</text>
|
|
<text x="625" y="279" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="9" font-weight="700" fill="#FFFFFF" fill-opacity="0.8" letter-spacing="1">STEP</text>
|
|
</g>
|
|
<line x1="625" y1="303" x2="625" y2="355" stroke="#10B981" stroke-width="2" stroke-dasharray="4 4" stroke-opacity="0.5"/>
|
|
<g filter="url(#cardShadow)">
|
|
<rect x="520" y="355" width="210" height="280" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
|
|
<rect x="520" y="380" width="4" height="36" fill="#10B981"/>
|
|
<text x="540" y="396" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#0F172A">Development</text>
|
|
<text x="540" y="414" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#10B981">Implementation</text>
|
|
<line x1="540" y1="435" x2="710" y2="435" stroke="#F1F5F9" stroke-width="2"/>
|
|
<text x="540" y="465" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Core module build</text>
|
|
<text x="540" y="490" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· CI/CD integration</text>
|
|
<text x="540" y="515" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Code review process</text>
|
|
<text x="540" y="540" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Unit test coverage</text>
|
|
<rect x="540" y="575" width="70" height="24" rx="4" fill="#ECFDF5"/>
|
|
<text x="575" y="591" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#10B981">6 Weeks</text>
|
|
</g>
|
|
<!-- ==================== Step 4: Testing ==================== -->
|
|
<g filter="url(#cardShadow)">
|
|
<circle cx="855" cy="265" r="38" fill="#F59E0B"/>
|
|
<circle cx="855" cy="265" r="32" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-opacity="0.4"/>
|
|
<text x="855" y="261" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="24" font-weight="800" fill="#FFFFFF">04</text>
|
|
<text x="855" y="279" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="9" font-weight="700" fill="#FFFFFF" fill-opacity="0.8" letter-spacing="1">STEP</text>
|
|
</g>
|
|
<line x1="855" y1="303" x2="855" y2="355" stroke="#F59E0B" stroke-width="2" stroke-dasharray="4 4" stroke-opacity="0.5"/>
|
|
<g filter="url(#cardShadow)">
|
|
<rect x="750" y="355" width="210" height="280" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
|
|
<rect x="750" y="380" width="4" height="36" fill="#F59E0B"/>
|
|
<text x="770" y="396" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#0F172A">Testing</text>
|
|
<text x="770" y="414" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#F59E0B">Validation</text>
|
|
<line x1="770" y1="435" x2="940" y2="435" stroke="#F1F5F9" stroke-width="2"/>
|
|
<text x="770" y="465" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Regression testing</text>
|
|
<text x="770" y="490" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Performance load test</text>
|
|
<text x="770" y="515" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· User acceptance (UAT)</text>
|
|
<text x="770" y="540" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Bug fix loop</text>
|
|
<rect x="770" y="575" width="70" height="24" rx="4" fill="#FFFBEB"/>
|
|
<text x="805" y="591" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#D97706">3 Weeks</text>
|
|
</g>
|
|
<!-- ==================== Step 5: Launch ==================== -->
|
|
<g filter="url(#cardShadow)">
|
|
<circle cx="1085" cy="265" r="38" fill="#F43F5E"/>
|
|
<circle cx="1085" cy="265" r="32" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-opacity="0.4"/>
|
|
<text x="1085" y="261" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="24" font-weight="800" fill="#FFFFFF">05</text>
|
|
<text x="1085" y="279" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="9" font-weight="700" fill="#FFFFFF" fill-opacity="0.8" letter-spacing="1">STEP</text>
|
|
</g>
|
|
<line x1="1085" y1="303" x2="1085" y2="355" stroke="#F43F5E" stroke-width="2" stroke-dasharray="4 4" stroke-opacity="0.5"/>
|
|
<g filter="url(#cardShadow)">
|
|
<rect x="980" y="355" width="210" height="280" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
|
|
<rect x="980" y="380" width="4" height="36" fill="#F43F5E"/>
|
|
<text x="1000" y="396" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="16" font-weight="800" fill="#0F172A">Launch</text>
|
|
<text x="1000" y="414" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#F43F5E">Operations</text>
|
|
<line x1="1000" y1="435" x2="1170" y2="435" stroke="#F1F5F9" stroke-width="2"/>
|
|
<text x="1000" y="465" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Canary release strategy</text>
|
|
<text x="1000" y="490" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Monitor & alerts setup</text>
|
|
<text x="1000" y="515" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Data impact tracking</text>
|
|
<text x="1000" y="540" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#475569">· Continuous iteration</text>
|
|
<rect x="1000" y="575" width="70" height="24" rx="4" fill="#FFF1F2"/>
|
|
<text x="1035" y="591" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="700" fill="#E11D48">Ongoing</text>
|
|
</g>
|
|
<!-- Footer Note -->
|
|
<text x="640" y="690" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="500" fill="#94A3B8">
|
|
Total duration ~14 weeks · Phases can be scaled based on project size
|
|
</text>
|
|
</svg>
|