supply_flow_diagram.svg 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <svg xmlns="http://www.w3.org/2000/svg" width="3600" height="1850" viewBox="0 0 3600 1850">
  2. <defs>
  3. <marker id="arrow" viewBox="0 0 12 12" refX="10" refY="6" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
  4. <path d="M 1 1 L 11 6 L 1 11 z" fill="#485c78"/>
  5. </marker>
  6. <filter id="shadow" x="-10%" y="-20%" width="130%" height="150%">
  7. <feDropShadow dx="0" dy="5" stdDeviation="5" flood-color="#152033" flood-opacity="0.12"/>
  8. </filter>
  9. <style>
  10. .bg { fill: #ffffff; }
  11. .title { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 44px; font-weight: 700; fill: #232323; }
  12. .node-text { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 28px; fill: #232323; text-anchor: middle; dominant-baseline: middle; }
  13. .decision-text { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 30px; font-weight: 700; fill: #232323; text-anchor: middle; dominant-baseline: middle; }
  14. .edge-label { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 24px; font-weight: 700; fill: #374b64; text-anchor: middle; dominant-baseline: middle; }
  15. .edge { fill: none; stroke: #485c78; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; marker-end: url(#arrow); }
  16. .node { rx: 22; ry: 22; filter: url(#shadow); stroke-width: 4; }
  17. .blue { fill: #ebf4ff; stroke: #457dc5; }
  18. .green { fill: #ebfaf1; stroke: #2e8c58; }
  19. .yellow { fill: #fff9e1; stroke: #c48e23; }
  20. .red { fill: #ffeeee; stroke: #c44c4c; }
  21. .gray { fill: #f7f9fc; stroke: #8291a5; }
  22. .label-bg { fill: #ffffff; stroke: #d8e0ea; stroke-width: 2; rx: 16; ry: 16; }
  23. </style>
  24. </defs>
  25. <rect class="bg" width="3600" height="1850"/>
  26. <text class="title" x="1800" y="80">&#x4F9B;&#x5E94;&#x76D1;&#x6D4B;&#x8865;&#x8D27;&#x51B3;&#x7B56;&#x6D41;&#x7A0B;</text>
  27. <rect class="node blue" x="80" y="735" width="500" height="180"/>
  28. <text class="node-text" x="330" y="797">
  29. <tspan x="330" dy="0">&#x66F4;&#x65B0;&#x6570;&#x636E;</tspan>
  30. <tspan x="330" dy="42">&#x9884;&#x6D4B;&#x9700;&#x6C42; / &#x73B0;&#x6709;&#x5E93;&#x5B58; / &#x5728;&#x9014;&#x5E93;&#x5B58;</tspan>
  31. <tspan x="330" dy="42">&#x534A;&#x6210;&#x54C1;&#x5E93;&#x5B58; / &#x5DF2;&#x4E0B;&#x5355;&#x672A;&#x8981;&#x6C42;&#x6765;&#x8D27;</tspan>
  32. </text>
  33. <rect class="node blue" x="700" y="735" width="430" height="180"/>
  34. <text class="node-text" x="915" y="805">
  35. <tspan x="915" dy="0">&#x6838;&#x7B97;&#x73B0;&#x6709;&#x53EF;&#x7528;&#x91CF;</tspan>
  36. <tspan x="915" dy="46">&#x73B0;&#x6709;&#x5E93;&#x5B58; + &#x534A;&#x6210;&#x54C1;&#x53EF;&#x7EC4;&#x88C5;&#x91CF;</tspan>
  37. </text>
  38. <polygon class="yellow" points="1430,680 1620,825 1430,970 1240,825" filter="url(#shadow)" stroke-width="4"/>
  39. <text class="decision-text" x="1430" y="806">
  40. <tspan x="1430" dy="0">&#x73B0;&#x6709;&#x53EF;&#x7528;&#x91CF;</tspan>
  41. <tspan x="1430" dy="48">&#x662F;&#x5426;&#x8986;&#x76D6;&#x9700;&#x6C42;?</tspan>
  42. </text>
  43. <rect class="node green" x="1780" y="330" width="360" height="140"/>
  44. <text class="node-text" x="1960" y="400">&#x73B0;&#x6709;&#x5E93;&#x5B58;&#x53EF;&#x8986;&#x76D6;</text>
  45. <polygon class="yellow" points="2480,285 2660,400 2480,515 2300,400" filter="url(#shadow)" stroke-width="4"/>
  46. <text class="decision-text" x="2480" y="382">
  47. <tspan x="2480" dy="0">&#x662F;&#x5426;&#x9700;&#x8981;</tspan>
  48. <tspan x="2480" dy="48">&#x7EC4;&#x88C5;&#x534A;&#x6210;&#x54C1;?</tspan>
  49. </text>
  50. <rect class="node green" x="2830" y="190" width="340" height="130"/>
  51. <text class="node-text" x="3000" y="255">&#x65E0;&#x9700;&#x6765;&#x8D27; / &#x4E0B;&#x5355;</text>
  52. <rect class="node green" x="2830" y="420" width="340" height="150"/>
  53. <text class="node-text" x="3000" y="474">
  54. <tspan x="3000" dy="0">&#x5B89;&#x6392;&#x534A;&#x6210;&#x54C1;&#x7EC4;&#x88C5;</tspan>
  55. <tspan x="3000" dy="44">&#x8F6C;&#x4E3A;&#x6210;&#x54C1;&#x5E93;&#x5B58;</tspan>
  56. </text>
  57. <rect class="node red" x="1780" y="830" width="360" height="150"/>
  58. <text class="node-text" x="1960" y="884">
  59. <tspan x="1960" dy="0">&#x73B0;&#x6709;&#x53EF;&#x7528;&#x91CF;&#x4E0D;&#x8DB3;</tspan>
  60. <tspan x="1960" dy="44">&#x8BA1;&#x7B97;&#x7F3A;&#x53E3;</tspan>
  61. </text>
  62. <polygon class="yellow" points="2480,795 2660,910 2480,1025 2300,910" filter="url(#shadow)" stroke-width="4"/>
  63. <text class="decision-text" x="2480" y="892">
  64. <tspan x="2480" dy="0">&#x5728;&#x9014;&#x5E93;&#x5B58;</tspan>
  65. <tspan x="2480" dy="48">&#x662F;&#x5426;&#x8986;&#x76D6;&#x7F3A;&#x53E3;?</tspan>
  66. </text>
  67. <rect class="node green" x="2830" y="710" width="340" height="150"/>
  68. <text class="node-text" x="3000" y="764">
  69. <tspan x="3000" dy="0">&#x8DDF;&#x8FDB;&#x5728;&#x9014;&#x5230;&#x8D27;</tspan>
  70. <tspan x="3000" dy="44">&#x66F4;&#x65B0;&#x5230;&#x8D27;&#x8BA1;&#x5212;</tspan>
  71. </text>
  72. <rect class="node red" x="2830" y="960" width="340" height="130"/>
  73. <text class="node-text" x="3000" y="1025">&#x5728;&#x9014;&#x540E;&#x4ECD;&#x6709;&#x7F3A;&#x53E3;</text>
  74. <polygon class="yellow" points="2480,1210 2660,1335 2480,1460 2300,1335" filter="url(#shadow)" stroke-width="4"/>
  75. <text class="decision-text" x="2480" y="1310">
  76. <tspan x="2480" dy="0">&#x5DF2;&#x4E0B;&#x5355;&#x672A;&#x8981;&#x6C42;&#x6765;&#x8D27;</tspan>
  77. <tspan x="2480" dy="48">&#x662F;&#x5426;&#x8986;&#x76D6;&#x7F3A;&#x53E3;?</tspan>
  78. </text>
  79. <rect class="node green" x="2830" y="1180" width="340" height="160"/>
  80. <text class="node-text" x="3000" y="1238">
  81. <tspan x="3000" dy="0">&#x5B89;&#x6392;&#x6765;&#x8D27;</tspan>
  82. <tspan x="3000" dy="44">&#x901A;&#x77E5;&#x4F9B;&#x5E94;&#x5546;&#x53D1;&#x8D27; / &#x5230;&#x8D27;</tspan>
  83. </text>
  84. <rect class="node red" x="1780" y="1275" width="360" height="160"/>
  85. <text class="node-text" x="1960" y="1333">
  86. <tspan x="1960" dy="0">&#x5DF2;&#x4E0B;&#x5355;&#x91CF;&#x4ECD;&#x4E0D;&#x8DB3;</tspan>
  87. <tspan x="1960" dy="44">&#x8BA1;&#x7B97;&#x65B0;&#x589E;&#x4E0B;&#x5355;&#x91CF;</tspan>
  88. </text>
  89. <polygon class="yellow" points="1430,1225 1620,1340 1430,1455 1240,1340" filter="url(#shadow)" stroke-width="4"/>
  90. <text class="decision-text" x="1430" y="1340">&#x662F;&#x5426;&#x6025;&#x9700;?</text>
  91. <rect class="node red" x="700" y="1125" width="430" height="150"/>
  92. <text class="node-text" x="915" y="1179">
  93. <tspan x="915" dy="0">&#x65B0;&#x589E;&#x52A0;&#x6025;&#x4E0B;&#x5355;</tspan>
  94. <tspan x="915" dy="44">&#x4F18;&#x5148;&#x6392;&#x4EA7;</tspan>
  95. </text>
  96. <rect class="node gray" x="700" y="1390" width="430" height="130"/>
  97. <text class="node-text" x="915" y="1455">&#x65B0;&#x589E;&#x5E38;&#x89C4;&#x4E0B;&#x5355;</text>
  98. <rect class="node blue" x="2830" y="610" width="340" height="130"/>
  99. <text class="node-text" x="3000" y="655">
  100. <tspan x="3000" dy="0">&#x66F4;&#x65B0;&#x7EC4;&#x88C5;&#x8BA1;&#x5212;</tspan>
  101. <tspan x="3000" dy="42">&#x56DE;&#x5199;&#x5E93;&#x5B58;&#x8DDF;&#x8E2A;</tspan>
  102. </text>
  103. <rect class="node blue" x="2830" y="890" width="340" height="130"/>
  104. <text class="node-text" x="3000" y="935">
  105. <tspan x="3000" dy="0">&#x66F4;&#x65B0;&#x5728;&#x9014;&#x5230;&#x8D27;&#x8BA1;&#x5212;</tspan>
  106. <tspan x="3000" dy="42">&#x56DE;&#x5199;&#x5E93;&#x5B58;&#x8DDF;&#x8E2A;</tspan>
  107. </text>
  108. <rect class="node blue" x="2830" y="1385" width="340" height="130"/>
  109. <text class="node-text" x="3000" y="1430">
  110. <tspan x="3000" dy="0">&#x66F4;&#x65B0;&#x6765;&#x8D27;&#x8BA1;&#x5212;</tspan>
  111. <tspan x="3000" dy="42">&#x56DE;&#x5199;&#x5E93;&#x5B58;&#x8DDF;&#x8E2A;</tspan>
  112. </text>
  113. <rect class="node blue" x="700" y="1610" width="430" height="130"/>
  114. <text class="node-text" x="915" y="1655">
  115. <tspan x="915" dy="0">&#x66F4;&#x65B0;&#x4E0B;&#x5355;&#x8BA1;&#x5212;</tspan>
  116. <tspan x="915" dy="42">&#x56DE;&#x5199;&#x5E93;&#x5B58;&#x8DDF;&#x8E2A;</tspan>
  117. </text>
  118. <rect class="node green" x="1780" y="1610" width="420" height="130"/>
  119. <text class="node-text" x="1990" y="1675">&#x6301;&#x7EED;&#x8DDF;&#x8E2A;&#x9500;&#x552E;&#x4E0E;&#x5E93;&#x5B58;</text>
  120. <path class="edge" d="M580,825 L700,825"/>
  121. <path class="edge" d="M1130,825 L1240,825"/>
  122. <path class="edge" d="M1620,825 L1780,400"/>
  123. <rect class="label-bg" x="1668" y="580" width="70" height="42"/><text class="edge-label" x="1703" y="602">&#x662F;</text>
  124. <path class="edge" d="M1620,825 L1780,905"/>
  125. <rect class="label-bg" x="1668" y="860" width="70" height="42"/><text class="edge-label" x="1703" y="882">&#x5426;</text>
  126. <path class="edge" d="M2140,400 L2300,400"/>
  127. <path class="edge" d="M2660,400 L2830,255"/>
  128. <rect class="label-bg" x="2730" y="303" width="70" height="42"/><text class="edge-label" x="2765" y="325">&#x5426;</text>
  129. <path class="edge" d="M2660,400 L2830,495"/>
  130. <rect class="label-bg" x="2730" y="428" width="70" height="42"/><text class="edge-label" x="2765" y="450">&#x662F;</text>
  131. <path class="edge" d="M2140,905 L2300,910"/>
  132. <path class="edge" d="M2660,910 L2830,785"/>
  133. <rect class="label-bg" x="2730" y="820" width="70" height="42"/><text class="edge-label" x="2765" y="842">&#x662F;</text>
  134. <path class="edge" d="M2660,910 L2830,1025"/>
  135. <rect class="label-bg" x="2730" y="942" width="70" height="42"/><text class="edge-label" x="2765" y="964">&#x5426;</text>
  136. <path class="edge" d="M3000,1090 L3000,1130 L2480,1130 L2480,1210"/>
  137. <path class="edge" d="M2660,1335 L2830,1260"/>
  138. <rect class="label-bg" x="2730" y="1270" width="70" height="42"/><text class="edge-label" x="2765" y="1292">&#x662F;</text>
  139. <path class="edge" d="M2300,1335 L2140,1355"/>
  140. <rect class="label-bg" x="2165" y="1314" width="70" height="42"/><text class="edge-label" x="2200" y="1336">&#x5426;</text>
  141. <path class="edge" d="M1780,1355 L1620,1340"/>
  142. <path class="edge" d="M1240,1340 L1130,1200"/>
  143. <rect class="label-bg" x="1160" y="1245" width="70" height="42"/><text class="edge-label" x="1195" y="1267">&#x662F;</text>
  144. <path class="edge" d="M1430,1455 L1430,1490 L1130,1455"/>
  145. <rect class="label-bg" x="1265" y="1435" width="70" height="42"/><text class="edge-label" x="1300" y="1457">&#x5426;</text>
  146. <path class="edge" d="M3000,570 L3000,610"/>
  147. <path class="edge" d="M3000,860 L3000,890"/>
  148. <path class="edge" d="M3000,1340 L3000,1385"/>
  149. <path class="edge" d="M915,1275 L915,1610"/>
  150. <path class="edge" d="M915,1520 L915,1610"/>
  151. <path class="edge" d="M3000,320 L3000,1645 L2200,1675"/>
  152. <path class="edge" d="M3000,740 L3000,1665 L2200,1675"/>
  153. <path class="edge" d="M3000,1020 L3000,1680 L2200,1675"/>
  154. <path class="edge" d="M3000,1515 L3000,1700 L2200,1675"/>
  155. <path class="edge" d="M1130,1675 L1780,1675"/>
  156. </svg>