企业官网建设流程全解析

Project Graph 上手指南：用节点图把散乱想法可视化

【免费下载链接】project-graphA node-based visual tool for organizing thoughts and notes in a non-linear way.项目地址: https://gitcode.com/gh_mirrors/pr/project-graph

当头脑风暴里的想法越堆越多，笔记的行装不下分支，PPT 里手工拉箭头又费劲时，你需要一块「节点能互相连接」的画布。Project Graph 是一款桌面节点图可视化工具：拖拽建节点、连线成图，把非线性思考变成一张看得见的图。

🎯 它解决什么问题

它是一块能装下笔记的画布：每个想法是一个节点，每条连线是一种关系，画布没有边界。它支持树形、有向无环图（DAG）、逻辑关系网络三类结构，撤销重做不限步数，改动自动保存备份。相比 Word、Markdown 这类线性工具靠缩进排层次，你可以把想法放在二维平面的任意位置、跨分支跳转，关系不再受行文顺序支配。

🔧 技术是怎么搭的

按层拆开看，每一层都选了"够用且顺手"的方案：

• 界面层：React + TypeScript 配合 shadcn/ui 与 Tailwind CSS 搭界面，自研子窗口系统承载设置、导出等大量小窗，保证风格统一、迭代快。
• 桌面外壳：Tauri（Rust）只负责本地文件读写、全局快捷键等系统能力，绝大部分业务逻辑留在前端——既覆盖 Windows、macOS、Linux，又不让安装包臃肿。
• 画布引擎：Canvas 2D 直接绘制，实体、连线、特效的渲染器分层管理，几百个节点同屏时平移缩放和自动对齐依然流畅。
• 节点内编辑：PlateJS 富文本引擎让节点能装文字、列表、代码和公式，并支持 Markdown、Mermaid 互相导入导出，图文不打架。
• 数据与扩展：自研 serializer、shapes 包把整张画布序列化成 .prg 本地工程文件；extprg 扩展系统可装自研功能，还接入了本地 AI 模型与 MCP 协议。

📌 这些场景正在用它

• 开发者的依赖地图：模块拆到几十个文件后，新人很难看清全貌。用 Project Graph 把模块依赖、构建流程画成图，边上标注调用方向，团队 10 分钟就能判断"加功能该先动哪块"。
• 教师的课程图谱：把它当课程大纲用，每一章是一个分区（节点可圈进区域分组），知识点顺序和前置关系用箭头摆出来，导成 Markdown 或 PNG 就能直接放进课件。
• 设计师的头脑风暴草稿：思路还没成形时，先拖节点、再开自动布局，散乱的想法很快排齐，图本身就能拿出去讨论。
• 个人的非线性笔记：用 .prg 文件存知识脉络，随时全文搜索，导出 PNG 复习，想法不再躺在互相孤立的段落里。

🚀 从安装到第一次运行

三步就能跑起来：

1. 克隆源码：git clone https://gitcode.com/gh_mirrors/pr/project-graph
2. 在项目目录执行pnpm install安装依赖；
3. pnpm dev启动应用，新建工程，拖出第一个节点和连线即可。

想进一步了解架构与贡献流程，可以读项目自带的说明文档 app/README.md。

✅ 适合谁、不适合谁

需要"把结构讲清楚"的人最受益：设计师、教师、开发者，以及习惯非线性记笔记的人，都能在一块画布上把依赖、流程、知识点摆明白。边界也很明确：它是桌面客户端，主打单机画布思考——如果你要的是纯网页端的多人实时协作，或查询分析百万级节点的图数据库，那不属于它的设计目标。

下次再面对一堆理不出层次的文字时，打开 Project Graph，把想法拖成节点、连成线，藏在脑子里的关系就会一目了然——这正是节点图可视化思考最直接的价值。

【免费下载链接】project-graphA node-based visual tool for organizing thoughts and notes in a non-linear way.项目地址: https://gitcode.com/gh_mirrors/pr/project-graph