| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | <title>Graphify Dark Graph</title> |
| 7 | <link rel="stylesheet" href="../../../assets/fonts.css"> |
| 8 | <link rel="stylesheet" href="../../../assets/base.css"> |
| 9 | <link rel="stylesheet" href="style.css"> |
| 10 | </head> |
| 11 | <body class="tpl-graphify-dark-graph"> |
| 12 | <div class="deck"> |
| 13 | |
| 14 | <!-- 1. COVER --> |
| 15 | <section class="slide is-active"> |
| 16 | <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div><div class="gd-orb gd-orb-2"></div><div class="gd-orb gd-orb-3"></div></div> |
| 17 | <!-- live force-directed graph bg --> |
| 18 | <svg viewBox="0 0 1600 900" style="position:absolute;inset:0;width:100%;height:100%;opacity:.38;z-index:1" xmlns="http://www.w3.org/2000/svg"> |
| 19 | <g stroke="#7eb8da" stroke-width="1" stroke-opacity=".5" fill="none"> |
| 20 | <line x1="300" y1="200" x2="520" y2="340"/> |
| 21 | <line x1="520" y1="340" x2="780" y2="260"/> |
| 22 | <line x1="780" y1="260" x2="1040" y2="420"/> |
| 23 | <line x1="520" y1="340" x2="640" y2="560"/> |
| 24 | <line x1="640" y1="560" x2="900" y2="620"/> |
| 25 | <line x1="900" y1="620" x2="1040" y2="420"/> |
| 26 | <line x1="1040" y1="420" x2="1260" y2="300"/> |
| 27 | <line x1="1260" y1="300" x2="1380" y2="500"/> |
| 28 | <line x1="900" y1="620" x2="1120" y2="720"/> |
| 29 | <line x1="300" y1="200" x2="200" y2="420"/> |
| 30 | <line x1="200" y1="420" x2="360" y2="640"/> |
| 31 | <line x1="360" y1="640" x2="640" y2="560"/> |
| 32 | </g> |
| 33 | <g> |
| 34 | <circle cx="300" cy="200" r="10" fill="#e8a87c"/> |
| 35 | <circle cx="520" cy="340" r="14" fill="#7eb8da"/> |
| 36 | <circle cx="780" cy="260" r="9" fill="#7ed3a4"/> |
| 37 | <circle cx="1040" cy="420" r="18" fill="#b8a4d6"/> |
| 38 | <circle cx="640" cy="560" r="11" fill="#d4a0b9"/> |
| 39 | <circle cx="900" cy="620" r="12" fill="#e8a87c"/> |
| 40 | <circle cx="1260" cy="300" r="8" fill="#7ed3a4"/> |
| 41 | <circle cx="1380" cy="500" r="10" fill="#7eb8da"/> |
| 42 | <circle cx="1120" cy="720" r="9" fill="#d4a0b9"/> |
| 43 | <circle cx="200" cy="420" r="8" fill="#b8a4d6"/> |
| 44 | <circle cx="360" cy="640" r="11" fill="#7eb8da"/> |
| 45 | </g> |
| 46 | </svg> |
| 47 | <div class="gd-snum">01 / 08</div> |
| 48 | <div style="margin-top:auto"> |
| 49 | <p class="gd-eyebrow">Tech Sharing · 纯干货</p> |
| 50 | <h1 class="gd-h1" style="font-size:88px"><span class="gd-rainbow">手把手用 Graphify<br>搭建个人知识图谱</span></h1> |
| 51 | <p class="gd-lede" style="margin-top:20px">一行命令 · 全多模态 · 诚实审计 —— <span class="gd-accent">把任何文件夹变成可导航的知识网络。</span></p> |
| 52 | <p class="gd-eyebrow" style="margin-top:26px">↑ 背景就是 Graphify 真实跑出来的知识图谱</p> |
| 53 | </div> |
| 54 | </section> |
| 55 | |
| 56 | <!-- 2. SECTION DIVIDER --> |
| 57 | <section class="slide"> |
| 58 | <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div><div class="gd-orb gd-orb-2"></div></div> |
| 59 | <div class="gd-snum">02 / 08</div> |
| 60 | <div style="margin:auto 0"> |
| 61 | <div class="gd-eyebrow">Part 01</div> |
| 62 | <h1 class="gd-h1" style="font-size:120px">Why <span class="gd-grad">Graph</span>?</h1> |
| 63 | <p class="gd-lede">folder → tree → graph，人类认知的下一步</p> |
| 64 | </div> |
| 65 | </section> |
| 66 | |
| 67 | <!-- 3. CONTENT — plugin grid --> |
| 68 | <section class="slide"> |
| 69 | <div class="gd-ambient"><div class="gd-orb gd-orb-2"></div><div class="gd-orb gd-orb-3"></div></div> |
| 70 | <div class="gd-snum">03 / 08</div> |
| 71 | <p class="gd-eyebrow">Feature Map</p> |
| 72 | <h2 class="gd-h2">一个工具，<span class="gd-grad">四件事</span></h2> |
| 73 | <div class="gd-grid-4"> |
| 74 | <div class="gd-glass gd-glass-warm"><div style="font-size:30px">📂</div><h4 style="margin:10px 0 6px">Folder Ingest</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">递归扫描任意路径，支持 md / pdf / 代码 / 图片</p></div> |
| 75 | <div class="gd-glass gd-glass-blue"><div style="font-size:30px">🧠</div><h4 style="margin:10px 0 6px">Entity Extract</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">用 LLM 抽概念、人物、事件、关系</p></div> |
| 76 | <div class="gd-glass gd-glass-green"><div style="font-size:30px">🕸️</div><h4 style="margin:10px 0 6px">Force Graph</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">D3 力导向，点击即跳转原文</p></div> |
| 77 | <div class="gd-glass"><div style="font-size:30px">🔍</div><h4 style="margin:10px 0 6px">Audit Trail</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">每条边都能追溯到 source span</p></div> |
| 78 | </div> |
| 79 | <div class="gd-glass gd-glass-warm" style="margin-top:24px"><p style="font-size:18px;line-height:1.6">它不是「又一个 RAG」—— 它是 <span class="gd-accent">把检索结果画出来，让你一眼就知道信息长什么样</span>。</p></div> |
| 80 | </section> |
| 81 | |
| 82 | <!-- 4. CODE --> |
| 83 | <section class="slide"> |
| 84 | <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div></div> |
| 85 | <div class="gd-snum">04 / 08</div> |
| 86 | <p class="gd-eyebrow">One command</p> |
| 87 | <h2 class="gd-h2">从 0 到图谱，<span class="gd-grad">大概 90 秒</span></h2> |
| 88 | <p class="gd-cmd" style="margin:16px 0 22px">$ graphify ~/notes --out ./graph</p> |
| 89 | <pre class="gd-codebox"><span class="cm"># graphify.config.yaml</span> |
| 90 | <span class="kw">ingest</span>: |
| 91 | paths: [<span class="st">~/notes</span>, <span class="st">~/code/docs</span>] |
| 92 | include: [<span class="st">"*.md"</span>, <span class="st">"*.pdf"</span>, <span class="st">"*.py"</span>] |
| 93 | |
| 94 | <span class="kw">extract</span>: |
| 95 | model: <span class="st">claude-opus-4-6</span> |
| 96 | schema: [<span class="st">concept</span>, <span class="st">person</span>, <span class="st">event</span>, <span class="st">relation</span>] |
| 97 | |
| 98 | <span class="kw">render</span>: |
| 99 | engine: <span class="st">d3-force</span> |
| 100 | audit: <span class="fn">true</span> <span class="cm"># 每条边带 source span</span></pre> |
| 101 | </section> |
| 102 | |
| 103 | <!-- 5. CHART — race diagram --> |
| 104 | <section class="slide"> |
| 105 | <div class="gd-ambient"><div class="gd-orb gd-orb-3"></div></div> |
| 106 | <div class="gd-snum">05 / 08</div> |
| 107 | <p class="gd-eyebrow">Efficiency Race</p> |
| 108 | <h2 class="gd-h2">没有知识库 vs 有知识库</h2> |
| 109 | <div style="max-width:900px;margin-top:30px"> |
| 110 | <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px"> |
| 111 | <div style="width:110px;text-align:right;font-weight:700;color:var(--gd-danger)">没有<br>知识库</div> |
| 112 | <div style="flex:1;position:relative;height:70px;background:rgba(224,112,112,.06);border:1px solid rgba(224,112,112,.2);border-radius:16px"> |
| 113 | <div style="position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:32px">🛵</div> |
| 114 | <div style="position:absolute;left:72px;top:50%;transform:translateY(-50%);color:var(--gd-danger);font-size:14px">反复喂信息…整理…又忘了…</div> |
| 115 | </div> |
| 116 | </div> |
| 117 | <div style="display:flex;align-items:center;gap:16px"> |
| 118 | <div style="width:110px;text-align:right;font-weight:700;color:var(--gd-green)">有<br>知识库</div> |
| 119 | <div style="flex:1;position:relative;height:70px;background:rgba(126,211,164,.06);border:1px solid rgba(126,211,164,.25);border-radius:16px"> |
| 120 | <div style="position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:32px">🏎️</div> |
| 121 | <div style="position:absolute;right:72px;top:50%;transform:translateY(-50%);color:var(--gd-green);font-size:14px">AI 自己找 → 确认 → 干活!</div> |
| 122 | </div> |
| 123 | </div> |
| 124 | </div> |
| 125 | <div class="gd-grid-3" style="margin-top:36px"> |
| 126 | <div class="gd-glass gd-glass-warm"><div class="gd-big gd-grad">5×</div><p class="gd-dim" style="margin-top:6px">速度提升</p></div> |
| 127 | <div class="gd-glass gd-glass-green"><div class="gd-big gd-grad">-80%</div><p class="gd-dim" style="margin-top:6px">重复喂信息</p></div> |
| 128 | <div class="gd-glass gd-glass-blue"><div class="gd-big gd-grad">∞</div><p class="gd-dim" style="margin-top:6px">记忆持久化</p></div> |
| 129 | </div> |
| 130 | </section> |
| 131 | |
| 132 | <!-- 6. PIPELINE --> |
| 133 | <section class="slide"> |
| 134 | <div class="gd-ambient"><div class="gd-orb gd-orb-2"></div></div> |
| 135 | <div class="gd-snum">06 / 08</div> |
| 136 | <p class="gd-eyebrow">Pipeline</p> |
| 137 | <h2 class="gd-h2">端到端 <span class="gd-grad">4 步走</span></h2> |
| 138 | <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-top:36px"> |
| 139 | <div class="gd-glass" style="flex:1;text-align:center"><div style="font-size:34px">📂</div><div style="font-weight:600;margin-top:8px">Scan</div><div class="gd-dim" style="font-size:13px">递归读文件</div></div> |
| 140 | <div style="color:var(--gd-text3);font-size:24px">→</div> |
| 141 | <div class="gd-glass gd-glass-blue" style="flex:1;text-align:center"><div style="font-size:34px">🔬</div><div style="font-weight:600;margin-top:8px">Extract</div><div class="gd-dim" style="font-size:13px">LLM 抽实体</div></div> |
| 142 | <div style="color:var(--gd-text3);font-size:24px">→</div> |
| 143 | <div class="gd-glass gd-glass-green" style="flex:1;text-align:center"><div style="font-size:34px">🕸️</div><div style="font-weight:600;margin-top:8px">Build</div><div class="gd-dim" style="font-size:13px">构图 + 去重</div></div> |
| 144 | <div style="color:var(--gd-text3);font-size:24px">→</div> |
| 145 | <div class="gd-glass gd-glass-warm" style="flex:1;text-align:center"><div style="font-size:34px">🎨</div><div style="font-weight:600;margin-top:8px">Render</div><div class="gd-dim" style="font-size:13px">D3 交互图</div></div> |
| 146 | </div> |
| 147 | <div class="gd-glass" style="margin-top:32px"><p style="font-size:16px;line-height:1.6;color:var(--gd-text2)">每一步都有 audit log：你永远知道某个节点为什么存在、它来自哪个文件的哪一行。</p></div> |
| 148 | </section> |
| 149 | |
| 150 | <!-- 7. CTA --> |
| 151 | <section class="slide"> |
| 152 | <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div><div class="gd-orb gd-orb-3"></div></div> |
| 153 | <div class="gd-snum">07 / 08</div> |
| 154 | <p class="gd-eyebrow">Try it tonight</p> |
| 155 | <h2 class="gd-h1" style="font-size:80px">Graphify <span class="gd-grad">your folders</span></h2> |
| 156 | <p class="gd-cmd" style="margin-top:22px">$ npm i -g @lewis/graphify</p> |
| 157 | <p class="gd-cmd" style="margin-top:10px;color:var(--gd-warm);text-shadow:0 0 30px rgba(232,168,124,.45)">$ graphify ~/obsidian-vault</p> |
| 158 | <div style="margin-top:32px"> |
| 159 | <span class="gd-tag">#knowledge-graph</span> |
| 160 | <span class="gd-tag">#open-source</span> |
| 161 | <span class="gd-tag">#claude-agent</span> |
| 162 | <span class="gd-tag">#obsidian</span> |
| 163 | <span class="gd-tag">#d3-force</span> |
| 164 | </div> |
| 165 | </section> |
| 166 | |
| 167 | <!-- 8. THANKS --> |
| 168 | <section class="slide"> |
| 169 | <div class="gd-ambient"><div class="gd-orb gd-orb-2"></div></div> |
| 170 | <div class="gd-snum">08 / 08</div> |
| 171 | <div style="margin:auto 0;text-align:center"> |
| 172 | <div class="gd-big gd-rainbow" style="font-size:180px">Thanks.</div> |
| 173 | <p class="gd-lede" style="margin:28px auto 0">github.com/lewis/graphify · 欢迎 star / issue / PR</p> |
| 174 | </div> |
| 175 | </section> |
| 176 | |
| 177 | </div> |
| 178 | <script src="../../../assets/runtime.js"></script> |
| 179 | </body> |
| 180 | </html> |
| 181 |