Replace Mermaid roadmap with SVG image

README.md

@@ -29,20 +29,7 @@
 
 ## 学习路线图
 
-```mermaid
+![学习路线图](_images/roadmap.svg)
-graph LR
-    Start[Docker 学习入口] --> Ch1[第1章：Docker 简介]
-
-    Ch1 --> Role1["运维新手<br/>第1-4章"]
-    Ch1 --> Role2["开发者<br/>第1-3章 → 第5-8章"]
-    Ch1 --> Role3["DevOps 工程师<br/>第1章 → 第9-14章 → 第18章"]
-    Ch1 --> Role4["架构师<br/>第1章 → 第15-21章"]
-
-    Role1 --> End1["掌握基本操作"]
-    Role2 --> End2["构建与部署应用"]
-    Role3 --> End3["自动化与运维"]
-    Role4 --> End4["设计容器方案"]
-```
 | 读者角色 | 学习重点 | 核心成果 |
 |---------|---------|---------|
 | **运维新手** | 第1-4章 | 掌握容器的基本概念与操作 |

_images/roadmap.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 320" font-family="system-ui, -apple-system, sans-serif">
+  <defs>
+    <style>
+      .box { rx: 8; ry: 8; stroke-width: 1.5; }
+      .start { fill: #e8f5e9; stroke: #4caf50; }
+      .mid { fill: #e3f2fd; stroke: #2196f3; }
+      .role { fill: #fff3e0; stroke: #ff9800; }
+      .end { fill: #f3e5f5; stroke: #9c27b0; }
+      .txt { font-size: 13px; fill: #333; text-anchor: middle; dominant-baseline: central; }
+      .txt-sm { font-size: 11px; fill: #666; text-anchor: middle; dominant-baseline: central; }
+      .arrow { stroke: #888; stroke-width: 1.5; fill: none; marker-end: url(#arrowhead); }
+    </style>
+    <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <polygon points="0 0, 8 3, 0 6" fill="#888"/>
+    </marker>
+  </defs>
+
+  <!-- Start -->
+  <rect class="box start" x="20" y="130" width="130" height="44"/>
+  <text class="txt" x="85" y="152">Docker 学习入口</text>
+
+  <!-- Ch1 -->
+  <rect class="box mid" x="200" y="130" width="150" height="44"/>
+  <text class="txt" x="275" y="152">第1章：Docker 简介</text>
+
+  <!-- Arrow Start -> Ch1 -->
+  <line class="arrow" x1="150" y1="152" x2="198" y2="152"/>
+
+  <!-- Role 1: 运维新手 -->
+  <rect class="box role" x="420" y="10" width="200" height="44"/>
+  <text class="txt" x="520" y="25">运维新手</text>
+  <text class="txt-sm" x="520" y="42">第1-4章</text>
+
+  <!-- Role 2: 开发者 -->
+  <rect class="box role" x="420" y="80" width="200" height="44"/>
+  <text class="txt" x="520" y="95">开发者</text>
+  <text class="txt-sm" x="520" y="112">第1-3章 → 第5-8章</text>
+
+  <!-- Role 3: DevOps 工程师 -->
+  <rect class="box role" x="420" y="190" width="200" height="44"/>
+  <text class="txt" x="520" y="205">DevOps 工程师</text>
+  <text class="txt-sm" x="520" y="222">第1章 → 第9-14章 → 第18章</text>
+
+  <!-- Role 4: 架构师 -->
+  <rect class="box role" x="420" y="260" width="200" height="44"/>
+  <text class="txt" x="520" y="275">架构师</text>
+  <text class="txt-sm" x="520" y="292">第1章 → 第15-21章</text>
+
+  <!-- Arrows Ch1 -> Roles -->
+  <path class="arrow" d="M350,152 L370,152 L370,32 L418,32"/>
+  <path class="arrow" d="M350,152 L370,152 L370,102 L418,102"/>
+  <path class="arrow" d="M350,152 L370,152 L370,212 L418,212"/>
+  <path class="arrow" d="M350,152 L370,152 L370,282 L418,282"/>
+
+  <!-- End 1 -->
+  <rect class="box end" x="700" y="10" width="200" height="44"/>
+  <text class="txt" x="800" y="32">掌握基本操作</text>
+
+  <!-- End 2 -->
+  <rect class="box end" x="700" y="80" width="200" height="44"/>
+  <text class="txt" x="800" y="102">构建与部署应用</text>
+
+  <!-- End 3 -->
+  <rect class="box end" x="700" y="190" width="200" height="44"/>
+  <text class="txt" x="800" y="212">自动化与运维</text>
+
+  <!-- End 4 -->
+  <rect class="box end" x="700" y="260" width="200" height="44"/>
+  <text class="txt" x="800" y="282">设计容器方案</text>
+
+  <!-- Arrows Roles -> Ends -->
+  <line class="arrow" x1="620" y1="32" x2="698" y2="32"/>
+  <line class="arrow" x1="620" y1="102" x2="698" y2="102"/>
+  <line class="arrow" x1="620" y1="212" x2="698" y2="212"/>
+  <line class="arrow" x1="620" y1="282" x2="698" y2="282"/>
+</svg>