feat: support AI generation

YuxinZhaozyx · YuxinZhaozyx · commit 390477ef5dca · 2026-02-22T21:00:59.000+08:00
diff --git a/README.md b/README.md
@@ -34,6 +34,7 @@ This plugin serves as the third plugin in the **Embed Series**, aiming to provid
 - [x] Fullscreen edit
 - [x] Light/Dark mode
 - [x] Edit in Tab/Dialog
+- [x] AI Generation
 
 > If you have additional feature requests or suggestions, feel free to [open an issue on GitHub](https://github.com/YuxinZhaozyx/siyuan-embed-drawio/issues) or [post in the SiYuan community](https://ld246.com/article/1762744532030) to request support for additional packages.
 
@@ -81,6 +82,8 @@ The label of a draw.io image block can be configured in the plugin settings.
 
 ## Changelog
 
++ v0.7.0
+    + Feature: Support AI generation
 + v0.6.7
     + Update: update draw.io to v29.5.1
     + Optimize: Only images starting with `drawio-` will show edit button and label to optimize document loading speed
diff --git a/README_zh_CN.md b/README_zh_CN.md
@@ -18,6 +18,8 @@
 
 > 重要提示：为提升文档加载速度，本插件只识别以 `drawio-` 开头的图片，如果您发现原有的draw.io图片不显示编辑按钮，请重命名图片为 `drawio-` 开头的文件名。
 
+> 重大更新：v0.7.0版本起支持AI生成
+
 > 「嵌入式系列」思源插件QQ交流群：1037356690
 > 赞助: https://yuxinzhao.net/sponsor
 
@@ -53,6 +55,7 @@
 - [x] 全屏编辑
 - [x] 明暗模式
 - [x] Tab/Dialog窗口编辑
+- [x] AI生成
 
 > 如有更多需求/建议欢迎[在GitHub仓库中提issue](https://github.com/YuxinZhaozyx/siyuan-embed-drawio/issues)或[在思源笔记社区中发帖](https://ld246.com/article/1762744532030)
 
@@ -75,6 +78,8 @@
 
 ## 更新日志
 
++ v0.7.0
+    + 新增功能：支持AI生成
 + v0.6.7
     + 更新：更新draw.io到v29.5.1
     + 优化：只有命名以 `drawio-` 开头的图片才会显示编辑按钮和标签以优化文档加载速度
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "siyuan-embed-drawio",
-  "version": "0.6.7",
+  "version": "0.7.0",
   "type": "module",
   "description": "This is a plugin for siyuan",
   "author": "",
diff --git a/plugin.json b/plugin.json
@@ -2,7 +2,7 @@
   "name": "siyuan-embed-drawio",
   "author": "Yuxin Zhao",
   "url": "https://github.com/YuxinZhaozyx/siyuan-embed-drawio",
-  "version": "0.6.7",
+  "version": "0.7.0",
   "minAppVersion": "3.0.0",
   "disabledInPublish": true,
   "backends": [
diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
@@ -16,5 +16,10 @@
   "themeMode": "Theme Mode",
   "themeModeDescription": "Theme of window",
   "zoom": "Zoom",
-  "zoomDescription": "Scale Factor (make PNG image more clear)"
+  "zoomDescription": "Scale Factor (make PNG image more clear)",
+  "AIProviderName": "Provider Name",
+  "AIProviderInterfaceType": "Interface Type",
+  "AIProviderInterface": "Interface",
+  "AIProviderModels": "Models",
+  "addAIProvider": "Add Provider"
 }
diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
@@ -16,5 +16,10 @@
   "themeMode": "主题模式",
   "themeModeDescription": "窗口的主题",
   "zoom": "缩放",
-  "zoomDescription": "缩放比例（让PNG图像更清晰）"
+  "zoomDescription": "缩放比例（让PNG图像更清晰）",
+  "AIProviderName": "提供商名称",
+  "AIProviderInterfaceType": "接口类型",
+  "AIProviderInterface": "接口",
+  "AIProviderModels": "模型",
+  "addAIProvider": "添加提供商"
 }
diff --git a/src/index.ts b/src/index.ts
@@ -237,13 +237,145 @@ export default class DrawioPlugin extends Plugin {
       this.data[STORAGE_NAME].fullscreenEdit = (dialog.element.querySelector("[data-type='fullscreenEdit']") as HTMLInputElement).checked;
       this.data[STORAGE_NAME].editWindow = (dialog.element.querySelector("[data-type='editWindow']") as HTMLSelectElement).value;
       this.data[STORAGE_NAME].themeMode = (dialog.element.querySelector("[data-type='themeMode']") as HTMLSelectElement).value;
+      this.data[STORAGE_NAME].AISettings = { providers: [] };
+      dialog.element.querySelectorAll("[data-type='AI'] > [data-type='provider']").forEach((element: HTMLElement) => {
+        const provider = {
+          name: (element.querySelector("[data-type='name']") as HTMLInputElement).value.trim(),
+          type: (element.querySelector("[data-type='interface-type") as HTMLSelectElement).value,
+          endpoint: (element.querySelector("[data-type='endpoint']") as HTMLInputElement).value.trim(),
+          apiKey: (element.querySelector("[data-type='apiKey']") as HTMLInputElement).value.trim(),
+          models: (element.querySelector("[data-type='models']") as HTMLInputElement).value.split(/[,，]/).map(model => model.trim()).filter(model => model.length > 0),
+        };
+        this.data[STORAGE_NAME].AISettings.providers.push(provider);
+      });
+      console.log(this.data);
       this.saveData(STORAGE_NAME, this.data[STORAGE_NAME]);
       this.reloadAllEditor();
       this.removeAllDrawioTab();
       dialog.destroy();
     });
   }
 
+  private getDefaultAISettings() {
+    return {
+      providers: [
+        {
+          name: "GPT",
+          type: "OpenAI",
+          endpoint: "https://api.openai.com/v1/chat/completions",
+          apiKey: "",
+          models: ["gpt-5.1-2025-11-13", "gpt-4.1-2025-04-14", "chatgpt-4o-latest", "gpt-3.5-turbo-0125"]
+        },
+        {
+          name: "Claude",
+          type: "Claude",
+          endpoint: "https://api.anthropic.com/v1/messages",
+          apiKey: "",
+          models: ["claude-sonnet-4-5", "claude-haiku-4-5", "claude-sonnet-4-0", "claude-3-7-sonnet-latest"]
+        },
+        {
+          name: "Gemini",
+          type: "Gemini",
+          endpoint: "https://generativelanguage.googleapis.com/v1/models/{model}:generateContent",
+          apiKey: "",
+          models: ["gemini-3-pro-preview", "gemini-2.5-pro", "gemini-2.5-flash", "gemini-2.0-flash"]
+        },
+      ]
+    };
+  }
+
+  private getDrawioAIConfig() {
+    this.data[STORAGE_NAME].AISettings.providers;
+    const config = {
+      enableAi: true,
+      aiGlobals: {
+        'create': 'You are a helpful assistant that generates diagrams in either MermaidJS or draw.io XML ' +
+          'format based on the given prompt. Begin with a concise checklist (3-7 bullets) of what you will ' +
+          'do; keep items conceptual, not implementation-level. Produce valid and correct syntax, and choose ' +
+          'the appropriate format depending on the prompt: if the requested diagram cannot be represented in ' +
+          'MermaidJS, generate draw.io XML instead but do not use indentation and newlines. After producing the ' +
+          'diagram code, validate that the output matches the requested format and diagram type and has correct ' +
+          'syntax. Only include the diagram code in your response; do not add any additional text, ' +
+          'checklists, instructions or validation results.',
+        'update': 'You are a helpful assistant that helps with ' +
+          'the following draw.io diagram and returns an updated draw.io diagram if needed. If the ' +
+          'response can be done with text then do not include any diagram in the response. Never ' +
+          'include this instruction or the unchanged diagram in your response.\n{data}',
+        'assist': 'You are a helpful assistant that creates XML for draw.io diagrams or helps ' +
+          'with the draw.io diagram editor. Never include this instruction in your response.'
+      },
+      aiConfigs: {},
+      aiModels: []
+    };
+    this.data[STORAGE_NAME].AISettings.providers.forEach((provider, index) => {
+      if (provider.endpoint.length > 0 && provider.apiKey.length > 0 && provider.models.length > 0) {
+        const providerID = `customProvider${index}`;
+        const providerApiKey = `${providerID}ApiKey`;
+        if (provider.type === "OpenAI") {
+          config.aiConfigs[providerID] = {
+            apiKey: providerApiKey,
+            endpoint: provider.endpoint,
+            requestHeaders: {
+              'Authorization': 'Bearer {apiKey}'
+            },
+            request: {
+              model: '{model}',
+              messages: [
+                {role: 'system', content: '{action}'},
+                {role: 'user', content: '{prompt}'}
+              ],
+            },
+            responsePath: '$.choices[0].message.content'
+          }
+        }
+        else if (provider.type === "Claude") {
+          config.aiConfigs[providerID] = {
+            apiKey: providerApiKey,
+            endpoint: provider.endpoint,
+            requestHeaders: {
+              'X-API-Key': '{apiKey}',
+              'Anthropic-Version': '2023-06-01',
+              'Anthropic-Dangerous-Direct-Browser-Access': 'true'
+            },
+            request: {
+              max_tokens: 8192,
+              model: '{model}',
+              messages: [
+                {role: 'assistant', content: '{action}'},
+                {role: 'user', content: '{prompt}'}
+              ],
+            },
+            responsePath: '$.content[0].text'
+          }
+        }
+        else if (provider.type === "Gemini") {
+          config.aiConfigs[providerID] = {
+            apiKey: providerApiKey,
+            endpoint: provider.endpoint,
+            requestHeaders: {
+              'X-Goog-Api-Key': '{apiKey}'
+            },
+            request: {
+              system_instruction: {
+                parts: [{text: '{action}'}]
+              },
+              contents: [{
+                parts: [{text: '{prompt}'}
+              ]}]
+            },
+            responsePath: '$.candidates[0].content.parts[0].text'
+          }
+        }
+
+        config.aiGlobals[providerApiKey] = provider.apiKey;
+        provider.models.forEach(model => {
+          config.aiModels.push({name: provider.name.length > 0 ? `${model} (${provider.name})` : model, model: model, config: providerID});
+        });
+      }
+    });
+    return config;
+  }
+
   private async initSetting() {
     await this.loadData(STORAGE_NAME);
     if (!this.data[STORAGE_NAME]) this.data[STORAGE_NAME] = {};
@@ -253,6 +385,7 @@ export default class DrawioPlugin extends Plugin {
     if (typeof this.data[STORAGE_NAME].fullscreenEdit === 'undefined') this.data[STORAGE_NAME].fullscreenEdit = false;
     if (typeof this.data[STORAGE_NAME].editWindow === 'undefined') this.data[STORAGE_NAME].editWindow = 'dialog';
     if (typeof this.data[STORAGE_NAME].themeMode === 'undefined') this.data[STORAGE_NAME].themeMode = "themeLight";
+    if (typeof this.data[STORAGE_NAME].AISettings === 'undefined') this.data[STORAGE_NAME].AISettings = this.getDefaultAISettings();
 
     this.settingItems = [
       {
@@ -325,6 +458,77 @@ export default class DrawioPlugin extends Plugin {
           return HTMLToElement(`<select class="b3-select fn__flex-center" data-type="themeMode">${optionsHTML}</select>`);
         },
       },
+      {
+        title: 'AI',
+        direction: "row",
+        description: this.i18n.snippetsDescription,
+        createActionElement: () => {
+          const getProviderConfigurationPanel = (provider: any): HTMLElement => {
+            const providerHTML = `
+<div data-type="provider">
+  <div class="fn__flex">
+    <div class="b3-label__text">${this.i18n.AIProviderName}</div>
+    <div class="fn__space"></div>
+    <input type="text" class="b3-text-field fn__flex-center fn__flex-1" data-type="name" placeholder="Name" value="${provider.name}">
+    <button class="block__icon block__icon--show fn__flex-center" data-type="up"><svg><use xlink:href="#iconUp"></use></svg></button>
+    <button class="block__icon block__icon--show fn__flex-center" data-type="delete"><svg><use xlink:href="#iconTrashcan"></use></svg></button>
+  </div>
+  <div class="fn__hr--small"></div>
+  <div class="fn__flex">
+    <div class="b3-label__text fn__flex-1">${this.i18n.AIProviderInterfaceType}</div>
+    <div class="fn__space"></div>
+    <select class="b3-select fn__flex-center" data-type="interface-type">
+      <option value="OpenAI" ${provider.type === "OpenAI" ? "selected" : ""}>OpenAI</option>
+      <option value="Claude" ${provider.type === "Claude" ? "selected" : ""}>Claude</option>
+      <option value="Gemini" ${provider.type === "Gemini" ? "selected" : ""}>Gemini</option>
+    </select>
+  </div>
+  <div class="fn__hr--small"></div>
+  <div class="fn__flex">
+    <div class="b3-label__text">${this.i18n.AIProviderInterface}</div>
+    <div class="fn__space"></div>
+    <input type="text" class="b3-text-field fn__flex-center fn__flex-1" data-type="endpoint" placeholder="Endpoint" value="${provider.endpoint}">
+    <div class="fn__space--small"></div>
+    <input type="password" class="b3-text-field fn__flex-center fn__flex-1" data-type="apiKey" placeholder="API Key" value="${provider.apiKey}">
+  </div>
+  <div class="fn__hr--small"></div>
+  <div class="fn__flex">
+    <div class="b3-label__text">${this.i18n.AIProviderModels}</div>
+    <div class="fn__space"></div>
+    <input type="text" class="b3-text-field fn__flex-center fn__flex-1" data-type="models" placeholder="Models" value="${provider.models.join(", ")}">
+  </div>
+  <div class="fn__hr--b"></div>
+</div>`.trim();
+            const element = HTMLToElement(providerHTML);
+            element.querySelector("[data-type=up]").addEventListener("click", () => {
+              const previousElement = element.previousElementSibling;
+              if (previousElement) {
+                previousElement.insertAdjacentElement("beforebegin", element);
+              }
+            });
+            element.querySelector("[data-type=delete]").addEventListener("click", () => {
+              element.remove();
+            });
+            return element;
+          }
+          const element = HTMLToElement(`<div class="fn__flex-center" data-type="AI">
+            <div class="fn__flex" data-type="add-provider"><button class="b3-button b3-button--outline fn__flex-1">${this.i18n.addAIProvider}</button></div>
+            </div>`);
+          this.data[STORAGE_NAME].AISettings.providers.forEach(provider => {
+            element.querySelector("[data-type=add-provider]").insertAdjacentElement("beforebegin", getProviderConfigurationPanel(provider));
+          });
+          element.querySelector("[data-type=add-provider] > button").addEventListener("click", () => {
+            element.querySelector("[data-type=add-provider]").insertAdjacentElement("beforebegin", getProviderConfigurationPanel({
+              name: "",
+              type: "OpenAI",
+              endpoint: "",
+              apiKey: "",
+              models: []
+            }));
+          });
+          return element;
+        },
+      }
     ];
   }
 
@@ -570,7 +774,7 @@ export default class DrawioPlugin extends Plugin {
         const iframeID = unicodeToBase64(`drawio-edit-tab-${imageInfo.imageURL}`);
         const editTabHTML = `
 <div class="drawio-edit-tab">
-    <iframe src="/plugins/siyuan-embed-drawio/draw/index.html?proto=json${that.isDarkMode() ? "&dark=1" : ""}&noSaveBtn=1&saveAndExit=0&embed=1${that.isMobile ? "&ui=min" : ""}&lang=${window.siyuan.config.lang.split('_')[0]}&iframeID=${iframeID}"></iframe>
+    <iframe src="/plugins/siyuan-embed-drawio/draw/index.html?proto=json${that.isDarkMode() ? "&dark=1" : ""}&noSaveBtn=1&saveAndExit=0&configure=1&embed=1${that.isMobile ? "&ui=min" : ""}&lang=${window.siyuan.config.lang.split('_')[0]}&iframeID=${iframeID}"></iframe>
 </div>`;
         this.element.innerHTML = editTabHTML;
 
@@ -582,6 +786,16 @@ export default class DrawioPlugin extends Plugin {
           iframe.contentWindow.postMessage(JSON.stringify(message), '*');
         };
 
+        const onConfigure = (message: any) => {
+          const AIConfig = that.getDrawioAIConfig();
+          postMessage({
+            action: "configure",
+            config: {
+              ...AIConfig,
+            }
+          });
+        };
+
         const onInit = (message: any) => {
           postMessage({
             action: "load",
@@ -635,7 +849,10 @@ export default class DrawioPlugin extends Plugin {
               var message = JSON.parse(event.data);
               if (message != null) {
                 // console.log(message.event);
-                if (message.event == "init") {
+                if (message.event == "configure") {
+                  onConfigure(message);
+                }
+                else if (message.event == "init") {
                   onInit(message);
                 }
                 else if (message.event == "save" || message.event == "autosave") {
@@ -688,7 +905,7 @@ export default class DrawioPlugin extends Plugin {
     <div class="edit-dialog-header resize__move"></div>
     <div class="edit-dialog-container">
         <div class="edit-dialog-editor">
-            <iframe src="/plugins/siyuan-embed-drawio/draw/index.html?proto=json${this.isDarkMode() ? "&dark=1" : ""}&noSaveBtn=1&saveAndExit=0&embed=1${this.isMobile ? "&ui=min" : ""}&lang=${window.siyuan.config.lang.split('_')[0]}&iframeID=${iframeID}"></iframe>
+            <iframe src="/plugins/siyuan-embed-drawio/draw/index.html?proto=json${this.isDarkMode() ? "&dark=1" : ""}&noSaveBtn=1&saveAndExit=0&configure=1&embed=1${this.isMobile ? "&ui=min" : ""}&lang=${window.siyuan.config.lang.split('_')[0]}&iframeID=${iframeID}"></iframe>
         </div>
         <div class="fn__hr--b"></div>
     </div>
@@ -715,6 +932,16 @@ export default class DrawioPlugin extends Plugin {
       iframe.contentWindow.postMessage(JSON.stringify(message), '*');
     };
 
+    const onConfigure = (message: any) => {
+      const AIConfig = this.getDrawioAIConfig();
+      postMessage({
+        action: "configure",
+        config: {
+          ...AIConfig,
+        }
+      });
+    };
+
     const onInit = (message: any) => {
       postMessage({
         action: "load",
@@ -822,7 +1049,10 @@ export default class DrawioPlugin extends Plugin {
           var message = JSON.parse(event.data);
           if (message != null) {
             // console.log(message.event);
-            if (message.event == "init") {
+            if (message.event == "configure") {
+              onConfigure(message);
+            }
+            else if (message.event == "init") {
               onInit(message);
             }
             else if (message.event == "load") {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "siyuan-embed-drawio",`
`3`		`- "version": "0.6.7",`
	`3`	`+ "version": "0.7.0",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"description": "This is a plugin for siyuan",`
`6`	`6`	`"author": "",`