更新文档

Author: Linho1219

README.md

@@ -1,3 +1,51 @@
-# function-plot-GUI
+# Function-Plot-GUI
 
-A GUI playground for [function-plot](https://mauriciopoppe.github.io/function-plot/), a 2d function plotter powered by D3. Built with Vue.js & Vite.
+[中文文档](./README_zh-CN.md)
+
+Live Demo: <https://plot.linho.cc/>
+
+A graphical editor built for [function-plot](https://mauriciopoppe.github.io/function-plot/), developed using Vue 3 & Vite.
+
+Function-plot accepts configuration options via a JavaScript object. Function-Plot-GUI provides an intuitive graphical interface for generating these options and outputs them in JSON5 format. JSON5 is compatible with JavaScript object literal syntax, making it easy to copy and paste directly.
+
+## Comparison with GeoGebra/Desmos
+
+Tools like GeoGebra and Desmos offer more powerful plotting capabilities, additional assistive features, and support for exporting to various image formats. If you're looking for a drawing tool primarily for teaching or learning purposes, they are likely better suited for your needs.
+
+However, GeoGebra and Desmos are not open-source, meaning you can't host them yourself. To embed their graphs in your webpage, you have to use the `iframe` they provide. Relying on external services can introduce higher maintenance costs and potential reliability issues. As an alternative, using function-plot-GUI for configuration and the function-plot library for rendering offers a solid self-hosted solution. Config files can be written in plain-text formats like JSON, JSON5, or YAML, and you can even define custom syntax for rendering directly in Markdown files. The documentation site [LinhoNotes](https://notes.linho.cc/) adopts this approach.
+
+## Integrating with Your Application
+
+Function-plot-GUI supports receiving data via a base64-encoded URL parameter.
+
+For example, given the following function-plot configuration:
+
+```js
+functionPlot({
+  data: [
+    {
+      fn: "x^2-1",
+    },
+  ],
+});
+```
+
+Convert the options to JSON or JSON5:
+
+```json
+{"data":[{"fn":"x^2-1"}]}
+```
+
+Then base64 encode it (omit the trailing `=`):
+
+```txt
+eyJkYXRhIjpbeyJmbiI6InheMi0xIn1dfQ
+```
+
+Pass it as the `code` parameter in the URL:
+
+```txt
+https://plot.linho.cc/?code=eyJkYXRhIjpbeyJmbiI6InheMi0xIn1dfQ
+```
+
+This will open the web editor with the configuration preloaded, allowing you to modify the settings and preview the graph.

README_zh-CN.md

@@ -0,0 +1,51 @@
+# Function-Plot-GUI
+
+[English README](./README.md)
+
+实例：<https://plot.linho.cc/>
+
+为 [function-plot](https://mauriciopoppe.github.io/function-plot/) 构建的图形化编辑器，使用 Vue3 & Vite 构建。
+
+Function-plot 通过一个 JS 对象传入选项。Function-plot-GUI 提供了一个易用的图形界面编辑器用来生成选项，并输出为 JSON5 格式。JSON5 与 JS 的对象字面量语法是兼容的，因此可以直接复制粘贴使用。
+
+## 与 GeoGebra/Desmos 等工具的关系
+
+GeoGebra/Desmos 等工具拥有更强大的绘制能力、更多的辅助功能，并且支持导出为多样的图像格式。如果你只是需要一个教学用的绘图工具，它们是更好的选择。
+
+但是 GeoGebra 和 Desmos 不是开源的，这意味着你无法自行部署。如果要将图像嵌入你的网页，只能用他们提供的 `iframe`。依赖外部服务会带来更多的维护成本和不可靠性。因此，使用 function-plot-GUI 编辑、使用 function-plot 库绘制是一个不错的选择。并且配置文件可以以 JSON/JSON5/YAML 等纯文本格式书写，甚至还能通过定义一些私有语法直接放在 Markdown 文件中渲染。文档仓库 [LinhoNotes](https://notes.linho.cc/) 便采用此路线。
+
+## 接入你的应用
+
+Function-plot-GUI 支持通过 base64 编码的 URL 参数传入数据。
+
+例如，对于：
+
+```js
+functionPlot({
+  data: [
+    {
+      fn: "x^2-1",
+    },
+  ],
+});
+```
+
+将选项转换为 JSON 或 JSON5：
+
+```json
+{"data":[{"fn":"x^2-1"}]}
+```
+
+然后使用 base64 编码（结尾的 `=` 省略）：
+
+```txt
+eyJkYXRhIjpbeyJmbiI6InheMi0xIn1dfQ
+```
+
+然后作为 `code` 参数传入：
+
+```txt
+https://plot.linho.cc/?code=eyJkYXRhIjpbeyJmbiI6InheMi0xIn1dfQ
+```
+
+打开的网页即可编辑此选项并预览图像。