🌟 Liquid SVG & TikZ Editor

一个极致轻量、零依赖的本地化矢量图形编辑器。专为需要高频编写、预览和导出 SVG 与 TikZ 代码的工作流（如知识管理、学术排版、博客配图）设计。

通过原生前端技术与本地 Node.js 编译服务的结合，提供“所见即所得”的丝滑作图体验，并支持免弹窗的静默批量导出。

✨ 核心特性

🎨 前端体验 (Vanilla JS)

• 液态玻璃悬浮窗 (Liquid Glass UI)：高颜值的悬浮代码编辑器，支持自由拖拽、缩放，鼠标移开自动收起，最大化预览视野。
• 实时渲染与交互：
  • SVG 毫秒级预览：原生 DOM 解析，支持格式化与代码高亮。
  • 无限画布：支持鼠标滚轮缩放、拖拽平移（Pan & Zoom）。
  • 多重背景模式：一键切换亮色、暗色、棋盘格背景，完美适配不同颜色的线条和填充。
• 高效导出管线：
  • 直连本地文件夹：基于 File System Access API，一次选择目录，后续免弹窗直接写入。
  • 智能序列化命名：支持自定义起始编号与步长（如 icon-1.svg, icon-2.svg）。
  • 历史记录与批量处理：自动保存历史渲染记录，支持一键打包选中项批量导出。

⚙️ 后端编译服务 (Node.js)

• 原生 TikZ 转 SVG：支持直接输入 LaTeX/TikZ 代码，后端调用 pdflatex 编译后通过 pdftocairo 无损转储为 SVG 文件。
• 智能环境探测：自动匹配主流 Windows TeX Live 路径，即插即用。

---

🚀 快速开始

1. 环境准备

如果你只需要编辑和导出纯 SVG，直接在浏览器打开 index.html 即可使用。 如果你需要编译 TikZ/LaTeX，请确保本地已安装以下环境：

• Node.js (用于运行本地编译服务器)
• TeX 科学排版系统 (推荐安装 TeX Live)，需包含 pdflatex
• Poppler 工具包，需包含 pdftocairo (通常现代 TeX Live 环境中已自带)

2. 启动服务

在项目根目录下打开终端，运行以下命令启动编译服务：

node tikz-server.js

服务默认运行在 http://localhost:3939。

3. 打开编辑器

使用现代浏览器（推荐基于 Chromium 的 Chrome 或 Edge，以获得完整的文件系统 API 支持）直接打开 index.html 文件。

---

💡 使用指南

1. 唤出编辑器：将鼠标悬停在左下角图标 1 秒，或直接点击，即可展开“液态玻璃”代码编辑器。
2. 输入代码：

• 粘贴 SVG 源码，右侧将实时渲染。
• 粘贴 TikZ 源码（如 \draw (0,0) circle (1);），稍等片刻（防抖 120ms + 编译耗时），即可在右侧看到由本地 LaTeX 引擎生成的完美矢量图。

3. 设置导出目录：点击右上角 [选择文件夹]，授权浏览器访问你的本地某个目录（例如你的 Obsidian 附件库或网站 assets 文件夹）。
4. 快速导出：设置好文件名和起始编号，按下 Ctrl + S (或 Cmd + S)，或者点击 [导出 SVG]，文件将直接静默保存到目标文件夹中，编号自动递增。
5. 历史与找回：点击 [历史记录]，可以查看本次会话中渲染过的所有图形，随时回滚代码或批量勾选导出。

---

🛠️ 快捷键说明

快捷键	功能
Ctrl + S / Cmd + S	快速导出当前渲染的 SVG
Ctrl + Shift + F / Cmd + Shift + F	格式化当前 SVG 代码
Escape	关闭并最小化悬浮编辑器
Tab	在编辑器中插入两个空格缩进

---

⚠️ 注意事项

• 浏览器兼容性：核心的静默导出功能依赖 window.showDirectoryPicker API。在 Firefox 或 Safari 中，将自动降级为常规的浏览器单文件下载模式。
• 安全提示：本地 TikZ 编译服务目前主要自用，未进行严格的沙箱隔离。请勿将其暴露在公网，或使用它编译来源不明、含有敏感系统调用指令的 LaTeX 代码。