-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsvg-preview.html
More file actions
123 lines (116 loc) · 9.88 KB
/
Copy pathsvg-preview.html
File metadata and controls
123 lines (116 loc) · 9.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Mermaid → SVG 转换效果预览</title>
<style>
body { font-family: -apple-system, 'PingFang SC', sans-serif; background: #eef2f7; margin: 0; padding: 40px 20px; color: #1e293b; }
.container { max-width: 1100px; margin: 0 auto; }
h1 { font-size: 26px; text-align: center; margin-bottom: 6px; }
.subtitle { text-align: center; color: #64748b; margin-bottom: 40px; font-size: 14px; }
.section { background: #fff; border-radius: 12px; padding: 24px 32px; margin-bottom: 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.section h2 { font-size: 18px; margin: 0 0 6px; color: #1e293b; }
.section .meta { color: #64748b; font-size: 12px; margin-bottom: 20px; }
.section .badge { display: inline-block; background: #10b981; color: #fff; font-size: 11px; padding: 2px 10px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }
.img-wrap { margin-bottom: 24px; }
.img-wrap p { font-size: 12px; color: #475569; margin: 0 0 8px; font-weight: 600; }
.img-wrap img { width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; display: block; }
.stat { background: #1e293b; color: #f1f5f9; padding: 16px 24px; border-radius: 10px; margin-bottom: 28px; font-size: 13px; text-align: center; }
.stat strong { color: #10b981; font-size: 18px; }
</style>
</head>
<body>
<div class="container">
<h1>Mermaid / ASCII → SVG 转换完成</h1>
<p class="subtitle">统一单色调技术文档风格 · 克制色彩 · 矢量化可扩展</p>
<div class="stat">
共转换 <strong>65 张</strong> SVG · 覆盖 <strong>5 篇文章</strong> · 风格统一、色彩克制、语义一致
</div>
<div class="section">
<h2>《并行 Claude 代理团队构建 C 编译器》<span class="badge">17 张</span></h2>
<div class="meta">claude-parallel-agents-c-compiler.md · 15 个 Mermaid + 2 个 PNG→SVG</div>
<div class="img-wrap"><p>01 · 人机协作模式</p><img src="/img/claude-c-compiler/human-loop.svg"></div>
<div class="img-wrap"><p>02 · 循环架构</p><img src="/img/claude-c-compiler/loop-architecture.svg"></div>
<div class="img-wrap"><p>03 · 单代理 vs 并行</p><img src="/img/claude-c-compiler/single-vs-parallel.svg"></div>
<div class="img-wrap"><p>04 · 并行架构</p><img src="/img/claude-c-compiler/parallel-architecture.svg"></div>
<div class="img-wrap"><p>05 · 任务锁定</p><img src="/img/claude-c-compiler/task-locking.svg"></div>
<div class="img-wrap"><p>06 · 代理生命周期</p><img src="/img/claude-c-compiler/agent-lifecycle.svg"></div>
<div class="img-wrap"><p>07 · 测试质量</p><img src="/img/claude-c-compiler/test-quality.svg"></div>
<div class="img-wrap"><p>08 · 上下文污染</p><img src="/img/claude-c-compiler/context-pollution.svg"></div>
<div class="img-wrap"><p>09 · GCC 预言机</p><img src="/img/claude-c-compiler/gcc-oracle.svg"></div>
<div class="img-wrap"><p>10 · 角色分工</p><img src="/img/claude-c-compiler/role-division.svg"></div>
<div class="img-wrap"><p>11 · 编译器局限</p><img src="/img/claude-c-compiler/limitations.svg"></div>
<div class="img-wrap"><p>12 · 成本饼图</p><img src="/img/claude-c-compiler/cost-breakdown.svg"></div>
<div class="img-wrap"><p>13 · 范式转变</p><img src="/img/claude-c-compiler/paradigm-shift.svg"></div>
<div class="img-wrap"><p>14 · 安全风险</p><img src="/img/claude-c-compiler/security-risks.svg"></div>
<div class="img-wrap"><p>15 · 可复用框架</p><img src="/img/claude-c-compiler/reusable-framework.svg"></div>
<div class="img-wrap"><p>16 · 并行代理团队（封面）</p><img src="/img/claude-c-compiler/agent-team-parallel.svg"></div>
<div class="img-wrap"><p>17 · 编译流水线</p><img src="/img/claude-c-compiler/compiler-pipeline.svg"></div>
</div>
<div class="section">
<h2>《Virtual Kubelet 源码深度解析》<span class="badge">10 张</span></h2>
<div class="meta">virtual-kubelet-ha-deep-dive.md · 10 个 Mermaid</div>
<div class="img-wrap"><p>01 · 架构总览</p><img src="/img/virtual-kubelet-ha/architecture-overview.svg"></div>
<div class="img-wrap"><p>02 · 分层架构</p><img src="/img/virtual-kubelet-ha/layered-architecture.svg"></div>
<div class="img-wrap"><p>03 · Lease Controller</p><img src="/img/virtual-kubelet-ha/lease-controller.svg"></div>
<div class="img-wrap"><p>04 · Ping 检测</p><img src="/img/virtual-kubelet-ha/ping-detection.svg"></div>
<div class="img-wrap"><p>05 · 三路合并</p><img src="/img/virtual-kubelet-ha/three-way-merge.svg"></div>
<div class="img-wrap"><p>06 · 三队列架构</p><img src="/img/virtual-kubelet-ha/three-queues.svg"></div>
<div class="img-wrap"><p>07 · 丢失 Pod 检测</p><img src="/img/virtual-kubelet-ha/lost-pod-detection.svg"></div>
<div class="img-wrap"><p>08 · 工作队列重试</p><img src="/img/virtual-kubelet-ha/work-queue-retry.svg"></div>
<div class="img-wrap"><p>09 · Lease 多层防护</p><img src="/img/virtual-kubelet-ha/lease-protection.svg"></div>
<div class="img-wrap"><p>10 · Leader Election</p><img src="/img/virtual-kubelet-ha/leader-election.svg"></div>
</div>
<div class="section">
<h2>《Claude Code 会话管理》<span class="badge">8 张</span></h2>
<div class="meta">claude-code-session-management-1m-context.md · 3 个 Mermaid + 5 个外部 SVG 重绘</div>
<div class="img-wrap"><p>01 · 上下文窗口结构</p><img src="/img/claude-session-mgmt/context-window-overview.svg"></div>
<div class="img-wrap"><p>02 · 上下文腐化</p><img src="/img/claude-session-mgmt/context-corruption.svg"></div>
<div class="img-wrap"><p>03 · 决策树</p><img src="/img/claude-session-mgmt/session-decision-tree.svg"></div>
<div class="img-wrap"><p>04 · Rewind 工作流</p><img src="/img/claude-session-mgmt/rewind-workflow.svg"></div>
<div class="img-wrap"><p>05 · compact 机制</p><img src="/img/claude-session-mgmt/compact-mechanism.svg"></div>
<div class="img-wrap"><p>06 · compact vs clear</p><img src="/img/claude-session-mgmt/compact-vs-clear.svg"></div>
<div class="img-wrap"><p>07 · 子代理架构</p><img src="/img/claude-session-mgmt/subagent-architecture.svg"></div>
<div class="img-wrap"><p>08 · 全栈工作流</p><img src="/img/claude-session-mgmt/fullstack-workflow.svg"></div>
</div>
<div class="section">
<h2>《Claude Code 子代理深度解析》<span class="badge">16 张</span></h2>
<div class="meta">claude-code-subagents-deep-dive.md · 13 个 Mermaid + 4 个外部 SVG 重绘（核心价值 / 子代理概念 / 五种触发方式 / 管道工作流 / 使用决策）</div>
<div class="img-wrap"><p>01 · 核心特性</p><img src="/img/claude-subagents/core-features.svg"></div>
<div class="img-wrap"><p>02 · 内置类型</p><img src="/img/claude-subagents/builtin-types.svg"></div>
<div class="img-wrap"><p>03 · 自定义要素</p><img src="/img/claude-subagents/custom-elements.svg"></div>
<div class="img-wrap"><p>04 · CLAUDE.md 机制</p><img src="/img/claude-subagents/claudemd-mechanism.svg"></div>
<div class="img-wrap"><p>05 · deep-review 技能</p><img src="/img/claude-subagents/deep-review-skill.svg"></div>
<div class="img-wrap"><p>06 · Stop Hook</p><img src="/img/claude-subagents/stop-hook.svg"></div>
<div class="img-wrap"><p>07 · 研究模式</p><img src="/img/claude-subagents/research-pattern.svg"></div>
<div class="img-wrap"><p>08 · 并行修改</p><img src="/img/claude-subagents/parallel-pattern.svg"></div>
<div class="img-wrap"><p>09 · 新上下文审查</p><img src="/img/claude-subagents/fresh-context-review.svg"></div>
<div class="img-wrap"><p>10 · 渐进式自动化</p><img src="/img/claude-subagents/progressive-automation.svg"></div>
<div class="img-wrap"><p>11 · 权限管理</p><img src="/img/claude-subagents/permission-tiers.svg"></div>
<div class="img-wrap"><p>12 · 核心价值</p><img src="/img/claude-subagents/core-value.svg"></div>
<div class="img-wrap"><p>13 · 子代理概念</p><img src="/img/claude-subagents/subagent-concept.svg"></div>
<div class="img-wrap"><p>14 · 五种触发方式</p><img src="/img/claude-subagents/trigger-methods.svg"></div>
<div class="img-wrap"><p>15 · 管道模式</p><img src="/img/claude-subagents/pipeline-pattern.svg"></div>
<div class="img-wrap"><p>16 · 使用决策</p><img src="/img/claude-subagents/when-to-use.svg"></div>
</div>
<div class="section">
<h2>《驾驭 Claude 的智能》<span class="badge">14 张</span></h2>
<div class="meta">harnessing-claudes-intelligence.md · 9 个 Mermaid + 5 个外部 SVG 重绘</div>
<div class="img-wrap"><p>01 · 架构总览</p><img src="/img/claude-intelligence/architecture-overview.svg"></div>
<div class="img-wrap"><p>02 · 三大核心模式</p><img src="/img/claude-intelligence/three-core-patterns.svg"></div>
<div class="img-wrap"><p>03 · 基准对比</p><img src="/img/claude-intelligence/benchmark-comparison.svg"></div>
<div class="img-wrap"><p>04 · 上下文管理策略</p><img src="/img/claude-intelligence/context-management.svg"></div>
<div class="img-wrap"><p>05 · 声明式工具总览</p><img src="/img/claude-intelligence/declarative-tools.svg"></div>
<div class="img-wrap"><p>06 · 概念关系图</p><img src="/img/claude-intelligence/concept-relations.svg"></div>
<div class="img-wrap"><p>07 · 工具组合</p><img src="/img/claude-intelligence/tools-composition.svg"></div>
<div class="img-wrap"><p>08 · 代码编排</p><img src="/img/claude-intelligence/code-orchestration.svg"></div>
<div class="img-wrap"><p>09 · 上下文三策略</p><img src="/img/claude-intelligence/context-strategies.svg"></div>
<div class="img-wrap"><p>10 · Compaction</p><img src="/img/claude-intelligence/compaction.svg"></div>
<div class="img-wrap"><p>11 · 缓存五原则</p><img src="/img/claude-intelligence/cache-principles.svg"></div>
<div class="img-wrap"><p>12 · 声明式工具流</p><img src="/img/claude-intelligence/declarative-tool-flow.svg"></div>
<div class="img-wrap"><p>13 · auto-mode 时序</p><img src="/img/claude-intelligence/auto-mode-sequence.svg"></div>
<div class="img-wrap"><p>14 · 动态修剪</p><img src="/img/claude-intelligence/pruning-evolution.svg"></div>
</div>
</div>
</body>
</html>