痛点：脑子里的东西，总是先乱在纸上

你有没有过这种时候——开会前想捋一下思路，打开 XMind 发现要注册、要装客户端；想临时画个结构图发给同事，结果被各种模板和教程劝退。我自己的真实场景是：每次写技术方案，脑子里其实已经有树状结构了，但落到文档里不是变成扁平的 bullet list，就是被 Markdown 缩进折磨到放弃。

市面上工具要么太重（飞书多维表格、Miro 都要登录），要么太死板（系统字体画出来的图冷冰冰）。我想要的其实很简单：

一个能直接双击打开、能随手拖节点、画出来像手写的 HTML 文件，存下来就是我的资产，不依赖任何平台。

后来我让 WorkBuddy 帮我搓了这么一只工具，纯单文件、零依赖、离线可用。下面把思路和代码都摊开讲。

方案架构：不靠库，靠 SVG + 一点"抖动"

双击空白处加子节点、拖节点联动父连线、自动布局时递归算子树宽度

。自动布局是救命功能——手动摆 20 个节点会疯，所以加了"整理布局"按钮，一键按树形展开。

让 WorkBuddy 生成时，我用的核心 Prompt 是这样的（你可以直接拿去用）：

它吐出来的骨架我精简成了下面这段核心逻辑（节选自成品，可直接粘进 

// 手绘抖动：给坐标加 ±1.5px 随机偏移，模拟铅笔
function jitter(v){ return v + (Math.random()-0.5)*3; }

// 画一条"手绘感"连线（双线重描）
function roughLine(x1,y1,x2,y2){
  const path = document.createElementNS(svgNS,'path');
  const d = `M ${jitter(x1)} ${jitter(y1)}
             C ${jitter((x1+x2)/2)} ${jitter(y1-30)},
               ${jitter((x1+x2)/2)} ${jitter(y2-30)},
               ${jitter(x2)} ${jitter(y2)}`;
  path.setAttribute('d', d);
  path.setAttribute('stroke', '#3a3a3a');
  path.setAttribute('stroke-width', '2');
  path.setAttribute('fill', 'none');
  path.setAttribute('stroke-linecap', 'round');
  return path;
}

// 自动布局：递归算每个子树宽度，父节点居中于子树
function layout(node, depth){
  const kids = nodes.filter(n=>n.parent===node.id);
  if(!kids.length){ node._w = NODE_W; return NODE_W; }
  let total = 0;
  kids.forEach(k=>{ total += layout(k, depth+1); });
  node._w = Math.max(NODE_W, total);
  return node._w;
}


这段跑通后，剩下的节点拖拽、双击编辑都是标准 DOM 事件，WorkBuddy 补全得很顺。

踩坑：三个让我卡了半小时的坑

坑 1：SVG 坐标系和页面滚动对不上。

，连线用 SVG，两者坐标系要一致。一开始我没给 SVG 设 

 也没跟随容器滚动，拖到右下角连线就飞了。修法是 SVG 和节点容器共用同一个 

 父层，SVG 尺寸设为内容边界而非视口。

坑 2：双击事件被单击选中吞掉。

 和文本选中会打架，导致双击经常只触发单击。解决办法是在节点容器上 

，编辑时才临时放开，存完立刻关掉。

 会糊，因为没考虑设备像素比。正确姿势是先序列化 SVG 成 Blob URL，用 

 放大画到 canvas，清晰度直接翻倍。

效果实测：一只文件，干了三件事

我拿它重画了最近一次"每日发文自动化"的架构图，约 18 个节点。实测：

对比我之前用的方案：XMind 文件格式封闭、Miro 要登录且导出带水印、纯 Markdown 又丢了"图"的直觉。

单文件 HTML 是唯一同时满足"可编辑 + 可移植 + 零依赖"的载体。

把常用工具压成一个能离线双击运行的 HTML 文件，是这个时代最被低估的"个人资产"——WorkBuddy 负责把想法快速搓成型，你负责拥有它。

本文是「WorkBuddy 实战」系列之一。

用 WorkBuddy 做一只手绘思维导图工具：一个 HTML 文件，零依赖

痛点：脑子里的东西，总是先乱在纸上 你有没有过这种时候——开会前想捋一下思路，打开 XMind 发现要注册、要装客户端；

人工智能

一款零依赖、离线可用的手绘风思维导图工具，纯单文件HTML实现。支持双击添加节点、拖拽连线、自动布局，导出SVG/PNG。无需注册、不依赖平台，打开即用，解决XMind/Miro等工具太重、Markdown太扁平的痛点。核心采用SVG+抖动算法实现手绘感，适合快速梳理思路、分享可编辑图表。

数据结构

WorkBuddy 

容器

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

CDN免费试用


2026上云采购 | AI焕新·智启新局

lexiang

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

用 WorkBuddy 做一只手绘思维导图工具：一个 HTML 文件，零依赖

用 WorkBuddy 做一只手绘思维导图工具：一个 HTML 文件，零依赖

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐