diff --git a/js/core/app-shell.js b/js/core/app-shell.js
index 2091fc6..bf431ea 100644
--- a/js/core/app-shell.js
+++ b/js/core/app-shell.js
@@ -70,6 +70,24 @@
this.el.copyImageBtn = document.getElementById('copy-image-btn');
this.el.exportImageBtn = document.getElementById('export-image-btn');
this.el.viewCodeBtn = document.getElementById('view-code-btn');
+ const toolbarContainer = this.el.viewCodeBtn?.parentElement;
+ if (toolbarContainer) {
+ let editBtn = toolbarContainer.querySelector('#edit-mermaid-btn');
+ if (!editBtn) {
+ editBtn = document.createElement('button');
+ editBtn.id = 'edit-mermaid-btn';
+ editBtn.type = 'button';
+ editBtn.className =
+ 'p-2 bg-purple-500 text-white border-2 border-black hover:bg-purple-600 transition-all flex items-center gap-1 hidden';
+ editBtn.title = '在 Mermaid Live 中编辑当前图表';
+ editBtn.innerHTML =
+ '在Mermaid中编辑';
+ toolbarContainer.appendChild(editBtn);
+ }
+ this.el.editMermaidBtn = editBtn;
+ } else {
+ this.el.editMermaidBtn = null;
+ }
// 配置模态框
this.el.settingsBtn = document.getElementById('settings-btn');
@@ -180,6 +198,11 @@
this.viewArtifactCode()
);
}
+ if (this.el.editMermaidBtn) {
+ this.el.editMermaidBtn.addEventListener('click', () =>
+ this.openMermaidLiveEditor()
+ );
+ }
if (this.el.settingsBtn) {
this.el.settingsBtn.addEventListener('click', () =>
@@ -1534,6 +1557,41 @@
return `https://mermaid.ink/img/pako:${encoded}?${params.toString()}`;
}
+ openMermaidLiveEditor() {
+ const manifest = this.getActiveManifest();
+ if (!manifest || manifest.artifact?.type !== 'mermaid') {
+ console.warn('当前模块不支持 Mermaid 在线编辑');
+ return;
+ }
+ const state = this.runtime.getState(manifest.id) || {};
+ const artifactId = state.currentArtifactId;
+ if (!artifactId || !state.artifacts?.[artifactId]) {
+ alert('暂无可编辑的 Mermaid 图表,请先生成图表。');
+ return;
+ }
+ const artifact = state.artifacts[artifactId];
+ const code = this.getMermaidCode(artifact).trim();
+ if (!code) {
+ alert('当前图表缺少 Mermaid 代码,无法打开在线编辑器。');
+ return;
+ }
+ let encoded;
+ try {
+ encoded = this.encodeMermaidState(code);
+ } catch (error) {
+ console.error('构建 Mermaid 在线编辑链接失败:', error);
+ alert(error.message || '构建 Mermaid 编辑链接失败');
+ return;
+ }
+ const url = `https://mermaid.live/edit#pako:${encoded}`;
+ const editorWindow = window.open(url, '_blank', 'noopener');
+ if (!editorWindow) {
+ //alert('请允许浏览器弹出窗口以打开 Mermaid 编辑器。');
+ return;
+ }
+ editorWindow.opener = null;
+ }
+
getMermaidExportScale() {
return Math.max(6, this.imageExportScale);
}
@@ -2171,6 +2229,11 @@
this.el.viewCodeBtn.disabled =
!hasArtifact || !manifest.exports?.allowCode;
}
+ if (this.el.editMermaidBtn) {
+ const isMermaidManifest = manifest.artifact?.type === 'mermaid';
+ this.el.editMermaidBtn.classList.toggle('hidden', !isMermaidManifest);
+ this.el.editMermaidBtn.disabled = !hasArtifact || !isMermaidManifest;
+ }
}
clearCurrentConversation() {