返回 ppt-master
sankey_chart.svg
根目录 / skills / ppt-master / templates / charts / sankey_chart.svg
1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"
2 font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
3 font-size="12">
4 <!--
5 Sankey Data Flow Chart Template
6 Purpose: Precise value flow visualization, budget allocation, process mapping
7 Use cases: Budget distribution, energy consumption, resource allocation
8 Feature: Mathematically exact paths (Total Input = Total Output)
9 -->
10 <defs>
11 <!-- Layer 1 to Layer 2 Gradients -->
12 <linearGradient id="gPR" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#3B82F6" stop-opacity="0.6"/><stop offset="100%" stop-color="#8B5CF6" stop-opacity="0.6"/></linearGradient>
13 <linearGradient id="gPS" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#3B82F6" stop-opacity="0.6"/><stop offset="100%" stop-color="#F43F5E" stop-opacity="0.6"/></linearGradient>
14 <linearGradient id="gPO" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#3B82F6" stop-opacity="0.6"/><stop offset="100%" stop-color="#F59E0B" stop-opacity="0.6"/></linearGradient>
15 <linearGradient id="gPA" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#3B82F6" stop-opacity="0.6"/><stop offset="100%" stop-color="#64748B" stop-opacity="0.6"/></linearGradient>
16 <linearGradient id="gSR" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#10B981" stop-opacity="0.6"/><stop offset="100%" stop-color="#8B5CF6" stop-opacity="0.6"/></linearGradient>
17 <linearGradient id="gSS" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#10B981" stop-opacity="0.6"/><stop offset="100%" stop-color="#F43F5E" stop-opacity="0.6"/></linearGradient>
18 <linearGradient id="gSO" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#10B981" stop-opacity="0.6"/><stop offset="100%" stop-color="#F59E0B" stop-opacity="0.6"/></linearGradient>
19 <linearGradient id="gIS" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#6366F1" stop-opacity="0.6"/><stop offset="100%" stop-color="#F43F5E" stop-opacity="0.6"/></linearGradient>
20 <linearGradient id="gIA" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#6366F1" stop-opacity="0.6"/><stop offset="100%" stop-color="#64748B" stop-opacity="0.6"/></linearGradient>
21 <!-- Layer 2 to Layer 3 Gradients -->
22 <linearGradient id="gRP" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.6"/><stop offset="100%" stop-color="#0EA5E9" stop-opacity="0.6"/></linearGradient>
23 <linearGradient id="gRI" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.6"/><stop offset="100%" stop-color="#14B8A6" stop-opacity="0.6"/></linearGradient>
24 <linearGradient id="gSP" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#F43F5E" stop-opacity="0.6"/><stop offset="100%" stop-color="#0EA5E9" stop-opacity="0.6"/></linearGradient>
25 <linearGradient id="gSM" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#F43F5E" stop-opacity="0.6"/><stop offset="100%" stop-color="#EC4899" stop-opacity="0.6"/></linearGradient>
26 <linearGradient id="gOP" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#F59E0B" stop-opacity="0.6"/><stop offset="100%" stop-color="#0EA5E9" stop-opacity="0.6"/></linearGradient>
27 <linearGradient id="gOI" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#F59E0B" stop-opacity="0.6"/><stop offset="100%" stop-color="#14B8A6" stop-opacity="0.6"/></linearGradient>
28 <linearGradient id="gOO" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#F59E0B" stop-opacity="0.6"/><stop offset="100%" stop-color="#78716C" stop-opacity="0.6"/></linearGradient>
29 <linearGradient id="gAP" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#64748B" stop-opacity="0.6"/><stop offset="100%" stop-color="#0EA5E9" stop-opacity="0.6"/></linearGradient>
30 <linearGradient id="gAO" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#64748B" stop-opacity="0.6"/><stop offset="100%" stop-color="#78716C" stop-opacity="0.6"/></linearGradient>
31 </defs>
32 <rect width="1280" height="720" fill="#F8FAFC"/>
33 <!-- ==================== Header ==================== -->
34 <g id="header" data-pptx-bounds="320 20 640 70">
35 <text x="640" y="50" font-size="32" font-weight="800" fill="#0F172A" text-anchor="middle">Annual Budget Allocation Flow</text>
36 <text x="640" y="80" font-size="15" font-weight="600" fill="#64748B" letter-spacing="1" text-anchor="middle">2025 FY · TOTAL BUDGET: $100M · ZERO-LOSS SANKEY DISTRIBUTION</text>
37 </g>
38 <!-- Column Labels -->
39 <g id="column-labels" data-pptx-bounds="40 100 1200 25">
40 <text x="120" y="115" font-size="13" font-weight="800" fill="#94A3B8" letter-spacing="1" text-anchor="middle">REVENUE SOURCE</text>
41 <text x="640" y="115" font-size="13" font-weight="800" fill="#94A3B8" letter-spacing="1" text-anchor="middle">DEPARTMENT</text>
42 <text x="1160" y="115" font-size="13" font-weight="800" fill="#94A3B8" letter-spacing="1" text-anchor="middle">EXPENSE TYPE</text>
43 </g>
44 <!-- ==================== FLOW PATHS (Background) ==================== -->
45 <g id="sankey-flows" data-pptx-bounds="200 125 880 520">
46 <!-- Layer 1 to Layer 2 -->
47 <!-- Product Sales flows -->
48 <rect x="200" y="130" width="360" height="112.5" fill="url(#gPR)"/>
49 <path d="M 200 276.25 C 380 276.25, 380 341.25, 560 341.25" fill="none" stroke="url(#gPS)" stroke-width="67.5"/>
50 <path d="M 200 343.75 C 380 343.75, 380 496.25, 560 496.25" fill="none" stroke="url(#gPO)" stroke-width="67.5"/>
51 <path d="M 200 388.75 C 380 388.75, 380 606.25, 560 606.25" fill="none" stroke="url(#gPA)" stroke-width="22.5"/>
52 <!-- Service Revenue flows -->
53 <path d="M 200 442.5 C 380 442.5, 380 265, 560 265" fill="none" stroke="url(#gSR)" stroke-width="45"/>
54 <path d="M 200 487.5 C 380 487.5, 380 397.5, 560 397.5" fill="none" stroke="url(#gSS)" stroke-width="45"/>
55 <path d="M 200 532.5 C 380 532.5, 380 552.5, 560 552.5" fill="none" stroke="url(#gSO)" stroke-width="45"/>
56 <!-- Investment Income flows -->
57 <path d="M 200 586.25 C 380 586.25, 380 431.25, 560 431.25" fill="none" stroke="url(#gIS)" stroke-width="22.5"/>
58 <path d="M 200 608.75 C 380 608.75, 380 628.75, 560 628.75" fill="none" stroke="url(#gIA)" stroke-width="22.5"/>
59 <!-- Layer 2 to Layer 3 -->
60 <!-- R&D flows -->
61 <rect x="720" y="130" width="360" height="126" fill="url(#gRP)"/>
62 <path d="M 720 271.75 C 900 271.75, 900 500.75, 1080 500.75" fill="none" stroke="url(#gRI)" stroke-width="31.5"/>
63 <!-- Sales flows -->
64 <path d="M 720 330 C 900 330, 900 278.5, 1080 278.5" fill="none" stroke="url(#gSP)" stroke-width="45"/>
65 <path d="M 720 397.5 C 900 397.5, 900 420, 1080 420" fill="none" stroke="url(#gSM)" stroke-width="90"/>
66 <!-- Operations flows -->
67 <path d="M 720 485 C 900 485, 900 323.5, 1080 323.5" fill="none" stroke="url(#gOP)" stroke-width="45"/>
68 <path d="M 720 536.75 C 900 536.75, 900 545.75, 1080 545.75" fill="none" stroke="url(#gOI)" stroke-width="58.5"/>
69 <path d="M 720 570.5 C 900 570.5, 900 599.5, 1080 599.5" fill="none" stroke="url(#gOO)" stroke-width="9"/>
70 <!-- Admin flows -->
71 <path d="M 720 599.5 C 900 599.5, 900 350.5, 1080 350.5" fill="none" stroke="url(#gAP)" stroke-width="9"/>
72 <rect x="720" y="604" width="360" height="36" fill="url(#gAO)"/>
73 </g>
74 <!-- ==================== LAYER 1: Revenue Sources ==================== -->
75 <g id="revenue-sources" data-pptx-bounds="40 130 160 490">
76 <rect x="40" y="130" width="160" height="270" rx="4" fill="#3B82F6"/>
77 <text x="120" y="255" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Product Sales</text>
78 <text x="120" y="280" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$60M</text>
79 <rect x="40" y="420" width="160" height="135" rx="4" fill="#10B981"/>
80 <text x="120" y="480" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Service Revenue</text>
81 <text x="120" y="505" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$30M</text>
82 <rect x="40" y="575" width="160" height="45" rx="4" fill="#6366F1"/>
83 <text x="120" y="603" font-size="15" font-weight="800" fill="#FFFFFF" text-anchor="middle">Investment $10M</text>
84 </g>
85 <!-- ==================== LAYER 2: Departments ==================== -->
86 <g id="department-allocations" data-pptx-bounds="560 130 160 510">
87 <rect x="560" y="130" width="160" height="157.5" rx="4" fill="#8B5CF6"/>
88 <text x="640" y="202" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">R&amp;D</text>
89 <text x="640" y="227" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$35M</text>
90 <rect x="560" y="307.5" width="160" height="135" rx="4" fill="#F43F5E"/>
91 <text x="640" y="368" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Sales &amp; Marketing</text>
92 <text x="640" y="393" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$30M</text>
93 <rect x="560" y="462.5" width="160" height="112.5" rx="4" fill="#F59E0B"/>
94 <text x="640" y="512" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Operations</text>
95 <text x="640" y="537" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$25M</text>
96 <rect x="560" y="595" width="160" height="45" rx="4" fill="#64748B"/>
97 <text x="640" y="623" font-size="15" font-weight="800" fill="#FFFFFF" text-anchor="middle">Admin $10M</text>
98 </g>
99 <!-- ==================== LAYER 3: Expense Types ==================== -->
100 <g id="expense-types" data-pptx-bounds="1080 130 160 510">
101 <rect x="1080" y="130" width="160" height="225" rx="4" fill="#0EA5E9"/>
102 <text x="1160" y="235" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Personnel</text>
103 <text x="1160" y="260" font-size="22" font-weight="800" fill="#FFFFFF" text-anchor="middle">$50M</text>
104 <rect x="1080" y="375" width="160" height="90" rx="4" fill="#EC4899"/>
105 <text x="1160" y="413" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Marketing</text>
106 <text x="1160" y="438" font-size="20" font-weight="800" fill="#FFFFFF" text-anchor="middle">$20M</text>
107 <rect x="1080" y="485" width="160" height="90" rx="4" fill="#14B8A6"/>
108 <text x="1160" y="523" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Infrastructure</text>
109 <text x="1160" y="548" font-size="20" font-weight="800" fill="#FFFFFF" text-anchor="middle">$20M</text>
110 <rect x="1080" y="595" width="160" height="45" rx="4" fill="#78716C"/>
111 <text x="1160" y="623" font-size="15" font-weight="800" fill="#FFFFFF" text-anchor="middle">Other $10M</text>
112 </g>
113 <!-- ==================== Summary Stats ==================== -->
114 <g id="stats" data-pptx-bounds="40 655 1200 50">
115 <rect x="40" y="655" width="1200" height="50" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/>
116 <!-- Total Budget -->
117 <text x="160" y="685" font-size="13" font-weight="700" fill="#64748B" text-anchor="middle">Total Budget</text>
118 <text x="260" y="686" font-size="18" font-weight="800" fill="#0F172A" text-anchor="middle">$100M</text>
119 <line x1="320" y1="665" x2="320" y2="695" stroke="#E2E8F0" stroke-width="1.5"/>
120 <!-- Largest Dept -->
121 <text x="440" y="685" font-size="13" font-weight="700" fill="#64748B" text-anchor="middle">Largest Dept</text>
122 <text x="540" y="686" font-size="18" font-weight="800" fill="#8B5CF6" text-anchor="middle">R&amp;D (35%)</text>
123 <line x1="620" y1="665" x2="620" y2="695" stroke="#E2E8F0" stroke-width="1.5"/>
124 <!-- Top Expense -->
125 <text x="740" y="685" font-size="13" font-weight="700" fill="#64748B" text-anchor="middle">Top Expense</text>
126 <text x="860" y="686" font-size="18" font-weight="800" fill="#0EA5E9" text-anchor="middle">Personnel (50%)</text>
127 <line x1="940" y1="665" x2="940" y2="695" stroke="#E2E8F0" stroke-width="1.5"/>
128 <!-- Operational Ratio -->
129 <text x="1060" y="685" font-size="13" font-weight="700" fill="#64748B" text-anchor="middle">Operational Ratio</text>
130 <text x="1170" y="686" font-size="18" font-weight="800" fill="#F59E0B" text-anchor="middle">25%</text>
131 </g>
132 </svg>
133
133 lines Plain Text